微信授權的方法是,在項目里面配置攔截器(此處可以參考各個框架的攔截器)沒有攔截器也可以,反正意思就是跳轉到項目里的時候判斷微信環境
如果是微信環境,
判斷微信環境的方法是
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
// 微信環境
}
此時處於沒有登陸的狀態或者需要微信授權的狀態跳轉微信授權鏈接
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
// 微信環境
var redirect_uri = window.location.protocol + '//' + window.location.host + '/';
var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + WECHAT_APP_ID + "&redirect_uri=" + encodeURIComponent(redirect_uri, "UTF-8") + "&response_type=code&scope=snsapi_base&state=10#wechat_redirect"
window.location.href = url;
}
appid 是自己微信公眾號的appid,redirect_uri是授權跳轉的url,這個域名也要在微信公眾號的后台配置授權安全域名,
比如redirect_uri是 http://www.eeeee.com/#/home,授權回來的url微信會帶code,此處code是授權成功給的唯一識別碼(用戶后台查詢用戶openid)
此時URL是 http://www.eeeee.com/?code=3333333333#/home,因為前端框架的原因,之后頁面跳轉url只會改變#號后面的值,此處藏了很多坑,比如不能后面又加了code的參數,就會混淆,如http://www.eeeee.com/?code=3333333333#/home?code=44,微信分享也會遇到一些坑
我的一個解決方案是:
授權回來之后,無刷新改變url
var _url = window.location.protocol + '//' + window.location.host + '/#/home;
window.history.pushState({},0, _url)
這樣url又變回授權前的樣子(要在用過code之后)
目前感覺還是很好用的