先把微信官方文檔放在這，如果有需要，可直接進(jìn)入微信公眾號(hào)開(kāi)發(fā)文檔。

很多時(shí)候，我們陷入了一種誤區(qū)，覺(jué)得 uni-App 不是挺能干的么，各種平臺(tái)的內(nèi)置功能，都幫你在框架內(nèi)部封裝好了，開(kāi)發(fā)人員只需要找到對(duì)應(yīng)的 API 去調(diào)用就是了。

是的，確實(shí)是這樣，我們開(kāi)發(fā)微信小程序的時(shí)候，會(huì)發(fā)現(xiàn)那什么登錄授權(quán)、分享、支付等功能，簡(jiǎn)直就是信手拈來(lái)，用起來(lái)如春風(fēng)拂面般令人舒暢啊。

可是，有一天公司領(lǐng)導(dǎo)說(shuō)，這框架既然什么都能搞，干脆把公眾號(hào)也打個(gè)包上線吧。

這個(gè)時(shí)候，你屁顛屁顛的跑去適配，會(huì)發(fā)現(xiàn)上述的那些基礎(chǔ)功能，框架根本就沒(méi)有提供?。。?！然后，你又跑去官方搜索，根本就找不到手把手教大家去適配的文檔，而且問(wèn)答區(qū)很多也只是順手帶過(guò)而已，這對(duì)于新手小白來(lái)說(shuō)，確實(shí)會(huì)感到很無(wú)助，甚至抓狂，心想：不是說(shuō)好了都已經(jīng)封裝好的么，騙我！

其實(shí)，并不是官方不封裝，只是有些功能是需要自行特殊處理的，官方以為是常識(shí)的東西，所以沒(méi)有過(guò)多的介紹，可在小白眼里，就是一條鴻溝啊。

好了，廢話有點(diǎn)多，不過(guò)也是為了更好的服務(wù)后續(xù)的正題，接下來(lái)我們就看看大家比較關(guān)心的在 uni-App 中，到底如何進(jìn)行公眾號(hào)的登錄授權(quán)，分享以及支付。

公眾號(hào)授權(quán)

看了官方的文檔，我們都知道，公眾號(hào)授權(quán)有兩種方式，一種是靜默授權(quán)，用戶無(wú)感知，但無(wú)法獲取用戶的基礎(chǔ)信息，如果要想拉取到用戶信息，則需要使用另一種授權(quán)方式，由于這種方式涉及到隱私，所以需要用戶同意才行。

如果我們熟悉了其他方式的開(kāi)發(fā)，或許就知道該怎么做，但這個(gè)時(shí)候，我們的思維被局限在 uni-App 當(dāng)中，總以為框架會(huì)給我們提供對(duì)應(yīng)的方式，可遺憾的是根本就沒(méi)有，在這套框架里，我們依然需要使用傳統(tǒng)的方式去處理，即：

let appid = 'xxx';
let uri = encodeURIComponent(window.location.href); // 這里務(wù)必編碼
let scope = 'snsapi_userinfo'; // 獲取用戶信息
// let scope = 'snsapi_base'; // 靜默授權(quán)，僅可獲取openid
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=${scope}&state=123#wechat_redirect`;

地址回調(diào)會(huì)帶回來(lái)一個(gè) code，通過(guò)這個(gè) code 去獲取用戶的信息和 openid，具體可參見(jiàn)官方文檔。

或許有很多人還是不知道要怎么操作，特別是在 uni-App 中，到底應(yīng)該怎么走這套流程呢？

莫慌，既然是手把手，那么這里，還是必須要啰嗦一下，給一個(gè)小小的處理方案，供大家參考：

// 在App.vue中的啟動(dòng)方法中，去開(kāi)啟授權(quán)
onLaunch: function() {
    console.log('App Launch');
    util.wxAuthorize();
}

// util.js
// 微信公眾號(hào)授權(quán)
wxAuthorize() {
    let link = window.location.href;
    let params = this._getUrlParams(link);  // 地址解析

       // 已經(jīng)授權(quán)登錄過(guò)的就不用再授權(quán)了
    if (store.state.token) return;

    // 如果拿到code，調(diào)用授權(quán)接口，沒(méi)有拿到就跳轉(zhuǎn)微信授權(quán)鏈接獲取
    if (params.code) {
        api.wxAuth(params.code); // 調(diào)用后臺(tái)接口，授權(quán)
    } else {
        let appid = 'xxx';
        let uri = encodeURIComponent(link);
        let authURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
        window.location.href = authURL;
    }
}

這是在程序進(jìn)入的時(shí)候，就授權(quán)的情況，如果場(chǎng)景不同，自行變換即可。

JSSDK配置

關(guān)于 JSSDK 是干嘛的，就不詳細(xì)解釋了，不了解的，就去看官方文檔吧。

JSSDK 的使用方式，這是社區(qū)問(wèn)答里面提供的方案，很簡(jiǎn)單，使用 npm 來(lái)安裝 JSSDK ，然后就能在項(xiàng)目中使用了。

但是，具體怎么使用呢？

如果不提供細(xì)節(jié)的話，對(duì)于開(kāi)發(fā)公眾號(hào)的新手來(lái)說(shuō)，還是挺難受的，所以這里無(wú)論如何，也得給出一個(gè)詳細(xì)的使用方案，當(dāng)然如果是老油條的話，那么可以跳過(guò)了。

// 安裝
npm install jweixin-module --save  

注意，根據(jù)官方的規(guī)則，所有需要使用 JSSDK 的頁(yè)面必須先注入配置信息，即每一個(gè)頁(yè)面，如果想要使用 JSSDK 中的能力的話，都需要對(duì)該頁(yè)面進(jìn)行權(quán)限簽名，獲取對(duì)應(yīng)的配置數(shù)據(jù)，該步驟由后臺(tái)處理即可。

