@toc
前話
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.weixin.qq.com/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微信開放框架https://github.com/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.wx.qq.com/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, " "));
}
//獲取openId
function 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.weixin.qq.com/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頁面)的域名需要設置一下
![image.png]()
- 設置IP白名單(獲取openId頁面服務器公網IP)
![image.png]()
小程序
- 正式環境需要https域名(ssl證書可以在華爲雲申請到免費的，測試環境可以用http)
- 後臺關聯設置，關聯公衆號
