如何使用uniapp實現微信支付功能-uni-app-PHP中文網

首頁

web前端

uni-app

如何使用uniapp實現微信支付功能

PHPz

Apr 20, 2023 pm 03:05 PM

uniapp 是一種基於 Vue.js 的跨平台開發框架，可用於快速開發小程式、App 和 H5 等多個平台的應用程式。在 uniapp 中，我們可以透過整合微信支付來實現線上支付功能，讓用戶可以在應用程式中購買商品或服務。

本文將介紹如何使用 uniapp 實作微信支付功能，包括註冊微信支付帳號，設定支付參數，呼叫支付介面等步驟。

一、註冊微信支付帳號
要使用微信支付功能，我們必須先註冊一個微信支付商家帳號，如果已經有了微信公眾號或小程序，可以直接將其升級為支付帳號，否則需要前往微信支付官網註冊。

註冊完成後，需提交對應的資料進行實名認證，認證通過後，即可登入進入商家平台，完成後續支付相關操作。

二、建立商家訂單
在完成微信商家支付帳號的註冊之後，接下來需要在 uniapp 中建立訂單，以便用戶可以在線上支付購買商品或服務。在建立訂單時，需要注意以下幾個參數：

appId：微信開放平台分配的AppID;
timeStamp：時間戳，從1970年1月1日00: 00:00至今的秒數；
nonceStr：隨機字串，不長於32位元；
package：統一下單一介面傳回的prepay_id 參數值，格式如下：prepay_id=*
signType：簽名演算法，暫支援MD5；
paySign：簽名，通常由後台產生。

在uniapp中，可以透過以下方式建立商家訂單：

export default {
  data() {
    return {
      appId: 'XXXXXXXXXXXXXX', // 微信开放平台分配的 AppID
      merchantId: 'XXXXXXXXXXXXX', // 微信支付分配的商户号
      amount: null, // 订单金额，单位为分 
      orderNumber: null // 自定义订单编号
    };
  },
  methods: {
    createPayOrder() {
      // 调用后台接口，获取生成商户订单参数
      let data = {
        appId: this.appId,
        merchantId: this.merchantId,
        amount: this.amount,
        orderNumber: this.orderNumber
      };

      // 发送请求，获取预支付信息
      this.$http.post('/pay/unifiedOrder', data).then(resp => {
        wx.requestPayment({
          // 获取支付信息成功后，使用官方 API 调起微信支付
          timeStamp: resp.data.timeStamp,
          nonceStr: resp.data.nonceStr,
          package: resp.data.package,
          signType: resp.data.signType,
          paySign: resp.data.paySign,
          success(res) {
            console.log('支付成功');
          },
          fail(res) {
            console.log('支付失败');
          },
          complete(res) {
            console.log('支付完成');
          }
        })
      })
    }
  }
}

登入後複製

三、設定微信支付參數
在建立商家訂單之後，需要在uniapp 中設定微信支付參數，包括商家號碼、介面金鑰、憑證等。在設定參數時，需要注意以下幾點：

商家號碼：微信支付分配的商家號碼；
介面金鑰：作為商家簽署的金鑰，需要儲存在後台伺服器中；
憑證路徑：若需要使用退款、紅包等進階功能，需要上傳憑證至微信支付平台。

在uniapp 中，可以透過以下方式設定微信支付參數：

function getSign(params) {
  let str = '';
  for (let key in params) {
    str += key + '=' + params[key] + '&';
  }
  str += 'key=' + API_KEY;
  return md5(str).toUpperCase();
}

function createPayParams(data) {
  let params = Object.assign({}, data, {
    appid: APP_ID, // 微信开放平台分配的 AppID 
    mch_id: MERCHANT_ID, // 微信支付分配的商户号
    nonce_str: Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15), // 随机字符串
    notify_url: NOTIFY_URL, // 异步通知地址，接收微信支付异步通知回调地址
    spbill_create_ip: '127.0.0.1' // 终端IP
  });

  let sign = getSign(params);

  return `
    <xml>
      <appid><![CDATA[${params.appid}]]></appid>
      <attach>支付测试</attach>
      <body>APP支付测试</body>
      <mch_id>${params.mch_id}</mch_id>
      <nonce_str>${params.nonce_str}</nonce_str>
      <notify_url>${params.notify_url}</notify_url>
      <out_trade_no>${data.orderNumber}</out_trade_no>
      <spbill_create_ip>${params.spbill_create_ip}</spbill_create_ip>
      <total_fee>${params.total_fee}</total_fee>
      <trade_type>APP</trade_type>
      <sign>${sign}</sign>
    </xml>
  `;
}

登入後複製

四、呼叫支付介面
在配置完成微信支付參數後，即可透過uniapp 中提供的官方API 呼叫微信支付接口，並傳入參數實現線上支付功能。呼叫支付介面時，需要注意以下幾點：

小程式或App 必須具備微信支付的權限；
需要傳入支付參數，包括商家訂單號碼、金額、交易類型等；
支付成功後，可以透過接收微信非同步通知判斷支付結果。

在uniapp 中，可以透過以下方式呼叫微信支付介面：

  let params = {
    appId: APP_ID, // 微信开放平台分配的 AppID
    partnerId: MERCHANT_ID, // 微信支付分配的商户号
    prepayId: prepayId, // 预支付交易会话标识
    package: 'Sign=WXPay', // 扩展字段，暂填写固定值 Sign=WXPay
    nonceStr: nonceStr, // 随机字符串，不长于32位
    timeStamp: timeStamp.toString(), // 时间戳
    sign: getSign({ // 根据微信支付签名算法生成签名
      appId: APP_ID,
      partnerId: MERCHANT_ID,
      prepayId: prepayId,
      package: 'Sign=WXPay',
      nonceStr: nonceStr,
      timeStamp: timeStamp.toString()
    })
  };

  wx.requestPayment({
    appId: APP_ID,
    timeStamp: timeStamp.toString(),
    nonceStr: nonceStr,
    package: params.package,
    signType: 'MD5',
    paySign: params.sign,
    success(res) {
      console.log('支付成功');
    },
    fail(res) {
      console.log('支付失败');
    }
  });

登入後複製

以上就是uniapp 中使用微信支付功能的具體步驟，包括註冊微信支付帳號、建立商家訂單、配置微信支付參數、呼叫支付介面等。在應用程式開發過程中，完善的支付功能可以大幅提高用戶購買商品或服務的體驗，增加應用程式或網站的轉換率和效益。

以上是如何使用uniapp實現微信支付功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn