微信公衆號開發之微信支付代碼記錄

需求說明

這個需求說明是完全沒有必要的，但是還是寫一下吧，但凡是做公衆號的，一般都是需要了解這個微信支付的，不然基本的業務都沒辦法走，所以今天簡單的記錄一下微信支付的一些問題以及流程是怎麼樣的。記錄的是jsapi支付，別的支付方式暫時沒有記錄，也就是拉起來付款界面的支付。

微信支付產品

https://pay.weixin.qq.com/static/product/product_index.shtml#payment_product

微信開發步驟

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3

這裏簡單的說一下，我們打開這哥鏈接以後其實是官方截圖的配置，有一個支付配置和設置授權域名
首先是支付配置：最簡單的辦法是我們打開需要支付的公衆號，右上角有三個點，直接複製url，這個url就是這裏需要配置的url
至於下面的授權域名，我自己當時是沒有進行配置的，這裏可能是我疏忽了，但是我沒有配置也沒有影響我使用，所以這裏我不確定要不要配置。

支付接口

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

function onBridgeReady(){
   WeixinJSBridge.invoke(
      'getBrandWCPayRequest', {
         "appId":"wx2421b1c4370ec43b",     //公衆號名稱，由商戶傳入     
         "timeStamp":"1395712654",         //時間戳，自1970年以來的秒數     
         "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //隨機串     
         "package":"prepay_id=u802345jgfjsdfgsdg888",     
         "signType":"MD5",         //微信簽名方式：     
         "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名 
      },
      function(res){
      if(res.err_msg == "get_brand_wcpay_request:ok" ){
      // 使用以上方式判斷前端返回,微信團隊鄭重提示：
            //res.err_msg將在用戶支付成功後返回ok，但並不保證它絕對可靠。
      } 
   }); 
}
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();
}

這段是官方的源碼，我們是可以直接拿來使用的，這裏主要是展示一下騰訊的簽名是怎麼生成的：
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=4_3

上面的五個參數其實appid是我們可以拿到的，時間戳是我們直接可以生成的，注意這裏是秒數，不是毫秒，隨機串這個可以直接自己寫一個函數，生成一個32位以內的隨機數，prepay_id這是後端提供接口，返回一個預付id，signType是md5加密，無可爭議的，最後一個是簽名，簽名的規則是：

◆ 參數名ASCII碼從小到大排序（字典序）；

◆ 如果參數的值爲空不參與簽名；

◆ 參數名區分大小寫；

◆ 驗證調用返回或微信主動通知簽名時，傳送的sign參數不參與簽名，將生成的簽名與該sign值作校驗。

◆ 微信接口可能增加字段，驗證簽名時必須支持增加的擴展字段

這個就比較有意思了，我做的時候直接用後端生成好的簽名進行的，但是理論上我前端也是可以生成的，但是我失敗了，可能是我順序的問題或者是別的什麼問題吧，這個不得而知了。

看源碼

廢話不說了，既然是記錄，就直接貼源碼：
步驟很簡單：

根據js拿到code

根據code獲取openid

根據openid獲取到預付id

根據預付id加上一些必要參數拉起支付

判斷支付的成功與否進行相應的操作

       /**
       * @_fun_jsapi 拉起微信付款的界面
       */
      _fun_jsapi(order_no) {
        let that = this
        let openid = sessionStorage.getItem('openid')
        if (openid && that.timestamp && that.nonceStr) {
          request({
            method: 'post',
            url: Constants.host_jsapi + api.jsapi,
            data: {
              out_trade_no: order_no, //商家訂單號
              total_fee: that.account_price * 100,
              product_id: '8501',   //所含產品id
              body: '微信公衆號訂房-頤陸科技', //訂單簡述 128字符（中文32位）
              detail: '',       //訂單詳情 60000字符 （中文1500位）
              fee_type: '',     //幣種 缺省值CNY
              attach: '',       //用戶附加字串，原樣返回
              limit_pay: '',    //限制字串 例：no_credit 不收信用卡
              goods_tag: '',    //訂單優惠標記
              openid: openid, //僅在jsapi中會使用
            }
          }).then((res) => {
            //alert(JSON.stringify(res))
            if (res.data.result_code === 'SUCCESS') {
              that.prepay_id = res.data.prepay_id
              that.timestamp = res.data.time_stamp
              that.nonceStr = res.data.nonce_str
              that.paySign = res.data.pay_sign
              that.onBridgeReady()
            } else {
              instance('error')
            }
          }).catch((err) => {
            instance(err);
            //alert(err);
          })
          //instance(sessionStorage.getItem('openid'));
        } else {
          instance('參數獲取失敗')
        }
      },
      /**
       * @onBridgeReady
       */
      onBridgeReady() {
        let that = this
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
            "appId": "wx7eb8183de8a1311b",     //公衆號名稱，由商戶傳入
            "timeStamp": that.timestamp + "",   //時間戳，自1970年以來的秒數
            "nonceStr": that.nonceStr, //隨機串
            "package": "prepay_id=" + that.prepay_id, //預定單id
            "signType": "MD5", //微信簽名方式：
            "paySign": that.paySign//微信簽名
          },
          function (res) {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              //instance('支付成功')
              that.$router.push({path: '/Pay_success'})
            } else if (res.err_msg == "get_brand_wcpay_request:ok") {
              //that.$router.push({path:'/Pay_success'}) 取消支付
              instance('取消支付')
            } else {
              //instance('支付失敗')
            }
          })
      },

需要注意的是：微信支付的金額是分爲單位的，也就是我們正常的錢需要進行*100的操作