企業(yè)微信掃碼登錄有兩種方式廊营，一種是構(gòu)建獨立窗口的二維碼歪泳，第二種是構(gòu)建內(nèi)嵌二維碼。我的項目中選第二種
二維碼構(gòu)造流程請查閱官方文檔
步驟一：引入JS文件
構(gòu)建內(nèi)嵌二維碼第一步就是引入官方的js 文件露筒，在需要展示企業(yè)微信網(wǎng)頁登錄二維碼的網(wǎng)站引入如下JS文件呐伞，（支持https）：js地址，建議下載下來在本地使用慎式，我自己的項目使用的是vue-cli 3.xx 的伶氢，下載下來的js 放到項目目錄public下，然后在入口也引入
configureWebpack: {
externals: {
'wxLogin': 'WwLogin'
},
resolve: {
alias: {
'@': resolve('src')
}
}
}
這樣就可以全局訪問WxLogin這個方法了掌眠。當(dāng)然也可以直接在你需要的內(nèi)嵌二維碼的地方引入模塊 import WwLogin from your_path蕾盯。
步驟二：引入JS文件
在需要使用微信登錄的地方實例JS對象：
WwLogin({
"id" : "二維碼容器的id",
"appid" : "",
"agentid" : "",
"redirect_uri" :"",
"state" : "",
"href" : "",
});
參數(shù)說明請請查閱官方文檔。困惑我最多的是這個 redirect_uri蓝丙，這個是授權(quán)回調(diào)地址级遭，他的作用就是當(dāng)你完成掃碼之后，微信官方會將掃碼結(jié)果返回的數(shù)據(jù)作為參數(shù)拼接到redirect_uri渺尘，并會自動跳轉(zhuǎn)redirect_uri 所指向的路由挫鸽。根據(jù)官網(wǎng)說明，redirect_uri 需要 使用 encodeURIComponent 編碼一下鸥跟。我的項目redirect_uri 指向當(dāng)前頁丢郊，因此這個參數(shù) 就應(yīng)該是redirect_uri: encodeURIComponent(window.location.href)。在vue項目中，我們就可以通過 watch 去監(jiān)聽路由變化枫匾，然后獲取路由中的 code參數(shù)（這個參數(shù)是后臺用來獲取企業(yè)微信用戶信息的必要參數(shù)）迅诬，
$route: {
handler: function(route) {
const query = route.query;
if (query) {
this.redirect = query.redirect;
this.otherQuery = this.getOtherQuery(query);
if (this.otherQuery.code) {
this.userWxLogin(this.otherQuery.code)
.then(res => {
this.loginSuccess();
this.loginFailed = false;
})
.catch(err => {
this.loginFailed = true;
});
//成功后刪除不必要的參數(shù)（state,code,appid 在其他頁面并不需要），保證路由是干凈的
delete this.otherQuery.code;
delete this.otherQuery.state;
delete this.otherQuery.appid;
}
}
},
immediate: true
}
整個登錄流程就結(jié)束了婿牍。
當(dāng)然了還有一個參數(shù)是href侈贷，是用來定義 二維碼樣式的.
.impowerBox .qrcode {width: 200px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 200px;}
.status_icon {display: none !important}
.impowerBox .status {text-align: center;}
你可以專門做一個這個樣式文件，然后放到支持https協(xié)議的資源地址的服務(wù)器上等脂∏温或者轉(zhuǎn)成 base64 在線base64編碼，之后將編碼后的字符串傳遞給href 參數(shù)href:data:text/css;base64,編碼后的字符串
我們并不需要自己去判斷二維碼是否過期搏屑，微信自動會給你做判斷，如果過期二維碼區(qū)域會自動增加刷新按鈕粉楚，點擊就刷新二維碼了辣恋。要注意的是，先要在企業(yè)微信開通授權(quán)回調(diào)域名模软，這個域名應(yīng)該跟 redirect_uri 參數(shù)所在的域名一直伟骨，否則二維碼會獲取失敗。
加入 WwLogin 這個函數(shù)的參數(shù)不對燃异，也會在插入二維碼的區(qū)域中做提示携狭。如果參數(shù)全對，就會生成如下二維碼：
實際上回俐，不管是構(gòu)造獨立二維碼 還是 構(gòu)造內(nèi)嵌二維碼 原理是一樣的逛腿，內(nèi)嵌二維碼 實際上就是在指定容器中加載了一個 iframe。另外仅颇，一直好奇的是单默，為什么掃碼成功之后，在手機上點擊確認(rèn)登錄頁面就會自動跳轉(zhuǎn)到 redirect_uri 指定的路由呢忘瓦，當(dāng)我打開控制臺就發(fā)現(xiàn)搁廓，其實 引入的js文件中，會有一個 jsonp的輪詢政冻，以此來判斷二維碼的各個階段的狀態(tài)枚抵。然后再成功的狀態(tài)下給你跳轉(zhuǎn)到指定路由线欲。
由于配置回調(diào)域名不能是本地域名明场，所以在本地開發(fā)的時候做一個內(nèi)網(wǎng)穿透，可以使用natapp這個軟件李丰，免費的就行苦锨，傳送門
結(jié)束
整個過程就是這樣，沒有什么坑。
