用vue開(kāi)發(fā)完靜態(tài)界面后殖蚕，在index.html文件中添加微信授權(quán)操作
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="screen-orientation" content="portrait" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>微信網(wǎng)頁(yè)開(kāi)發(fā)</title>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
// 網(wǎng)頁(yè)授權(quán)之獲取code
const code = getUrlParam("code"),
openId = window.localStorage.getItem("openId");
if (!openId && !code) {
const appid = "xxxxxxxxxxxxxx",
url = encodeURIComponent(location.href.split('#')[0]);
window.location. + appid + '&redirect_uri=' + url +
'&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
}
//獲取url中參數(shù)
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURI(r[2]);
return null;
}
</script>
</head>
然后我就拿著vue的本地運(yùn)行IP地址 http://192.168.10.67:8080/ 粘貼到微信公眾號(hào)開(kāi)發(fā)工具妈候，結(jié)果提示redirect_uri參數(shù)錯(cuò)誤贮懈。
看微信文檔，得知這個(gè)redirect_uri是微信授權(quán)成功之后弄喘，需要跳轉(zhuǎn)的頁(yè)面路徑地址，且需要在后臺(tái)配置。配置方法是
1逛艰、在微信公眾號(hào)請(qǐng)求用戶網(wǎng)頁(yè)授權(quán)之前，開(kāi)發(fā)者需要先到公眾平臺(tái)官網(wǎng)中的“開(kāi)發(fā) - 接口權(quán)限 - 網(wǎng)頁(yè)服務(wù) - 網(wǎng)頁(yè)帳號(hào) - 網(wǎng)頁(yè)授權(quán)獲取用戶基本信息”的配置選項(xiàng)中搞旭，修改授權(quán)回調(diào)域名散怖。請(qǐng)注意菇绵，這里填寫(xiě)的是域名（是一個(gè)字符串），而不是URL镇眷，因此請(qǐng)勿加 http:// 等協(xié)議頭咬最；
2、授權(quán)回調(diào)域名配置規(guī)范為全域名欠动，比如需要網(wǎng)頁(yè)授權(quán)的域名為：www.qq.com永乌，配置以后此域名下面的頁(yè)面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以進(jìn)行OAuth2.0鑒權(quán)具伍。但http://pay.qq.com 翅雏、 http://music.qq.com 、 http://qq.com無(wú)法進(jìn)行OAuth2.0鑒權(quán)
注意：是這個(gè)地方配置：
配置的時(shí)候有3個(gè)點(diǎn)需要注意：
1人芽、必須使用域名望几，這個(gè)時(shí)候就需要使用工具將內(nèi)網(wǎng)地址映射到公網(wǎng)了，我使用的是花生殼萤厅；
2橄抹、配置的時(shí)候需要將一個(gè)txt文件放置到vue的根目錄，這里我放到了前端項(xiàng)目的public目錄惕味，配置完成后楼誓，就可以授權(quán)成功了；
3赦拘、訂閱號(hào)是沒(méi)有“網(wǎng)頁(yè)授權(quán)獲取用戶基本信息”這個(gè)權(quán)限的慌随，需要認(rèn)證為服務(wù)號(hào)才有，所以剛開(kāi)始用自己的號(hào)測(cè)試躺同，走了很多彎路阁猜，以為“開(kāi)發(fā)-基本配置-服務(wù)器配置”中的url是redirect_uri，其實(shí)不是蹋艺。
開(kāi)發(fā)-基本配置-服務(wù)器配置是配置服務(wù)器接口地址的
這里配置token剃袍，保存的時(shí)候微信會(huì)發(fā)一個(gè)get請(qǐng)求到剛填的URL中，驗(yàn)證通過(guò)后才能保存成功的捎谨。
