1、微信公众平台官方文档

为了识别用户，每个用户针对每个公众号会产生一个安全的OpenID，如果需要在多公众号、移动应用之间做用户共通，则需前往微信开放平台，将这些公众号和应用绑定到一个开放平台账号下，绑定后，一个用户虽然对多个公众号和应用有多个不同的在这里插入代码片OpenID，但他对所有这些同一开放平台账号下的公众号和应用，只有一个UnionID，可以在用户管理-获取用户基本信息（UnionID机制）文档了解详情。

如果你已是按照微信官方文档实现，恭喜你，不用再往下看了，我们不折腾。

上面描述得非常清楚，每个微信用户进入公众号和小程序都会分别产生不同的OpenID，如想获得用户唯一标识UnionID，则必须同时绑定到同一个开放平台账号下

本文就是为差300元去开放平台认证的码友

2、准备工作

必须得别拥微信小程序和公众号的AppID和AppSecret
具备简单的微信小程序和后端开发能力

3、应用场景说明

当你拥有一个创意点子，半柱香的时间开发了一个逆天微信小程序。
但痛苦的事也随之而来，小程序是用完即走，根本沉淀不了用户，这时就该公众号登场了，公众号与小程序相辅相成在于,公众号能为小程序留存粉丝并与粉丝互动,引导粉丝进入小程序,实现公众号的变现。同时,小程序配合公众号,也能大大的提升用户黏性,增加复购。

这里给各位看官介绍一种轻松实现两个OpenID建立关联的方法，用户只需进入一次小程序即可建立关联，接着往下看

4、实现步骤

上硬菜了

a、获取微信小程序openId (用户唯一标识)

获取用户code：

 wx.login({success: res => {// res.code 得到微信小程序用户一次性codewx.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}})}})

注：以上代码为一个非常不规范的示例，仅为了演示实现思路和步骤。（你在开发时，请千万不要直接在小程序中留下你的 appid和secret，必须通过后端服务器中转）

b、借助web-view获取到用户公众号的OpenID

在前一步骤中获取到了wxOpenID，这时先不着急让用户进入小程序主页面。可再通过一个后端服务查询当前wxOpenID是否与gzhOpendID建立关联，如果没有则，可以将用户跳转到你准备好的web-view页面这个坑里，逻辑代码如下：

// 检查是否已建立 wxOpenID与gzhOpendID关系

    wx.request({url: 'http://XXXX',    //后台URL 略success(res) {if(!res.data.exist){//如果不存在则直接跳走wx.navigateTo({url: '/pages/home/webview?wxid=wxOpenid'})                 }}});

// 空壳啥也没干的 web-view “/pages/home/webview”

wxml：

<web-view id="viewopen" src="{{src}}" bindload="onbindLoad">
</web-view>

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、在redirect_ur后端API服务中获取gzhOpenID

以上URL为获取公众号用户的Code，获取成功后会跳转到你指定的返回URL中，这时你就可以在你的“https//XXX/api_XXX”中拿到用户的code，因为已将用户的wxOpenID做为参数传递到了你的后台API页面，这时只需要通过刚拿到的公众号code换取用户的gzhOpendID即可，最后就是提醒你，直接将得来不易的两个关系保存到你的数据表中，以供下次使用。

获取公众号的OpenID接口URL：string.Format(“https://api.weixin.qq.com/sns/oauth2/access_token?appid={0}&secret={1}&code={2}&grant_type=authorization_code”, gzh_appid, gzh_secret, code)

4、进坑容易出坑也 so easy

这一步很关键，用户掉进坑不出来，那么你这小程序也算白折腾了。
在第二步 B 中留的后端URL如果只干了，获取gzhOpenID也太对不起它超高的颜值了。微信平台都喜欢给我们留一个redirect_url, 这里我们也给 ‘https//XXX/api_XXX’ 留一个返回URL，加上第二步的URL则拼接完整后’https//XXX/api_XXX?wxopenid=XXXX&returnurl=https://XXX/newurl.html’，你没看错，就是html。这时估计就明白我的用心良苦了。

在第三步获取到用户的gzhOpendID，建立关系后，通过重定向地址（Response.Redirect(url)），将以上不起眼的newurl.html返回给web-view，这时才总算发辉它的价值了，转载html并执行

我们打开newurl.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怎么掉坑的就怎么出坑（返回一上页），是不是真 so easy 请在评论区你说了算

5、开启你的互动应用场景

各位码友们应用场景交给你们的留言

— 欢迎拍砖 —

另劈捷径实现微信小程序与公众号的OpenID建立关联相关推荐

服务器和微信公众号的区别,微信小程序和公众号的区别，看这三点就懂了
原标题:微信小程序和公众号的区别,看这三点就懂了第一点就是定位不同,小程序主要用来面向产品和服务,而公众号则是用于销售和传递信息.小程序在功能上和公众号有本质的区别(不支持关注,没有粉丝体系.消息推 ...
微信小程序与公众号区别PHP,微信小程序和微信公众号的区别是什么？
微信小程序和微信公众号的区别是什么? 2019-08-17 09:10 微信公众号和小程序都是基于微信平台来使用的,而微信自带的十几亿流量也是导流到小程序和公众号上的.越来越多的商家都在运营微信小程序 ...
PHP开发B2C商城微信小程序商城系统源码+数据库，轻量级前后端分离的电商系统，支持微信小程序 + H5+ 公众号 + APP
项目介绍一款轻量级.高性能.前后端分离的电商系统,支持微信小程序 + H5+ 公众号 + APP,前后端源码完全开源,看见及所得,完美支持二次开发,可学习可商用,让您快速搭建个性化独立商城. 完整代 ...
微信小程序关注公众号模板显示隐藏问题
微信小程序关注公众号模板显示隐藏问题最近做了一个微信小程序内跳转关注公众号的需求,本来按照API的写法是可以直接搞定的.但是产品需求是要点击按钮之后,再弹出关注公众号组件,然后点击关闭按钮之后要关掉 ...
微信小程序web-view公众号与小程序支付的切换使用
微信小程序web-view公众号与小程序支付间的切换使用最近小程序开放了新功能,支持内嵌网页.html写的网页,官网,网站,运行在浏览器上的,有域名的那种,可以内嵌到小程序里了! 那么这意味着什么呢 ...
微信小程序与公众号卡券/会员打通
微信小程序与公众号卡券/会员打通卡券开发:带你走出小程序的坑 tips:由于笔者也是一位前端菜鸟,所以尽量用简单直白的语言为大家讲解,如有说的不到位的地方,还望多多指教 - 作为小程序的研发人员已经 ...
一图了解App跳转微信小程序关注公众号，推送消息
一图了解App跳转微信小程序关注公众号,推送消息:
移动端App分享，以及微信小程序和公众号分享功能实现
移动端App分享,以及微信小程序和公众号分享功能实现分享功能记录收藏,上链接前端工作记录
开源免费微信小程序、公众号打通商城
开源免费微信小程序.公众号打通商城源码地址 : http://github.crmeb.net/u/blue 新的UI 功能简介源码地址 : http://github.crmeb.net/u/b ...

另劈捷径实现微信小程序与公众号的OpenID建立关联

实现多个小程序和公众号的用户关联