220 lines
5.6 KiB
Markdown
220 lines
5.6 KiB
Markdown
# 小程序分享功能说明
|
|
|
|
## 📋 功能概述
|
|
|
|
万花筒AI助手小程序已支持**分享给好友**和**分享到朋友圈**功能,用户可以将精彩内容分享给微信好友或发布到朋友圈。
|
|
|
|
## ✨ 已实现页面
|
|
|
|
### 1. **首页** (`pages/home/home`)
|
|
- **分享标题**: 万花筒AI助手 - 智能生成种草文案
|
|
- **分享路径**: `/pages/home/home`
|
|
- **应用场景**: 用户浏览产品列表时可分享小程序首页
|
|
|
|
### 2. **文章详情页** (`pages/article-detail/article-detail`)
|
|
- **分享标题**: 动态显示文章标题
|
|
- **分享路径**: 带文章ID和产品ID参数
|
|
- **应用场景**: 用户查看文案详情时可分享特定文案
|
|
|
|
### 3. **文章列表页** (`pages/articles/articles`)
|
|
- **分享标题**: 动态显示当前文案标题
|
|
- **分享路径**: 带产品ID参数
|
|
- **分享封面**: 使用产品图片
|
|
- **应用场景**: 用户浏览文案列表时分享
|
|
|
|
### 4. **我的发布** (`pages/profile/published/published`)
|
|
- **分享标题**: 我的发布记录 - 万花筒AI助手
|
|
- **分享路径**: `/pages/home/home`
|
|
- **应用场景**: 用户查看自己的发布记录时分享
|
|
|
|
## 🎯 分享方式
|
|
|
|
### 方式一: 右上角菜单分享
|
|
用户点击小程序右上角的 `...` 按钮,可以看到:
|
|
- **转发** - 分享给微信好友/群
|
|
- **分享到朋友圈** - 发布到微信朋友圈
|
|
|
|
### 方式二: 页面内分享按钮(可选)
|
|
可以在页面中添加自定义分享按钮:
|
|
|
|
```html
|
|
<!-- WXML -->
|
|
<button open-type="share" class="share-btn">
|
|
分享给好友
|
|
</button>
|
|
```
|
|
|
|
## 💡 技术实现
|
|
|
|
### 1. 分享给好友 (onShareAppMessage)
|
|
|
|
```typescript
|
|
onShareAppMessage() {
|
|
return {
|
|
title: '分享标题', // 分享卡片标题
|
|
path: '/pages/home/home', // 分享路径
|
|
imageUrl: '' // 分享封面图(可选)
|
|
};
|
|
}
|
|
```
|
|
|
|
### 2. 分享到朋友圈 (onShareTimeline)
|
|
|
|
```typescript
|
|
onShareTimeline() {
|
|
return {
|
|
title: '分享标题', // 朋友圈显示标题
|
|
imageUrl: '' // 分享封面图(可选)
|
|
};
|
|
}
|
|
```
|
|
|
|
## 📝 配置要求
|
|
|
|
### app.json 配置
|
|
确保启用朋友圈分享:
|
|
|
|
```json
|
|
{
|
|
"permission": {
|
|
"scope.userLocation": {
|
|
"desc": "你的位置信息将用于小程序位置接口的效果展示"
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### 页面配置
|
|
在需要分享的页面.json中可配置:
|
|
|
|
```json
|
|
{
|
|
"navigationBarTitleText": "页面标题",
|
|
"enableShareAppMessage": true, // 允许分享给好友(默认true)
|
|
"enableShareTimeline": true // 允许分享到朋友圈(默认true)
|
|
}
|
|
```
|
|
|
|
## 🎨 优化建议
|
|
|
|
### 1. 自定义分享封面
|
|
为提升分享效果,建议添加分享封面图:
|
|
|
|
```typescript
|
|
onShareAppMessage() {
|
|
return {
|
|
title: '精彩种草文案',
|
|
path: '/pages/home/home',
|
|
imageUrl: '/images/share-cover.jpg' // 建议尺寸: 5:4
|
|
};
|
|
}
|
|
```
|
|
|
|
**推荐尺寸**:
|
|
- 分享给好友: 5:4 (例如: 500x400)
|
|
- 分享到朋友圈: 1:1 (例如: 500x500)
|
|
|
|
### 2. 动态分享内容
|
|
根据页面内容动态生成分享信息:
|
|
|
|
```typescript
|
|
onShareAppMessage() {
|
|
const currentArticle = this.data.currentArticle;
|
|
return {
|
|
title: currentArticle.title,
|
|
path: `/pages/article-detail/article-detail?id=${currentArticle.id}`,
|
|
imageUrl: currentArticle.coverImage
|
|
};
|
|
}
|
|
```
|
|
|
|
### 3. 分享数据统计
|
|
可以在分享时记录统计数据:
|
|
|
|
```typescript
|
|
onShareAppMessage() {
|
|
// 记录分享事件
|
|
wx.reportAnalytics('share_action', {
|
|
page: 'home',
|
|
content_type: 'product_list'
|
|
});
|
|
|
|
return {
|
|
title: '万花筒AI助手',
|
|
path: '/pages/home/home'
|
|
};
|
|
}
|
|
```
|
|
|
|
## 🔍 分享参数传递
|
|
|
|
### 场景还原
|
|
用户通过分享卡片进入小程序时,可以获取分享参数:
|
|
|
|
```typescript
|
|
onLoad(options: any) {
|
|
// 获取分享参数
|
|
const productId = options.productId;
|
|
const articleId = options.articleId;
|
|
|
|
if (productId) {
|
|
// 直接加载对应产品
|
|
this.loadProduct(productId);
|
|
}
|
|
}
|
|
```
|
|
|
|
### 分享路径示例
|
|
|
|
```typescript
|
|
// 带参数的分享路径
|
|
path: `/pages/articles/articles?productId=${this.data.productId}&from=share`
|
|
|
|
// 多个参数
|
|
path: `/pages/detail/detail?id=123&type=article&source=timeline`
|
|
```
|
|
|
|
## ⚠️ 注意事项
|
|
|
|
1. **路径限制**: 分享路径必须是已在 `app.json` 中注册的页面路径
|
|
2. **参数长度**: 分享路径总长度不能超过 128 字节
|
|
3. **图片要求**:
|
|
- 分享图片支持本地路径和网络图片
|
|
- 网络图片需要先下载到本地
|
|
4. **朋友圈限制**: 分享到朋友圈时,`title` 不能超过 32 个字符
|
|
5. **用户取消**: 用户可能取消分享,无法强制分享
|
|
|
|
## 📊 分享效果监控
|
|
|
|
### 分享回调
|
|
小程序没有直接的分享成功回调,但可以通过以下方式间接监控:
|
|
|
|
1. **分享参数标记**: 在分享路径中添加 `from=share` 参数
|
|
2. **数据统计**: 统计带分享参数的访问量
|
|
3. **微信数据助手**: 在微信公众平台查看分享数据
|
|
|
|
## 🚀 未来优化方向
|
|
|
|
1. **个性化分享**: 根据用户行为推荐分享内容
|
|
2. **分享激励**: 添加分享奖励机制
|
|
3. **社交裂变**: 设计分享裂变活动
|
|
4. **A/B测试**: 测试不同分享文案的效果
|
|
|
|
## 📱 测试方法
|
|
|
|
### 开发环境测试
|
|
1. 打开微信开发者工具
|
|
2. 点击右上角 `...` 菜单
|
|
3. 选择 "转发" 或 "分享到朋友圈"
|
|
4. 查看分享卡片预览效果
|
|
|
|
### 真机测试
|
|
1. 使用体验版或开发版小程序
|
|
2. 在真实微信环境中测试分享
|
|
3. 验证分享卡片样式和跳转
|
|
|
|
## 📚 相关文档
|
|
|
|
- [微信官方文档 - 转发](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareAppMessage-Object-object)
|
|
- [微信官方文档 - 分享到朋友圈](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareTimeline)
|