微信小程序 SDK 与 H5 打通方案

方案概述

小程序与 H5 的数据打通，是小程序将匿名 ID 通过 URL 方式传递给 H5 端，H5 端替换该匿名 ID，达到统一用户标识的目的。

方案实现

小程序端

// webview.js
import H5Linker from '/dist/wechat/plugin/h5-linker/index.esm';
sensors.usePlugin(H5Linker);

Page({
  data: {
    webUrl: ''
   },
  onLoad: function (options) {
    let URL = 'https://example/demo.html' 必填项
    let after_hash = true //选填项 默认 false
    this.setData({
      webUrl: H5Linker.addDistinctIdToUrl(URL ,after_hash)
    });
  }
});
// webview.wxml

H5 端

Web JS SDK 集成

H5 页面集成 Web JS SDK。

开启多域名打通

参考配置如下：

sensors.use('SiteLinker',
  {linker: [
      {part_url: '', after_hash: false} 
  ]}
)

注意事项：因为涉及到多个域名页面，会产生多个匿名 ID，所以使用该多域名打通功能，建议开启多对一。

其他小程序实现方案

小程序端

小程序端一般使用 UUID 或 OpenID 作为匿名 ID ，这里以 OpenID 为例。

初始化小程序 SDK

小程序端集成 SDK 后，调用 identify 将匿名 id 修改为 OpenID，并调用 init 初始化：

// 初始化 SDK
wx.request({
	url: '后端获取 OpenID 的请求',
	success: function(res){
		if(res.OpenID){
			sensors.identify(res.OpenID);	
		}
	},
	complete: function(){
		sensors.init();
	}
});

web-view 传递匿名 ID

在需要跳转 H5 的小程序 Page 中获取匿名 ID
将匿名 ID 拼接到 web-view 的 src 属性上，传递给 H5

// 页面的 wxml


//页面的 js
Page({
    data: {        
      // 跳转的 h5 的地址
      url: ''
    },
    onLoad() {     
       // 获取匿名 ID 
       var distinctID = app.sensors.getAnonymousID();
       // 更新跳转 H5 的 url
       this.setData({ 
           url: 'https://example.com?distinctID=' + distinctID  
       })
    }
})

H5 端

Web JS SDK 集成

H5 页面集成 Web JS SDK。

替换 H5 匿名 ID

判断当前页面环境，若处于小程序中，则解析页面地址中的参数，获取 distinctID 参数值
调用 Web JS SDK 提供的 identify(distinctID, true) 接口修改匿名 ID

// 小程序中的 H5 页面

全域用户关联

微信小程序端

微信小程序多用户关联

微信小程序多用户 ID 关联时，请参阅全域用户关联。这里以 Unionid ID 为例。

web-view 传递 Unionid ID

将 Unionid ID 拼接到 web-view 的 src 属性上，传递给 H5

// 页面的 wxml


//页面的 js
Page({
    data: {        
      // 跳转的 h5 的地址
      url: ''
    },
    onLoad() {     
       // 更新跳转 H5 的 url
       this.setData({ 
           url: 'https://example.com?unionidID=' + unionidID // unionidID 为微信用户的 Unionid 
       })
    }
})

H5 端

Web JS SDK 集成

H5 页面集成 Web JS SDK。

替换 H5 匿名 ID

判断当前页面环境，若处于微信小程序中，则解析页面地址中的参数，获取 unionidID 参数值
调用 Web JS SDK 提供的 bind("$identity_mp_unionid", unionidID) 接口修改匿名 ID

// 小程序中的 H5 页面