正在查看旧版本。 查看 当前版本.

与当前比较 查看页面历史记录

« 前一个 版本 2 当前 »

背景说明:

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

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

功能说明:

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

需求说明

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

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

问题说明

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

解决方案

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

数据格式如下:

{
  "type""EXT_APP_H5_SHARE_LINK",
  "payload": {
    // 分享带上的 H5 链接(下次打开的链接)
    "shareLink""",
    // 小程序触发分享后, 更改当前预览的 H5 链接, 一般只更改 hash 参数, 避免不必要的刷新
    "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)




  • 无标签