【小程序】分享至朋友圈

[fayeah]

我们的小程序是一个小程序平台，三方的h5应用可嵌入到其中。有一个需求是将三方的h5页面分享至朋友圈的功能。如果仅仅是在h5页面实现也是可以的。但是在h5实现分享至朋友圈功能有几个限制：

Prerequisite：

• 可运行的小程序

方案选择

1. JSSDK的分享至朋友圈API即将废除：

wx.onMenuShareTimeline({
  title: '', // 分享标题
  link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  imgUrl: '', // 分享图标
  success: function () {
  // 用户点击了分享后执行的回调函数
  }
}

2. 如果每一个内嵌的h5都实现一遍，将是非常繁琐和麻烦的一件事情。

基于以上两点，我们决定在平台端实现分享朋友圈功能，但是h5需要触发一个动作跳转到平台的分享页面（是平台端小程序的一个页面），然后我们将该页面进行分享，引导用户进入H5页面。

分享至朋友圈的限制

小程序的分享朋友圈不是所有的用户都能分享，也不是所有的设备都可以分享，以下是允许的条件：

1. 基础库2.11.3版本以上支持
2. Android平台支持
3. 适用于内容页面分享，不适用于交互过多的页面分享

实现

我们的小程序使用了Taro框架，因此也更多地在使用Taro提供的方法

1. 首先，页面需设置允许“发送给朋友”，默认是不打开的，所以需要手动加上：

onShareAppMessage() {
    const {
      title = '',
      path = '',
      imageUrl = '',
      shareRefresh,
      state,
    } = this.$router.params
    return {
      title: decodeURIComponent(title),       //decode的原因是从h5传过来的参数是encode过的，所以这里要拿到解码的值
      path: decodeURIComponent(path),
      imageUrl: decodeURIComponent(imageUrl),
    }
  }

2. 满足条件 1 后，页面需设置允许“分享到朋友圈”：

onShareAppMessage() {
  const {
    title = '',
    path = '',
    imageUrl = '',
    shareRefresh,
    state,
  } = this.$router.params
  return {
    title: decodeURIComponent(title),       //decode的原因是从h5传过来的参数是encode过的，所以这里要拿到解码的值
    path: decodeURIComponent(path),
    imageUrl: decodeURIComponent(imageUrl),
  }
}

3. 分享之后用户从朋友圈打开的页面是一个小程序单页模式的页面，不是我们真正的分享的小程序，所以点击上面任何按钮会提示进入到小程序，那么进入之后我们想要引导用户去到相应的页面：

 const SCENE = {
  OPEN_FROM_TIMELINE: 1154,  //朋友圈内打开“单页模式”
  SINGLE_PAGE_MODE: 1155,   // “单页模式”打开小程序
}

get isInSinglePageMode() {
  return [SCENE.OPEN_FROM_TIMELINE, SCENE.SINGLE_PAGE_MODE].includes(
    this.state.scene
  )
}

handleGoToActivity = () => {
  const { path } = this.$router.params

  Taro.navigateTo({
    url: '/' + (path ? decodeURIComponent(path) : this.defaultPath),
  })
}

{this.isInSinglePageMode && (
  <Button
    type='primary'
    onClick={this.handleGoToActivity}
    hoverClass={styles.hover}
    className={cls(styles.button, styles.shareButton)}
  >
    <KOIcon type='wechat' custom-class={styles.icon} />
    去相应的页面
  </Button>
)}

有几个地方需要注意的：

1. 我们只有从朋友圈的途径打开小程序才引导用户，这里用到 了两个场景值：1154，1155，见代码注释。
2. naviagateTo的url要带前面的斜杠，否则不生效的，当时我这个debug了很久，唉。
3. 在测试UAT环境的时候，我们发现有一个页面分享发生了错误，后来通过错误信息+看log的方式，发现原来是第三发h5传过来的参数包含一个base64的字符串，他们想要传一个图片过来，然而我们也是允许的，所以由于url过长那个页面无法分享，所以后面优化的方向是不要让三方传很长的字符串。

References:

• https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#11
• https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html