// jwx.js
let jweixin = require('jweixin-module')  

async function configWeiXin(callback) {
    let [errConfig, resConfig] = await api.wxConfig(window.location.href);
    if (resConfig) {
        let apiList = [ // 可能需要用到的能力
            'onMenuShareAppMessage',
            'onMenuShareTimeline',
            'hideOptionMenu',
            'showOptionMenu',
            'chooseWXPay'
        ];

        let info = {
            debug: true, // 調(diào)試，發(fā)布的時(shí)候改為false
            appId: 'appid',
            nonceStr: resConfig.noncestr,
            timestamp: resConfig.timestamp,
            signature: resConfig.sign,
            jsApiList: apiList
        };
        jweixin.config(info);
        jweixin.error(err => {
            console.log('config fail:', err);
        });

        jweixin.ready(res => {
            if (callback) callback(jweixin); // 配置成功
        });
    }
}

注意，uni-App 中是沒(méi)有路由鉤子的，所以如果每個(gè)頁(yè)面都要配置的話，該怎么辦呢？

一種方法，就是在每個(gè)頁(yè)面里面都去調(diào)用一下唄?。?！

但是，如果你是一個(gè)有強(qiáng)迫癥的童鞋，或許一定不能忍受這樣騷氣的操作吧?。?！

這里，我提供一種方案，僅供參考?？梢允褂?Vue 的全局 mixin ，對(duì)每個(gè)頁(yè)面的方法 onShow 進(jìn)行處理，因?yàn)檫@個(gè)生命周期的方法，在頁(yè)面的使用過(guò)程中，基本上很少用到，如果有頁(yè)面用到的話，那么則需要在對(duì)應(yīng)的頁(yè)面重新做相應(yīng)的處理。

Vue.mixin({
  onShow() {
    jwx.configWeiXin(jweixin => {
      jweixin.hideOptionMenu();
    });
  }
});

或許不是最好的，但可能是一個(gè)比較合適的解決方案，如果大家有更好的處理方式，歡迎留言，大家一起學(xué)習(xí)。

完成了這一步，后面的操作，基本上也就如魚得水了。

公眾號(hào)分享

在需要分享的頁(yè)面中，單獨(dú)處理。

onShow() {
  jwx.configWeiXin(jweixin => {
    jweixin.showOptionMenu();
    let params = {xxx};
    let shareParams = jwx.getShareInfo(params);
    jweixin.onMenuShareAppMessage(shareParams);
    jweixin.onMenuShareTimeline(shareParams);
  });
}

當(dāng)然，并不一定要在 onShow 中處理，也可以在頁(yè)面獲取到具體數(shù)據(jù)后再配置，不同的場(chǎng)景，有不一樣的需求，自行把控即可。

公眾號(hào)支付

代碼很簡(jiǎn)單：

async startPay(params) {
    // 后臺(tái)通過(guò)訂單信息生成微信付款相關(guān)簽名數(shù)據(jù)
    let [payErr, payRes] = await api.wxPay(params); 
    if (payRes) {
        jwx.configWechat(jweixin => {
            jweixin.chooseWXPay({
                nonceStr: payRes.nonceStr,
                timestamp: payRes.timeStamp,
                package: payRes.package,
                signType: payRes.signType,
                paySign: payRes.paySign,
                success: () => {
                    // 支付成功后
                },
                fail: err => {
                    // 支付失敗
                },
                cancel: err => {
                    // 支付取消
                }
            });
        });
    } else {
       // 獲取簽名失敗
    }
}

以上就是通過(guò) JSSDK 進(jìn)行支付的方法，還有另一種支付方式，即通過(guò)微信瀏覽器的內(nèi)置對(duì)象 WeixinJSBridge 進(jìn)行支付，這里的不做贅述了，下面羅列幾個(gè)支付需要注意的事項(xiàng)：

1、公眾號(hào)下綁定的 微信商戶 需配置支付授權(quán)目錄，務(wù)必配置到支付頁(yè)面的上一層。假設(shè)你的url地址為 https://www.xxx.com/abc/paypage，那么你配置的頁(yè)面支付地址為 https://www.xxx.com/abc/，一定要記得以 / 結(jié)尾。

2、iOS 進(jìn)入頁(yè)面以后，總是以進(jìn)入的地址為根地址，無(wú)論內(nèi)部如何切換，根地址都不會(huì)改變，所以如果首次進(jìn)入的地址不是支付配置頁(yè)面的話，則是無(wú)法掉起支付的。

這個(gè)時(shí)候，我們可以在支付頁(yè)面通過(guò)強(qiáng)制刷新的方式改變根地址來(lái)解決此問(wèn)題，如下：

// pay.js
created() {
  let platform = sys.platform;
  let params = util._getUrlParams(window.location.href);
  if (!params.refresh && platform === 'ios') {
    window.location.href = window.location.href + '&refresh=true';
  }
}

寫在最后

uni-App 適配微信公眾號(hào)，沒(méi)啥特別的，其實(shí)就是按照官方的文檔一步步走就行了，關(guān)鍵是思維要切換回來(lái)，不要被框架所局限了。

公眾號(hào)中還有很多需要配置的地方，比如域名啊，IP 白名單以及測(cè)試號(hào)的配置等等，這里就不再羅列了，如果有不懂的可以留言或者私信我都行。

作者：大宏說(shuō)
鏈接：http://www.itdecent.cn/p/203c9af4c3bf
來(lái)源：簡(jiǎn)書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。