需求说明

兔展作品在微信环境下每次分享出来的链接都会跟上次有所不同, 原因是:

问题说明

小程序预览兔展作品页面在分享时不能拿到作品处理后的分享链接

解决方案

在小程序加载兔展作品的时候, H5 会在不同的时机发送处理好的分享链接给小程序, 见微信文档

数据格式如下:

{

  "type": "EXT_APP_H5_SHARE_LINK",
  "payload": {
    // 分享带上的 H5 链接(下次打开的链接)
    "shareLink": "",
    // 小程序触发分享后, 更改当前预览的 H5 链接, 一般只更改 hash 参数, 避免不必要的刷新
    "triggerShareLink": "",
    "imgUrl":"", // 作品封面
    "desc":"", // 作品描述
    "title":"", // 作品标题
   }
}

对接方案

1. 从页面参数中拿到链接并展示

2. 分享前获取 H5 发来的处理好的分享链接(请做好接收不到信息的兼容逻辑)

3. 分享时把分享链接放到页面参数中

示例如下:

<!--index.wxml-->
<web-view src="{{link}}" bindmessage="handleMessage"/>


// index.js
let nextLink = ''
let triggerShareLink = ''
Page({
  data: {
    link: "",
    nextLink: ""
  },
  onLoad(options) {
    wx.showShareMenu();
    const currentLink = options.link && decodeURIComponent(options.link);
    console.error('1. 从页面参数中拿到链接并展示', currentLink)
    // 如果没有接收到 H5 发来的信息的话, 默认使用当前的链接
    nextLink = currentLink
    triggerShareLink = currentLink;
    this.setData({
      link: currentLink
    })
  },
  handleMessage: (event) => {
    console.log('onMessage', event)
 
 
    event.detail.data.forEach((current) => {
      if (current.type === "EXT_APP_H5_SHARE_LINK") {
        nextLink = current.payload.shareLink
        triggerShareLink = current.payload.triggerShareLink
      }
    })
    console.error('2. 分享前获取 H5 发来的处理好的分享链接', {
      nextLink,
      triggerShareLink
    })
  },
  onShareAppMessage() {
    const path = `/pages/index/index?link=${encodeURIComponent(nextLink)}`
    console.error('3. 分享时把分享链接放到页面参数中', path)
    console.error('4. 触发 H5 分享埋点上报', triggerShareLink)
    this.setData({
      link: triggerShareLink
    })
    return {
      path
    }
  }
})


完整示例附件