前段時(shí)間由于公司業(yè)務(wù)發(fā)展，需要開發(fā)一個(gè)微信端的支付頁面，并需要嵌入到公眾號(hào)中。本文著手記錄開發(fā)過程以及幾點(diǎn)需要注意的地方。

需求簡述

在微信公眾號(hào)中，底部添加導(dǎo)航欄充值入口。點(diǎn)擊進(jìn)入充值頁面后，選擇相應(yīng)商品購買，能調(diào)起微信支付。

前期準(zhǔn)備

• 因?yàn)楣娞?hào)頁面中使用了微信支付，所以需要在公眾號(hào)對(duì)應(yīng)的商戶后臺(tái)內(nèi)配置微信支付授權(quán)目錄，支付授權(quán)目錄詳細(xì)配置如下：

  • 進(jìn)入該公眾號(hào)對(duì)應(yīng)的微信商戶平臺(tái)
  • 進(jìn)入產(chǎn)品中心——開發(fā)配置——支付設(shè)置
  • 在支付授權(quán)目錄中填寫支付頁面的鏈接，選擇對(duì)應(yīng)的協(xié)議http或https
  • 鏈接寫到最后一級(jí)目錄，如支付頁面是https://yoursite/dir/index.html，則支付授權(quán)目錄為：https://yoursite/dir/

  否則可能會(huì)出現(xiàn)chooseWXPay:fail, the permission value is offline verifying等錯(cuò)誤。參考鏈接

• 頁面還涉及到獲取微信用戶信息，所以頁面需要接入微信網(wǎng)頁授權(quán)。需要配置授權(quán)回調(diào)域名：

  在微信公眾號(hào)請(qǐng)求用戶網(wǎng)頁授權(quán)之前，開發(fā)者需要先到公眾平臺(tái)官網(wǎng)中的“開發(fā) - 接口權(quán)限 - 網(wǎng)頁服務(wù) - 網(wǎng)頁帳號(hào) - 網(wǎng)頁授權(quán)獲取用戶基本信息”的配置選項(xiàng)中，修改授權(quán)回調(diào)域名。請(qǐng)注意，這里填寫的是域名（是一個(gè)字符串），而不是URL，因此請(qǐng)勿加 http:// 等協(xié)議頭；

  詳細(xì)的接入配置請(qǐng)閱讀上述微信網(wǎng)頁授權(quán)文檔。

頁面制作

上述配置完成后，我們可以使用下面這種格式的授權(quán)鏈接：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=公眾號(hào)對(duì)應(yīng)的APPID&redirect_uri=授權(quán)成功之后的跳轉(zhuǎn)鏈接&response_type=code&scope=授權(quán)類型&state=STATE#wechat_redirect

關(guān)于網(wǎng)頁授權(quán)的兩種scope的區(qū)別說明

1、以snsapi_base為scope發(fā)起的網(wǎng)頁授權(quán)，是用來獲取進(jìn)入頁面的用戶的openid的，并且是靜默授權(quán)并自動(dòng)跳轉(zhuǎn)到回調(diào)頁的。用戶感知的就是直接進(jìn)入了回調(diào)頁（往往是業(yè)務(wù)頁面）

2、以snsapi_userinfo為scope發(fā)起的網(wǎng)頁授權(quán)，是用來獲取用戶的基本信息的。但這種授權(quán)需要用戶手動(dòng)同意，并且由于用戶同意過，所以無須關(guān)注，就可在授權(quán)后獲取該用戶的基本信息。

3、用戶管理類接口中的“獲取用戶基本信息接口”，是在用戶和公眾號(hào)產(chǎn)生消息交互或關(guān)注后事件推送后，才能根據(jù)用戶OpenID來獲取用戶基本信息。這個(gè)接口，包括其他微信接口，都是需要該用戶（即openid）關(guān)注了公眾號(hào)后，才能調(diào)用成功的。

引導(dǎo)用戶在微信瀏覽器中打開該鏈接，微信會(huì)自動(dòng)拉起授權(quán)。當(dāng)授權(quán)成功之后，頁面會(huì)自動(dòng)重定向到上述鏈接中的redirect_uri頁面，并且會(huì)以GET參數(shù)的形式攜帶授權(quán)成功的參數(shù)code，該鏈接中redirect_uri參數(shù)對(duì)應(yīng)的值（業(yè)務(wù)頁面鏈接）需要使用URI編碼。

當(dāng)微信授權(quán)成功之后，頁面會(huì)跳轉(zhuǎn)到填寫的業(yè)務(wù)頁面。然后在業(yè)務(wù)頁面中取得url中微信傳過來的code，去服務(wù)器請(qǐng)求open_id，再進(jìn)行下一步的業(yè)務(wù)邏輯。

