1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 公众号和小程序用户互通 无需unionid解决方案

公众号和小程序用户互通 无需unionid解决方案

时间:2021-05-16 18:34:47

相关推荐

公众号和小程序用户互通 无需unionid解决方案

目录

前话

前提条件

技术思路

解决方案步骤

1.新建一个web-view页面(小程序端)

2.用accessToken获取openId(公众号后端)

3.获取openId的页面(公众号后端)

4.小程序中获取跳转参数中openId(小程序端)

需要注意的点

公众号

小程序

前话

Hi~o( ̄▽ ̄)ブ, 我偷偷回来了,你还在吗?

最近在搞公众号和小程序的开发,需要进行公众号和小程序的用户互通。网上搜、问人,都说需要公众平台绑定公众号和小程序,拿到unionId才能互通,但根据我自己的实践(瞎搞),发现无需unionId就能实现互通。

代码语言/框架: 小程序用的uniapp,后端java(Wxjava公众号框架)

前提条件

公众号和小程序相互绑定(两个端的后台需要做对应的绑定操作)

技术思路

1.使用小程序web-view组件拉起公众号授权页面进行授权(静默授权,无需用户同意)

2.授权页跳转获取openId的页面(公众号后端页面,自己写的),获取到后作为url参数跳回小程序

3.跳回来小程序,可以从参数中获到该用户公众号openId了

4.小程序中通过授权接,获取该用户小程序的openId

5.都获取到了,你可以传回后端,进行绑定操作,用其中一个openId作为唯一key或者自定义唯一key都可以

解决方案步骤

1.新建一个web-view页面(小程序端)

使用web-view组件跳转公众号授权页面(所以需要相互绑定,否则无法打开)

<template><web-view src="https://open./connect/oauth2/authorize?appid=xxxxx&redirect_uri=https://你的公众号后端域名/获取openid的页面&response_type=code&scope=snsapi_base&state=123#wechat_redirect"></web-view></template>

2.用accessToken获取openId(公众号后端)

这里用的WxJava微信开放框架/Wechat-Group/WxJava

通过获取openid的页面传回来code,获取accessToken。 用accessToken获取openId

@RequestMapping("/getOpenId")public String getOpenId(@PathVariable String appid, @RequestParam String code, ModelMap map) {String openId= "";try {WxOAuth2AccessToken accessToken = wxService.getOAuth2Service().getAccessToken(code);openId = accessToken.getOpenId();log.info("小程序网页授权公众号,获取openId:{}", openId);} catch (WxErrorException e) {e.printStackTrace();}return openId;}

3.获取openId的页面(公众号后端)

这里单纯用了html和js,引入weixin的js,用于跳回小程序

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body></body></html><script type="text/javascript" src="https://res./open/js/jweixin-1.3.2.js"></script><script>//获取url上的参数function getParameterByName(name, url) {if(!url) url = window.location.href;name = name.replace(/[\[\]]/g, "\\$&");//匹配所有符合条件的,并取最后一个var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)",'g');var results = url.match(regex);var tempResults= results!=null && results[results.length-1]!=undefined?results[results.length-1]:'';var finalResults=regex.exec(tempResults);if(!finalResults) return "";if(!finalResults[2]) return '';return decodeURIComponent(finalResults[2].replace(/\+/g, " "));}//获取openIdfunction getOpenId(){var code = getParameterByName("code")console.log("wx public code{}",code)var httpRequest =new XMLHttpRequest();var url = "https://你的公众号后端域名/wx/redirect/你的公众号appid/getOpenId?code="+code;httpRequest.open('GET',url,true);name=test&nameone=testone"httpRequest.send();var res;httpRequest.onreadystatechange =function () {if (httpRequest.readyState == 4 && httpRequest.status == 200) {var openId = httpRequest.responseText;if(openId){console.log("openId{}",openId)//跳回小程序首页,把公众号的openId带过去wx.miniProgram.redirectTo({url: "/pages/index/index?mpOpenid="+openId})}else {/**公众号授权方法*/var uri = window.location.href;window.location.href = "https://open./connect/oauth2/authorize?appid=你的公众号appid&redirect_uri="+获取openId的后端页面+"&response_type=code&scope=snsapi_base&state=123#wechat_redirect";}}};}getOpenId();</script>

4.小程序中获取跳转参数中openId(小程序端)

首页加载时获取openId

onLoad(e) {if (e.mpOpenid) {uni.setStorageSync('mpOpenid', e.mpOpenid)//下面就是自己的小程序获取openid和传到后端存储了}}

需要注意的点

公众号

后台小程序管理,关联小程序

网页授权跳转页(获取openId页面)的域名需要设置一下设置IP白名单(获取openId页面服务器公网IP)

小程序

正式环境需要https域名(ssl证书可以在华为云申请到免费的,测试环境可以用http)后台关联设置,关联公众号

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。