• 由 未知用户 (guozhaoxiang)创建, 最后修改于7月 19, 2022

背景说明：

通过兔展制作的h5活动，在微信的h5环境下天然支持分享、助力、组队答题等，但是在外部app和外部小程序的环境下，需要第三方做二次开发，才能实现正常的裂变活动，本章节主要介绍外部的小程序和app如何对接

  • 外部小程序分享裂变对接
  • 外部app分享对接

功能说明：

一、外部小程序分享裂变对接

需求说明

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

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

问题说明

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

解决方案

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

数据格式如下:

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


兔展小程序处理逻辑: TODO 流程图

对接注意事项:

  • 尽可能早的向小程序发送消息, 因为如果没有接收到 H5 发来的信息的话, 默认使用当前的链接

  • 如果在触发需要更新链接参数的更改的业务的时候(例如 分享人参数变更), 要及时再次向小程序发送消息, 小程序会优先使用最后一次的数据

  • 用户分享操作会不会导致分享链接的更改(例如 分享层级 + 1), 记得使用 triggerShareLink 参数

对接方案

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

完整示例附件

ext-miniapp-h5-preview (1).zip

二、APP分享对接

APP集成自建应用开通

具体自建应用开通，详见：C端用户登录中，第三点。

编辑器设置——唤起APP外部分享

类似于“调起APP登录授权”的配置，在”按钮“、”形状“、”图片“、”文本“、”头像昵称”这些组件时的触发逻辑中选择“点击时”“唤起APP外部分享”、然后再点击“设置自建应用”，跳转至“预览设置”弹窗，选择设置好的自建应用。

目前一个H5作品中只支持配置一个APP的自建应用，所以，不管是“调起APP登录授权”还是“唤起APP外部分享”，只要有一个已经设置好“自建应用”，那么其他组件直接设置触发逻辑即可。

触发时会执行，app sdk demo中的 AppActions.share()方法。


完整示例附件

7c6ae727-18e8-4abf-b20e-5083c7f09983 (1)




  • 无标签