當(dāng)用戶選完商品之后，點(diǎn)擊購買按鈕，頁面將商品信息和open_id等發(fā)送給后臺(tái)。后臺(tái)接入微信生成預(yù)訂單并將預(yù)訂單的信息返回給前端。在前端接收到預(yù)訂單信息之后，可以使用下述代碼調(diào)起微信支付（僅在微信瀏覽器中生效）

function onBridgeReady() {
  WeixinJSBridge.invoke(
    "getBrandWCPayRequest",
    {
      appId: 對(duì)應(yīng)的appid, //公眾號(hào)名稱，由商戶傳入
      timeStamp: res.timeStamp, //時(shí)間戳，自1970年以來的秒數(shù)
      nonceStr: res.nonceStr, //隨機(jī)串
      package: "prepay_id=" + res.prepay_id,
      signType: "MD5", //微信簽名方式：
      paySign: res.paySign //微信簽名
    },
    function(res) {
      if (res.err_msg == "get_brand_wcpay_request:ok") {
        // 使用以上方式判斷前端返回,微信團(tuán)隊(duì)鄭重提示：
        //res.err_msg將在用戶支付成功后返回ok，但并不保證它絕對(duì)可靠。
      }
    }
  );
}
if (typeof WeixinJSBridge == "undefined") {
  if (document.addEventListener) {
    document.addEventListener(
      "WeixinJSBridgeReady",
      onBridgeReady,
      false
    );
  } else if (document.attachEvent) {
    document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
    document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
  }
} else {
  onBridgeReady();
}

至此主體的業(yè)務(wù)邏輯即是完成了。

公眾號(hào)自定義菜單配置

當(dāng)業(yè)務(wù)頁面都開發(fā)完成之后，我們需要將頁面的鏈接配置到微信公眾號(hào)的底部菜單中。此時(shí)我們可以登錄進(jìn)微信工作平臺(tái)，在左側(cè)的功能菜單下，找到自定義菜單選項(xiàng)。點(diǎn)擊即可進(jìn)入自定義菜單配置，這種配置方式比較直觀和簡單。

還有一種情況是，點(diǎn)擊了自定義菜單，但是頁面提示：

未開啟自定義菜單

由于開發(fā)者通過接口修改了菜單配置，當(dāng)前菜單配置已失效并停用。你可以前往開發(fā)者中心進(jìn)行停用。

當(dāng)出現(xiàn)這種情況的時(shí)候，有兩種解決辦法

• 第一種是根據(jù)提示，進(jìn)入開發(fā)者中心，停用掉服務(wù)器配置，再進(jìn)行修改菜單，再啟用服務(wù)器配置，再找到“添加功能插件”中的自定義菜單，選擇啟用。這種方式需要停用服務(wù)器配置，在此期間可能會(huì)影響到線上的自動(dòng)回復(fù)等功能，并不建議，這里建議第二種方法
• 第二種方式是直接使用接口的方式向微信發(fā)起一次post請(qǐng)求，并且攜帶需要配置的菜單信息，這種方式需要獲得Access Token，這里有一篇文章寫得非常詳細(xì)：微信公眾平臺(tái)開發(fā)（58）自定義菜單，這里就不贅述了。

注意事項(xiàng)

這里有幾個(gè)需要注意的地方

• 如果在微信公眾號(hào)調(diào)試工具中，無法正確調(diào)起支付，那可以嘗試在真機(jī)上進(jìn)行調(diào)試。

• 如果在安卓機(jī)器上，可以喚起支付但是不出現(xiàn)輸密碼的步驟而且沒報(bào)錯(cuò)，可以在IOS平臺(tái)的微信上重試一下，也許就會(huì)有錯(cuò)誤信息出現(xiàn)

• 無法正常調(diào)起支付優(yōu)先檢查代碼，如果不是代碼錯(cuò)誤則檢查配置，幾個(gè)配置需要檢查的點(diǎn)：

  • 是否在公眾號(hào)后臺(tái)中配置了授權(quán)回調(diào)域名，授權(quán)回調(diào)域名格式是否正確（多加了http協(xié)議頭，多了空格等）
  • 公眾號(hào)對(duì)應(yīng)的商戶后臺(tái)，是否配置了支付授權(quán)目錄，支付授權(quán)目錄的格式是否正確（http和https是否和實(shí)際訪問鏈接匹配，鏈接是否寫到了最后一級(jí)目錄）

• 在調(diào)起支付的參數(shù)中，前端代碼中的timeStamp中的S是大寫的，寫錯(cuò)了也可能會(huì)無法調(diào)起支付。