实现多个小程序和公众号用户关联的方法及注意事项
实现多个小程序与公众号之间的用户关联
1.微信公众平台官方文档
为了识别用户，每个用户都会为每个公众号生成一个安全ID。如果需要在多个公众号和移动应用之间共享用户，需要前往微信开放平台，将这些公众号和应用绑定到一个开放平台账号下。绑定后，虽然一个用户在多个公众号和应用下有多个不同的ID，但在同一个开放平台账号下，他只有一个公众号和应用。更多详情可参阅用户管理-获取用户基本信息（机制）文档。
如果你已经按照微信官方文档实现了，那么恭喜你，你不需要继续往下读了，我们也不会打扰你。
上面描述的很清楚了，每个微信用户在进入公众号和小程序时都会有不同的ID，如果想获得唯一的用户ID，必须同时将它们绑定到同一个开放平台账号上。
本文献给开通平台认证还差300元的码友们
2. 准备工作3. 应用场景描述
当你有一个创意，半柱香的时间就可以开发出一个独一无二的微信小程序。
但痛苦的事情也随之而来，小程序用了就没了，根本留不住用户。这时候公众号就派上用场了。公众号和小程序是相辅相成的，公众号可以为小程序留住粉丝并与粉丝互动，引导粉丝进小程序，实现公众号的变现。同时，小程序配合公众号也能大大提高用户粘性，增加复购。
这里介绍一种可以轻松建立两者关联的方法，用户只需要进入一次小程序就可以建立关联。
4.实施步骤
硬菜来了
a.获取微信小程序（用户唯一标识）
获取用户代码：
wx.login({ success: res => { // res.code 得到微信小程序用户一次性code wx.request({ url:'https://api.weixin.qq.com/sns/jscode2session?appid=' + appId + '&secret=' + secret + '&js_code=' + res.code + '&grant_type=authorization_code', data: {}, header: { 'content-type': 'json' }, success: function (u) { var openid = u.data.openid //返回openid } }) } })
注意：以上代码是一个非常不规范的示例，仅用于演示实现思路和步骤。（开发时请不要将代码直接留在小程序中，必须通过后端服务器进行传输）
b.借助web-view获取用户公众号
上一步就可以搞定了，先不要着急让用户进入小程序主页面，可以通过后端服务查询当前关联是否建立，如果没有建立，再将用户跳转到你准备好的 web-view 页面，逻辑代码如下：
// 检查关系是否已建立
wx.request({ url: 'http://XXXX', //后台URL 略 success(res) { if(!res.data.exist){ //如果不存在则直接跳走 wx.navigateTo({ url: '/pages/home/webview?wxid=wxOpenid' }) } } });
// 空的 web 视图“//home/”
wxml：
<web-view id="viewopen" src="{{src}}" bindload="onbindLoad"> web-view>
JS
Page({ data: { src: "" }, onLoad: function (options) { // let redirect_url = 'https//XXX/api_XXX?wxopenid=' + options.wxid; this.data.src = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=公众号的appid&redirect_uri=' + eascape(redircturl) + '&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect'; this.setData({ src: this.data.src }) } })
c.从后端API服务获取
上面的URL是获取公众号用户的Code，获取成功后会跳转到你指定的返回URL，此时你在你的“//XXX/”中就可以获取到用户的Code了，因为用户的Code已经作为参数传到你的后台API页面了，此时你只需要将刚刚获取到的公众号Code换成用户的Code即可。最后提醒大家，将辛苦获取到的2个关系直接保存到你的数据表中，下次使用即可。
获取公众号接口URL： .(“{0}&={1}&code={2}&=”, , , code)
4.入坑容易，出坑也容易
这一步很关键，如果用户掉进去走不出来，那你的小程序就白费了。
如果只用步骤2B留下的后端URL，获得其超高的颜值，实在是可惜。微信平台喜欢给我们留一个，这里我们也留了一个'//XXX/'的返回URL，再加上步骤2中的URL，完整的拼接起来就是'//XXX/?=XXXX&='，你没看错，就是html。这时候，我想你就会明白我的良苦用心了。
第三步，获取到用户的信息，建立关系之后，将上面不起眼的.html通过重定向地址(.(url))返回给web-view，此时它的价值才真正显现出来。重写html，执行
我们揭开.html的神秘面纱，发现它就是这个样子的：
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js">script> HEAD> <BODY> BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- function fan() { wx.miniProgram.navigateBack({ delta: 0, }) } //--> SCRIPT> HTML>
你看到了吗，它真的空空如也？它只是告诉了 web-view 如何出坑（返回上一页）。真的这么简单吗？请在评论区告诉我们。
5. 开始您的交互式应用场景
各位码友们，请留言应用场景
— 欢迎批评指正 —