1.準(zhǔn)備工作
第一步:
通過(guò)該地址 https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index
獲取到微信公眾號(hào)測(cè)試號(hào)AppID與appsecret （測(cè)試公眾號(hào)可以測(cè)試使用，個(gè)人公眾號(hào)不允許使用。微信認(rèn)證服務(wù)號(hào)可以使用，微信認(rèn)證訂閱號(hào)不可以使用）。
接口權(quán)限查看鏈接:
https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Explanation_of_interface_privileges.html
測(cè)試公眾號(hào)在生成測(cè)試公眾號(hào)界面中按照提示微信關(guān)注即可。非測(cè)試不僅需要關(guān)注，還需要將微信公眾平臺(tái)中還需要將開(kāi)發(fā)人員給設(shè)置一下才可以使用web-view。
同時(shí)需要修改一下網(wǎng)頁(yè)授權(quán)接口
因?yàn)槭菧y(cè)試，就修改成本地IPv4地址加你后端的端口號(hào)即可。注意不允許127.0.0.1。
以上是我的。正式環(huán)境下需要使用到域名，測(cè)試環(huán)境可以不需要。
第二步:
還需要弄一個(gè)微信小程序的測(cè)試號(hào)。拿到其中的AppID與appsecrt。注意:小程序的跟微信公眾號(hào)的AppID不是同一個(gè)。
第三步:
我這邊后端使用的是WeiXin-JAVA開(kāi)發(fā)包。具體可以通過(guò)鏈接訪問(wèn)
https://github.com/Wechat-Group/WxJava
也可以自己根據(jù)自己能力自行實(shí)現(xiàn)。
2.應(yīng)用場(chǎng)景說(shuō)明
其他應(yīng)用場(chǎng)景不清楚，根據(jù)我個(gè)人實(shí)際情況(不使用unionID情況下可以使用當(dāng)前方法)
3.實(shí)現(xiàn)步驟
第一步: 下載微信開(kāi)發(fā)工具
第二步: 使用微信小程序的AppId創(chuàng)建一個(gè)微信小程序項(xiàng)目，然后官方提供的簡(jiǎn)單入門(mén)Demo，你可以使用也可以不使用。很簡(jiǎn)單的程序，一下就寫(xiě)好了，可以不用官方的。
第三步: 編寫(xiě)一個(gè)按鈕，通過(guò)點(diǎn)擊按鈕實(shí)現(xiàn)去獲取微信公眾號(hào)OpenID
// index.wxml
<button bindtap="getGzhOpenId">獲取公眾號(hào)OpenId</button>
一個(gè)按鈕一個(gè)點(diǎn)擊事件。
點(diǎn)擊事件中代碼如下:
// index.js
getGzhOpenId(){
wx.navigateTo({
url: '/pages/test/test',
})
}
寫(xiě)過(guò)小程序的都知道，這就是一個(gè)頁(yè)面跳轉(zhuǎn)。但是這個(gè)跳轉(zhuǎn)的不是正常頁(yè)面，而是一個(gè)帶有web-view的界面。
// test.wxml
<web-view src="{{src}}">
</web-view>
整個(gè)頁(yè)面就兩行代碼，這等于是一個(gè)中轉(zhuǎn)站，不需要被用戶看到。src是可打開(kāi)關(guān)聯(lián)的公眾號(hào)的文章，其它網(wǎng)頁(yè)需登錄小程序管理后臺(tái)配置業(yè)務(wù)域名。
// test.js
onLoad(){
let redirect_url = 'http://測(cè)試公眾號(hào)網(wǎng)頁(yè)授權(quán)的地址/后臺(tái)接口地址/appid';
this.data.src = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=測(cè)試號(hào)AppID&redirect_uri=' + escape(redirect_url) + '&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect';
this.setData({
src: this.data.src
})
}
以上是重點(diǎn)。重新梳理一下:
小程序加載進(jìn)入index.wxml -> 點(diǎn)擊按鈕跳轉(zhuǎn)到test.wxml -> 來(lái)到test.wxml會(huì)執(zhí)行js中的渲染方法也就是onLoad(){} 渲染中我們就可以開(kāi)始獲取公眾號(hào)OpenID了。
redirect_url: 回調(diào)地址
this.data.src: 也就是給web-view中的src賦值一個(gè)地址，web-view會(huì)去打開(kāi)這個(gè)地址。打開(kāi)后就會(huì)獲取到code然后回調(diào)redirect_url地址并且攜帶微信公眾號(hào)code(該code非小程序wx.login()的code)。
地址中參數(shù)可以參考官方文檔:
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
需要特別注意的就是 scope 參數(shù)。他有兩個(gè)值 一個(gè)是snsapi_base。另一個(gè)是 snsapi_userinfo。前者是獲取openId。后者是獲取OpenId以及用戶信息，并且不需要關(guān)注公眾號(hào)也可以獲取到。WeiXin-Java-Demo中接口是獲取userInfo，所以需要將scope更換一下，否則會(huì)報(bào)錯(cuò)。 如果只需要獲取OpenId?？匆韵率纠?/p>
@RequestMapping({"/getOpenId"})
public String getOpenId(@PathVariable String appid, @RequestParam String code, ModelMap map) {
if (!this.wxService.switchover(appid)) {
throw new IllegalArgumentException(String.format("未找到對(duì)應(yīng)appid=[%s]的配置，請(qǐng)核實(shí)！", appid));
} else {
try {
WxOAuth2AccessToken accessToken = this.wxService.getOAuth2Service().getAccessToken(code);
map.addAttribute("openId",accessToken.getOpenId());
} catch (WxErrorException var6) {
var6.printStackTrace();
}
return "xxx";
}
}
其實(shí)就是weixin工具包封裝了其方法，Demo中沒(méi)有使用而已，copy接口，粘貼修改一下即可。
到此就拿到了OpenId了，可以Debug調(diào)試，但是奇怪，我的小程序?yàn)樯哆€是白屏中啊。哈哈哈因?yàn)閣eb-view界面就我得理解就是html中的ifrname嵌入式頁(yè)面。
接下來(lái)也是重點(diǎn)
看后臺(tái)接口上圖，返回的是xxx。xxx代表一個(gè)頁(yè)面，也就是xxx.html界面。我們需要通過(guò)springmvc將視圖返回給小程序，小程序的web-view打開(kāi)的就是你在后臺(tái)寫(xiě)的界面。
那么 xxx.html中寫(xiě)什么呢？ 繼續(xù)往下看
xxx.html在小程序中被打開(kāi)，然后你要展示東西嗎？No!No!No! 不需要，不過(guò)如果你剛需我就不說(shuō)啥了。
// xxx.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="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
</HEAD>
<BODY>
</BODY>
<SCRIPT LANGUAGE="JavaScript">
function back()
{
wx.miniProgram.redirectTo({url: "/pages/index/index?mpOpenid=${openId}"})
//wx.miniProgram.postMessage({data:"${openId}"})
}
back();
</SCRIPT>
</HTML>
將xxx.html返回給小程序后加載該視圖，視圖執(zhí)行back()方法。使用小程序中redirectTo返回到你想去的界面。該界面必須小程序中存在哦！然后一定一定要引入jweixin。否則無(wú)法在網(wǎng)頁(yè)中使用小程序的方法。返回呢可以將微信公眾號(hào)的openId帶在url上返回到小程序的index界面。
onLoad(e){
console.log(e);
}
就可以獲取到OpenID了，通過(guò)以上方式拿到后就可以與wx.login獲取到的小程序OpenID進(jìn)行對(duì)應(yīng)起來(lái)。
以上方法呢還可以拓展很多種情況。例如小程序首次加載先看10s的注意公告。也可以在打開(kāi)web-view頁(yè)面攜帶上小程序OpenId，一口氣在后端拿到公眾號(hào)OpenID后持久化存儲(chǔ)。就不需要再返回了。
結(jié)語(yǔ)
本人第一次編寫(xiě)CSDN，也是第一次使用markdown寫(xiě)，寫(xiě)得少，也沒(méi)美化的眼光。重點(diǎn)還是解決了一個(gè)工作中的問(wèn)題。以此作為記錄，以防下次面試官問(wèn)我項(xiàng)目中碰到的問(wèn)題(解決了那還叫碰到的問(wèn)題嗎?)。同時(shí)該文章也希望大家遇到困難能夠用得上，不懂可以在評(píng)論區(qū)中交流或者私信。因?yàn)榈谝淮?，所以也是自己查百度然后慢慢摸索折騰明白的。也看了其他類(lèi)似的文章。從他們文章中找到的靈感并且，我也附帶在下面，可以同時(shí)看，這樣就會(huì)更快速的明白。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-475952.html
https://blog.csdn.net/qq_41929578/article/details/121748935
https://blog.csdn.net/daengwei/article/details/124535274
https://blog.csdn.net/qq_21492635/article/details/119491131文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-475952.html
到了這里，關(guān)于微信小程序通過(guò)web-view網(wǎng)頁(yè)授權(quán)獲取用戶公眾號(hào)OpenID的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
