Open yanyue404 opened 3 years ago
在最近完成的一个小程序项目中,碰到了比较复杂的分享逻辑,此篇文章纪录下来我的分享实践。
项目中的分享逻辑难点主要有以下几个方面:
分享场景
分享实现效果
以 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