微信小程序分享案例纪录

[yanyue404]

前言

在最近完成的一个小程序项目中，碰到了比较复杂的分享逻辑，此篇文章纪录下来我的分享实践。

项目中的分享逻辑难点主要有以下几个方面：

• 分享海报绘制
• 多用户角色：游客，C端用户，A端用户
• 业务逻辑的实现

逻辑梳理

分享场景

• 文章详情分享 （支持二维码）
• 视频详情分享 （支持二维码）
• 产品详情页分享
• 个人名片分享（支持二维码）
• 营销工具的分享 （支持二维码）
• e 家直播分享（支持二维码）

分享实现效果

以 e 家直播分享为例：

1. 在 e 家直播页面生成分享码分享给游客，游客扫码后进入直播页，点击任意按钮操作以及返回上一页会提醒游客进行授权，游客没有授权完成成为一个 C 端用户，二次进入还会提醒游客走授权逻辑；如果游客授权成功成为一个 C 端用户，可以走游客的逻辑。

2. C 端用户查看，进入分享页（可返回首页）。

3. 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. 营销工具
      }
    }
  },
});