前言
在最近完成的一个小程序项目中，碰到了比较复杂的分享逻辑，此篇文章纪录下来我的分享实践。
项目中的分享逻辑难点主要有以下几个方面：
- 分享海报绘制
- 多用户角色：游客，C端用户，A端用户
- 业务逻辑的实现
逻辑梳理
分享场景
- 文章详情分享 （支持二维码）
- 视频详情分享 （支持二维码）
- 产品详情页分享
- 个人名片分享（支持二维码）
- 营销工具的分享 （支持二维码）
- e 家直播分享（支持二维码）
分享实现效果
以 e 家直播分享为例：
-
在 e 家直播页面生成分享码分享给游客，游客扫码后进入直播页，点击任意按钮操作以及返回上一页会提醒游客进行授权，游客没有授权完成成为一个 C 端用户，二次进入还会提醒游客走授权逻辑；如果游客授权成功成为一个 C 端用户，可以走游客的逻辑。
-
C 端用户查看，进入分享页（可返回首页）。
-
A 端用户查看，进入分享页（可返回首页）。
流程图
代码实现
简化梳理版
auth_login
Page({
onload() {
// 扫码进入分享
if (options.scene) {
// 存储参数
}
//右上角分享
if (options && options.scene === undefined) {
// 存储参数
}
},
// 检验用户状态
checkUserStatus() {
API.authorize(params).then((res) => {
try {
if (token) {
this.getUserInfoByToken();
}
} catch (err) {}
});
},
getUserInfoByToken() {
this._getUserInfo((res) => {
// ! 设置全局 UserInfo 缓存 第一处
wx.setStorage({
key: 'userInfo_Studio',
data: res.data.data,
});
// ------- 非分享的模块 ----------
if (!isShare && !isShareFloatWindow) {
that._unShareController(res);
}
// -------- 分享跳转分发 ---------
if (isShare) {
that._shareController('normal', res);
}
// 悬浮框分享转发
if (isShareFloatWindow) {
that._shareController('floatWindow', res);
}
});
},
_getUserInfo() {
const params = {
share: isShare, // 是否是分享的情况
accountId: inviteId, // 告知分享用户 id
};
return userInfo;
},
// 非分享
_unShareController() {
// 1.A 端用户 跳转到A端我的
// 2.C 端用户 跳转到C端首页
// 3. 游客弹出使用说明提醒
},
_shareController(shareType, data) {
if (shareType === 'normal') {
// 1. 代理人分享给 C || 代理人分享给 A，路由：主代理人空间 ——> 分享页
// 2. 代理人分享给游客，路由：授权页——> 分享页
}
if (shareType === 'floatWindow') {
// 代理人分享给 C || 代理人分享给 A，路由：主代理人空间 ——> 分享页
}
},
});home
Page({
onLoad(options) {
const SHARE__options = app.globalData.SHARE_OPTIONS;
if (SHARE__options) {
if (SHARE__options.shareType) {
// 1. 文章详情 articleDetail
// 2. 播放视频 playVideo
// 3. 产品详情 productDetail
}
if (SHARE__options && SHARE__options.shareType === undefined) {
// 1. 个人名片
// 2. e家直播
// 3. 营销工具
}
}
},
});
前言
在最近完成的一个小程序项目中，碰到了比较复杂的分享逻辑，此篇文章纪录下来我的分享实践。
项目中的分享逻辑难点主要有以下几个方面：
逻辑梳理
分享场景
分享实现效果
以 e 家直播分享为例：
在 e 家直播页面生成分享码分享给游客，游客扫码后进入直播页，点击任意按钮操作以及返回上一页会提醒游客进行授权，游客没有授权完成成为一个 C 端用户，二次进入还会提醒游客走授权逻辑；如果游客授权成功成为一个 C 端用户，可以走游客的逻辑。
C 端用户查看，进入分享页（可返回首页）。
A 端用户查看，进入分享页（可返回首页）。
流程图
代码实现
auth_login
home