一、網(wǎng)頁授權(quán)

• 官網(wǎng)鏈接微信開放文檔 (qq.com)
• 用戶在微信客戶端中訪問了第三方網(wǎng)頁，公眾號就要通過微信網(wǎng)頁授權(quán)機(jī)制獲取用戶基本信息如’open_id’，才能實現(xiàn)后續(xù)業(yè)務(wù)邏輯。
• 一般開發(fā)公眾號項目第一步就是網(wǎng)頁授權(quán)，通過授權(quán)獲取openId和access_token來給用戶推送消息或者識別用戶等。
• 需要注意的就是第一步獲取code通過code來獲取openId和access_token。

//獲取code的訪問鏈接
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirec
//需要注意的是參數(shù)的拼接順序一定要和上方的一致，微信會做正則強(qiáng)匹配校驗

參考鏈接 里面的source_key是項目中需要的自己的參數(shù) 后面會自動帶到重定向頁面的后面
https://open.weixin.qq.com/connect/oauth2/authorize?appid=********&redirect_uri=https%3A%2F%2Ftstscreening.u-breath.cn%2Felk-aitmgmt-web%2Findex.html%3Fsource_key%3D*****&response_type=code&scope=snsapi_base&state=123#/pages/index/index_no_add

參數(shù)說明

• appid 公眾號的唯一標(biāo)識
• redirect_uri 授權(quán)后重定向的回調(diào)鏈接地址， 請使用 urlEncode 對鏈接進(jìn)行處理 主要注意點就是記得把放上的項目訪問地址編碼下。如https%3A%2F%2Ftstscreening.u-breath.cn%2Felk-aitmgmt-web%2Findex.html%3Fsource_key%3D*****
• response_type 返回類型，請?zhí)顚?code>code固定寫死即可
• scope應(yīng)用授權(quán)作用域，snsapi_base （不彈出授權(quán)頁面，直接跳轉(zhuǎn)，只能獲取用戶openid），snsapi_userinfo （彈出授權(quán)頁面，可通過openid拿到昵稱、性別、所在地。并且， 即使在未關(guān)注的情況下，只要用戶授權(quán)，也能獲取其信息 ）
• state 重定向后會帶上state參數(shù)，開發(fā)者可以填寫a-zA-Z0-9的參數(shù)值，最多128字節(jié) 不是必須的可填可不填
• #wechat_redirect 無論直接打開還是做頁面302重定向時候，必須帶此參數(shù) 一般都是填寫需要跳轉(zhuǎn)的頁面
• code說明 ： code作為換取access_token的票據(jù)，每次用戶授權(quán)帶上的code將不一樣，code只能使用一次，5分鐘未被使用自動過期。

同意授權(quán)后，頁面會自動跳轉(zhuǎn)到redirect_uri/?code=CODE&state=STATE頁面。
一般拿到code后就能獲取到open_id這時就可以通過open_id來訪問接口獲取數(shù)據(jù)開發(fā)項目，記得把open_id保存下以方便開發(fā)項目，不用每次在通過code再去獲取方便很多。

二、JSSDK使用注意點

• 官網(wǎng)訪問鏈接概述 | 微信開放文檔 (qq.com)
• 微信 JS 接口簽名校驗工具 (qq.com)
• 博主遇到的問題是傳遞給后臺的URL，后臺沒有全部接收到，只接收到部分解析了部分，所以后臺接收到不完整的訪問鏈接加密后傳遞給前端，前端寫入配置也是不完整的一直報錯。所以實際訪問頁面和寫入配置的訪問一直不匹配，導(dǎo)致報config:invalid signature錯誤，后臺修改后返回的路徑正確就好了。

//微信權(quán)限配置
let wxConfig = function(dispatch,jsApiList,wxReady){
    let url = location.href.split('#')[0];   //正確
    console.log('原始鏈接 = ',url);
    console.log('encodeURIComponent = ',encodeURIComponent(url));
    wxAuthorization({
        sourceKey,
        url:encodeURIComponent(url)
    }).then((config) => {
        const auth = config.record;
        wx.config({
            debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
            appId: auth.app_id, // 必填，公眾號的唯一標(biāo)識
            timestamp: auth.timestamp, // 必填，生成簽名的時間戳
            nonceStr: auth.nonce_str, // 必填，生成簽名的隨機(jī)串
            signature: auth.signature, // 必填，簽名，見附錄1
            jsApiList: jsApiList // 必填，需要使用的JS接口列表，這里只說掃描，例如分享等都可以，只要寫在數(shù)組里面就可以調(diào)用
        });
        //權(quán)限驗證出錯
        // config信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗證失敗，
        // 具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名。
        wx.error(function (res) {
            alert(res.errMsg);
        });
        // 通過ready接口處理成功驗證
        // config信息驗證后會執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，
        // config是一個客戶端的異步操作，所以如果需要在頁面加載時就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。
        // 對于用戶觸發(fā)時才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。
        wx.ready(wxReady);
    })
}
export {
    wxConfig
}