原創(chuàng)

uniapp接入微信公眾號(hào)支付

溫馨提示：
本文最后更新于 2023年05月19日，已超過(guò) 552 天沒(méi)有更新。若文章內(nèi)的圖片失效（無(wú)法正常加載），請(qǐng)留言反饋或直接聯(lián)系我。

首先判斷環(huán)境跳轉(zhuǎn)獲取code

// h5環(huán)境且在微信瀏覽器中

// #ifdef H5
if (this.utils.isWechat()) {
  let appid = this.utils.getAppid();
  // 這里是獲取code后要跳轉(zhuǎn)的地址，可以自定義也可以使用當(dāng)前地址，使用當(dāng)前頁(yè)面地址需要自行判斷處理code
  let local = window.location.href;
  window.location.href =  `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`;
  return;
}
// #endif

this.utils 是已經(jīng)掛載的全局變量，utils.js 關(guān)鍵代碼

const utils = {}
// 判斷是否為公眾號(hào)模擬器環(huán)境
utils.isWechat = () => {
  return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
}
utils.getAppid = () => {
  return '你的appid';
}
export default utils

新建 wxPay.js


/*
  微信支付方法(uni-app h5)適用
  獲取微信加簽信息
  @param{data}:獲取的微信加簽
  @param{res}:成功回調(diào)
  @param{fail}:失敗回調(diào)

  @warn:因?yàn)閜ackage為嚴(yán)格模式下的保留字，不能用作變量.
  @use
    wxPay({
      appId,
      timeStamp,
      nonceStr,
      signature,
      package,
      paySign
    },res=>{
      console.log('調(diào)用成功!');
    },fail=>{
      console.log('調(diào)用失敗!');
    })
*/
const wx = require('jweixin-module');
const wxPay = (data, callback, errCallback) => {

  const {appId, timestamp, nonceStr, signature, packages, paySign} = data;

  wx.config({
    debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。
    appId,      // 必填，公眾號(hào)的唯一標(biāo)識(shí)
    timestamp,  // 必填，生成簽名的時(shí)間戳
    nonceStr,   // 必填，生成簽名的隨機(jī)串
    signature,  // 必填，簽名，見附錄1
    jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
  });

  wx.ready(function() {
    wx.chooseWXPay({
      timestamp, // 支付簽名時(shí)間戳，注意微信jssdk中的所有使用timestamp字段均為小寫。但最新版的支付后臺(tái)生成簽名使用的timeStamp字段名需大寫其中的S字符
      nonceStr, // 支付簽名隨機(jī)串，不長(zhǎng)于 32 位
      'package': packages, // 統(tǒng)一支付接口返回的prepay_id參數(shù)值，提交格式如：prepay_id=***）
      signType: 'MD5', // 簽名方式，默認(rèn)為'SHA1'，使用新版支付需傳入'MD5'
      paySign, // 支付簽名
      success(res) {
        // 支付成功后的回調(diào)函數(shù)
        callback(res);
      },
      fail(res) {
        errCallback(res);
      }
    });
  });

  wx.error(function(res) {
    // config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過(guò)期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名。
    /*alert("config信息驗(yàn)證失敗");*/
  });
}

export default wxPay;

在點(diǎn)擊支付的時(shí)候獲取支付信息，觸發(fā)公眾號(hào)支付

// #ifdef H5
$this.$http.getPay({
  code: code,
  ......
}, res => {
  if(typeof res.data == 'string'){
    res.data = JSON.parse(res.data)
  }
  // 調(diào)起支付
  // 因?yàn)楂@取code跳轉(zhuǎn)的地址欄會(huì)發(fā)生變化，所以這里指定地址進(jìn)行跳轉(zhuǎn)
  wxPay(res.data, s => {
    window.location.href = `/h5/#/pages/order/index`
  }, e => {
    window.location.href = `/h5/#/pages/shop/cashier?order_sn=${order_sn}`
  })
});
// #endif
正文到此結(jié)束
所屬分類：后端技術(shù)
熱門推薦
相關(guān)文章
本文目錄