uniapp前端實(shí)現(xiàn)微信支付功能全過程(小程序、公眾號(hào)H5、app)

更新時(shí)間：2024年09月18日 10:31:59 作者：UU-阿Q

這篇文章主要介紹了uniapp前端實(shí)現(xiàn)微信支付功能的相關(guān)資料,通過uniapp開發(fā)跨平臺(tái)應(yīng)用時(shí),需要處理不同平臺(tái)的支付方式,包括微信小程序支付、公眾號(hào)H5支付和App支付,需要的朋友可以參考下

前言

這段時(shí)間通過uniapp開發(fā)一個(gè)三端合一的項(xiàng)目，涉及到不同平臺(tái)的支付方式，這里為大家簡(jiǎn)單介紹一下，希望能有所幫助；
閱讀: 微信支付文檔

一、微信小程序支付

通過wx.login()獲取code、調(diào)用后端接口獲取openid；

wx.login({
  success (res) {
    if (res.code) {
      //發(fā)起網(wǎng)絡(luò)請(qǐng)求獲取openid，一般是訪問后端封裝好的接口，也可以通過訪問微信官方接口獲取
      uni.request({
         url: '后端接口地址,獲取openid',
         method: 'GET',
         success(res) {
           //獲取openid：用戶真實(shí)唯一id進(jìn)行保存
           console.log(res.data.openid)
        }
      })
    } else {
      console.log('登錄失?。? + res.errMsg)
    }
  }
})

調(diào)用后端接口創(chuàng)建訂單，獲取orderId；

uni.request({
  url: '后端接口地址,獲取訂單id',
  method: 'POST',
  data: { 傳入接口需要的參數(shù),如商品金額,商品個(gè)數(shù)等 },
  success(res) {
    console.log(res.data.orderId)
  }
})

調(diào)用后端接口獲取支付核心參數(shù)，預(yù)支付；

uni.request({
  url: '后端接口地址,獲取支付核心數(shù)據(jù)',
  method: 'POST',
  data: { 傳入接口需要的參數(shù),如訂單ID,openId等 },
  success(res) {
    console.log(res.data)
    //接口會(huì)返回以下核心參數(shù)
    //timeStamp 時(shí)間戳
    //nonceStr  隨機(jī)字符串
    //package   統(tǒng)一下單接口返回的 prepay_id 參數(shù)值
    //signType  簽名算法
    //paySign   簽名
  }
})

通過支付核心參數(shù)調(diào)用wx.requestPayment()發(fā)起支付；

  //調(diào)用微信官方支付接口彈出付款界面,輸入密碼扣款
  wx.requestPayment({
     timeStamp,  //時(shí)間戳
     nonceStr,   //隨機(jī)字符串
     package,    //prepay_id
     signType,   //簽名算法MD5
     paySign,    //簽名
     success (res) {
       if (res.errMsg == "requestPayment:ok"){
          console.log('支付成功', res)
       }else{
          console.log('支付失敗')
       }
     },
     fail (res) { 
       console.log('支付失敗', res)
     }
  })

二、公眾號(hào)H5支付

支付方式可以參考兩種方式：

JSAPI 支付：通過JSAPI下單接口獲取到發(fā)起支付的必要參數(shù)prepay_id，然后使用微信支付提供的前端JS方法調(diào)起公眾號(hào)支付

在獲取訂單id、openid后，調(diào)用預(yù)支付，獲取JSAPI核心參數(shù)；

uni.request({
  url: '后端接口地址,獲取支付核心數(shù)據(jù)',
  method: 'POST',
  data: { 傳入接口需要的參數(shù),如訂單ID,openId等 },
  success(res) {
    //調(diào)用下方支付方法
    wxpay（res.data）
    console.log(res.data)
    //接口會(huì)返回以下核心參數(shù)
    //appId     公眾號(hào)ID
    //timeStamp 時(shí)間戳
    //nonceStr  隨機(jī)字符串
    //package   統(tǒng)一下單接口返回的 prepay_id 參數(shù)值
    //signType  微信簽名方式RSA
    //paySign   微信簽名
    
  }
})

通過JSAPI核心參數(shù)發(fā)起支付；

   // 檢測(cè)支付環(huán)境中的 WeixinJSBridge
    function wxpay(data) {
      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', onBridgeReady(data), false);
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', onBridgeReady(data));
          document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(data));
        }
      } else {
        onBridgeReady(data);
      }
    }

    function onBridgeReady(data) {
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
             // 傳入第一步后端接口返回的核心參數(shù)
            "appId": data.appId, //公眾號(hào)
            "timeStamp": data.timeStamp, //時(shí)間戳
            "nonceStr": data.nonceStr, //隨機(jī)串
            "package": data.package, //prepay_id
            "signType": data.signType, //微信簽名方式RSA
            "paySign": data.paySign //微信簽名
          },
          function(res) {
            // 支付成功
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              // 使用以上方式判斷前端返回,微信團(tuán)隊(duì)鄭重提示：
              //res.err_msg將在用戶支付成功后返回ok，但并不保證它絕對(duì)可靠。
            }
            // 支付過程中用戶取消
            if (res.err_msg == "get_brand_wcpay_request:cancel") {

            }
            // 支付失敗
            if (res.err_msg == "get_brand_wcpay_request:fail") {

            }
            /**
            * 其它
            * 1、請(qǐng)檢查預(yù)支付會(huì)話標(biāo)識(shí)prepay_id是否已失效
            * 2、請(qǐng)求的appid與下單接口的appid是否一致
            * */
            if (res.err_msg == "調(diào)用支付JSAPI缺少參數(shù)：total_fee") {

            }
          });
      }

