快捷導(dǎo)航

微信公眾號(hào)開發(fā)之微信支付代碼記錄的實(shí)現(xiàn)

更新時(shí)間：2019年10月16日 14:18:21 作者：何處錦繡不灰堆

這篇文章主要介紹了微信公眾號(hào)開發(fā)之微信支付代碼記錄的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

需求說明

這個(gè)需求說明是完全沒有必要的，但是還是寫一下吧，但凡是做公眾號(hào)的，一般都是需要了解這個(gè)微信支付的，不然基本的業(yè)務(wù)都沒辦法走，所以今天簡(jiǎn)單的記錄一下微信支付的一些問題以及流程是怎么樣的。記錄的是jsapi支付，別的支付方式暫時(shí)沒有記錄，也就是拉起來付款界面的支付。

微信支付產(chǎn)品

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

微信開發(fā)步驟

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

這里簡(jiǎn)單的說一下，我們打開這哥鏈接以后其實(shí)是官方截圖的配置，有一個(gè)支付配置和設(shè)置授權(quán)域名
首先是支付配置：最簡(jiǎn)單的辦法是我們打開需要支付的公眾號(hào)，右上角有三個(gè)點(diǎn)，直接復(fù)制url，這個(gè)url就是這里需要配置的url
至于下面的授權(quán)域名，我自己當(dāng)時(shí)是沒有進(jìn)行配置的，這里可能是我疏忽了，但是我沒有配置也沒有影響我使用，所以這里我不確定要不要配置。

支付接口

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

function onBridgeReady(){
 WeixinJSBridge.invoke(
  'getBrandWCPayRequest', {
   "appId":"wx2421b1c4370ec43b",  //公眾號(hào)名稱，由商戶傳入  
   "timeStamp":"1395712654",   //時(shí)間戳，自1970年以來的秒數(shù)  
   "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //隨機(jī)串  
   "package":"prepay_id=u802345jgfjsdfgsdg888",  
   "signType":"MD5",   //微信簽名方式：  
   "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名 
  },
  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();
}

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

上面的五個(gè)參數(shù)其實(shí)appid是我們可以拿到的，時(shí)間戳是我們直接可以生成的，注意這里是秒數(shù)，不是毫秒，隨機(jī)串這個(gè)可以直接自己寫一個(gè)函數(shù)，生成一個(gè)32位以內(nèi)的隨機(jī)數(shù)，prepay_id這是后端提供接口，返回一個(gè)預(yù)付id，signType是md5加密，無可爭(zhēng)議的，最后一個(gè)是簽名，簽名的規(guī)則是：

參數(shù)名ASCII碼從小到大排序（字典序）；
如果參數(shù)的值為空不參與簽名；
參數(shù)名區(qū)分大小寫；
驗(yàn)證調(diào)用返回或微信主動(dòng)通知簽名時(shí)，傳送的sign參數(shù)不參與簽名，將生成的簽名與該sign值作校驗(yàn)。
微信接口可能增加字段，驗(yàn)證簽名時(shí)必須支持增加的擴(kuò)展字段

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

看源碼

廢話不說了，既然是記錄，就直接貼源碼：

步驟很簡(jiǎn)單：
根據(jù)js拿到code
根據(jù)code獲取openid
根據(jù)openid獲取到預(yù)付id
根據(jù)預(yù)付id加上一些必要參數(shù)拉起支付
判斷支付的成功與否進(jìn)行相應(yīng)的操作

  /**
  * @_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, //商家訂單號(hào)
    total_fee: that.account_price * 100,
    product_id: '8501', //所含產(chǎn)品id
    body: '微信公眾號(hào)訂房-頤陸科技', //訂單簡(jiǎn)述 128字符（中文32位）
    detail: '',  //訂單詳情 60000字符 （中文1500位）
    fee_type: '',  //幣種 缺省值CNY
    attach: '',  //用戶附加字串，原樣返回
    limit_pay: '', //限制字串 例：no_credit 不收信用卡
    goods_tag: '', //訂單優(yōu)惠標(biāo)記
    openid: openid, //僅在jsapi中會(huì)使用
   }
   }).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('參數(shù)獲取失敗')
  }
  },
  /**
  * @onBridgeReady
  */
  onBridgeReady() {
  let that = this
  WeixinJSBridge.invoke(
   'getBrandWCPayRequest', {
   "appId": "wx7eb8183de8a1311b",  //公眾號(hào)名稱，由商戶傳入
   "timeStamp": that.timestamp + "", //時(shí)間戳，自1970年以來的秒數(shù)
   "nonceStr": that.nonceStr, //隨機(jī)串
   "package": "prepay_id=" + that.prepay_id, //預(yù)定單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('支付失敗')
   }
   })
  },

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: