需求说明

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

  • 埋点数据: 渠道信息来源, 分享层级等参数更改
  • 业务逻辑: 助力插件逻辑需要分享时带上当前用户的助力 id

问题说明

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

解决方案

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

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/practice/appshare.html 

数据格式如下:

{

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

对接方案

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

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

例如："https://renderer.rabbitpre.com/m2/F9CtGazId6i?=&lc=1&sui=oXaEF54LZniS2lJMeHg9wj_4ow0U&saudid=913154741931360256&from=singlemessage#from=share"

distinctid/viewid：访客id，优先级：unionid>openid>cookie中存在的distinctid>直接生成的uuid并存入cookie

sui：分享来源者的distinctid/viewid

audid：用户档案id

saudid：分享来源者的audid

lc：传播层级，每分享一次+1，为避免自己分享给自己，会对audid和saudid进行比较判断

actid：场景活动id

cnl：渠道id

cnltype：渠道类型

from：来源（singlemessage  朋友）


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
    }
  }
})


完整示例附件


ext-miniapp-h5-preview.zip




  • 无标签