微信公眾號(hào)的JSSDK中的wx.chooseWXPay： JS-SDK說明文檔；注意：目前官方文檔取消了chooseWXPay接口，而是推薦JSAPI支付；

在項(xiàng)目中需要引入jweixin文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js
或者通過npm i jweixin-module使用jWeixin對(duì)象；
通過config接口注入權(quán)限驗(yàn)證配置；

//調(diào)用后端接口獲取配置參數(shù)
uni.request({
  url: '后端接口地址,獲取驗(yàn)證配置',
  method: 'POST',
  data: { 傳入接口需要的參數(shù),如頁(yè)面路徑url },
  success({data}) {
    //注入權(quán)限驗(yàn)證配置
    jWeixin.config({
      debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印。（測(cè)試記得關(guān)掉）
      appId: data.appId, // 公眾號(hào)的唯一標(biāo)識(shí)
      timestamp: data.timestamp, // 生成簽名的時(shí)間戳
      nonceStr: data.nonceStr, // 生成簽名的隨機(jī)串
      signature: data.signature, // 簽名
      jsApiList: ['chooseWXPay'], // JS接口列表
    })
  }
})

通過ready接口處理成功驗(yàn)證，調(diào)用支付；

    jWeixin.ready(function () {
    // config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作，所以如果需要在頁(yè)面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。
      jWeixin.chooseWXPay({
        timestamp: data.timeStamp,
        package: data.package,
        nonceStr: data.nonceStr,
        signType: data.signType,
        paySign: data.paySign,
        success: function (res: any) {
          if (res.errMsg == "chooseWXPay:ok") {
            console.log('支付成功')
          } else {
           console.log('支付失敗')
        },
        fail: function (res: any) {
          console.log('支付失敗')
        },
      });
    });

三、app小程序支付

App支付適用于在移動(dòng)端App中集成微信支付功能的場(chǎng)景。商戶App調(diào)用微信提供的SDK調(diào)用微信支付模塊，商戶App會(huì)跳轉(zhuǎn)到微信中完成支付，支付完后跳回到商戶App內(nèi)，最后展示支付結(jié)果。具體操作流程如下（流程與小程序類似）：

登錄獲取openId后，創(chuàng)建訂單獲取訂單ID；（這里需要注意的是使用uni.login喚起微信登錄需要在manifest.json進(jìn)行相關(guān)配置：鏈接查看）

//登錄
uni.login({
	"provider": "weixin",
	success: function(event){
		// 登錄成功,獲取openid
		const {openid,access_token}= event.authResult
		//獲取用戶信息
        uni.getUserInfo({
            provider: 'weixin',
            success: function(info) {
                // 獲取用戶信息成功, 調(diào)用后端接口進(jìn)行完成登錄
            }
        })
	},
	fail: function (err) {
        // 登錄授權(quán)失敗
        // err.code是錯(cuò)誤碼
    }
})

//登錄成功后在下單時(shí)創(chuàng)建訂單
```javascript
uni.request({
  url: '后端接口地址,獲取訂單id',
  method: 'POST',
  data: { 傳入接口需要的參數(shù),如商品金額,商品個(gè)數(shù)等 },
  success(res) {
    console.log(res.data.orderId)
  }
})

調(diào)用后端接口獲取支付核心參數(shù)，預(yù)支付；

uni.request({
  url: '后端接口地址,獲取支付核心數(shù)據(jù)',
  method: 'POST',
  data: { 傳入接口需要的參數(shù),如訂單ID等 },
  success(res) {
    console.log(res.data)
    //接口會(huì)返回以下核心參數(shù)
    //timeStamp 時(shí)間戳
    //nonceStr  隨機(jī)字符串
    //package   統(tǒng)一下單接口返回的 prepay_id 參數(shù)值
    //signType  簽名算法
    //paySign   簽名

    //通過下方api發(fā)起支付
  }
})

調(diào)用uni.requestPayment()發(fā)起支付：支付平臺(tái)功能申請(qǐng) -> manifest.json 里配置支付參數(shù) -> uni-app 里調(diào)用 API 進(jìn)行支付官網(wǎng)流程閱讀

uni.requestPayment({
    provider: 'wxpay',
    orderInfo: data.orderInfo, //微信、支付寶訂單數(shù)據(jù) 【注意微信的訂單信息，鍵值應(yīng)該全部是小寫，不能采用駝峰命名】
    nonceStr: data.noncestr,
    package: data.package,
    timeStamp: data.timestamp,
    signType: data.signType,
    paySign: data.paySign,
    success: function (res) {
        if (e.errMsg == "requestPayment:ok") {
          console.log('支付成功')
        }else{
          console.log('支付失敗')
        }
    },
    fail: function (err) {
        console.log('支付失敗:' + JSON.stringify(err));
    }
});

總結(jié)

登錄：調(diào)用uni.login/wx.login調(diào)用微信接口，獲取code，調(diào)用后端后臺(tái)獲取openid；
訂單：調(diào)用后端接口獲取訂單ID，再調(diào)用后端接口傳入openid、商品id、商品單價(jià)、商品數(shù)量等參數(shù)獲取預(yù)支付的重要參數(shù)（時(shí)間戳timeStamp，隨機(jī)字符串nonceStr，預(yù)支付id package，簽名算法signType，簽名paySign）
支付：調(diào)用uni/wx.requestPayment微信支付方法，傳遞5個(gè)重要參數(shù)，獲取支付結(jié)果（成功或失?。?/li>
H5支付因?yàn)闊o法直接調(diào)用微信api，需要通過JSSDK配置后調(diào)用對(duì)應(yīng)的接口；

在開發(fā)中如果涉及到多端支付，需要通過條件編譯處理多端差異，可以參考官網(wǎng)文檔，在實(shí)際開發(fā)中可以多參考各位大佬的文檔找到適合自己項(xiàng)目開發(fā)的方法，也歡迎各位大佬討論、提供建議補(bǔ)充…

到此這篇關(guān)于uniapp前端實(shí)現(xiàn)微信支付功能的文章就介紹到這了,更多相關(guān)uniapp前端微信支付內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: