Cara menggunakan uniapp untuk melaksanakan fungsi pembayaran WeChat

uniapp ialah rangka kerja pembangunan merentas platform berdasarkan Vue.js, yang boleh digunakan untuk membangunkan aplikasi dengan cepat untuk berbilang platform seperti program mini, Aplikasi dan H5. Dalam uniapp, kami boleh melaksanakan fungsi pembayaran dalam talian dengan menyepadukan pembayaran WeChat, membolehkan pengguna membeli barangan atau perkhidmatan dalam aplikasi.

Artikel ini akan memperkenalkan cara menggunakan uniapp untuk melaksanakan fungsi pembayaran WeChat, termasuk mendaftarkan akaun pembayaran WeChat, mengkonfigurasi parameter pembayaran, memanggil antara muka pembayaran dan langkah lain.

1. Daftar akaun pembayaran WeChat
Untuk menggunakan fungsi pembayaran WeChat, kami mesti mendaftar akaun pedagang pembayaran WeChat Jika anda sudah mempunyai akaun rasmi atau program mini WeChat, anda boleh terus menaik tarafnya ke akaun pembayaran , jika tidak, anda perlu pergi ke tapak web rasmi WeChat Pay untuk mendaftar.

Selepas pendaftaran selesai, anda perlu menyerahkan maklumat yang sepadan untuk pengesahan nama sebenar Selepas lulus pengesahan, anda boleh log masuk ke platform pedagang dan menyelesaikan operasi berkaitan pembayaran berikutnya.

2. Buat pesanan pedagang
Selepas melengkapkan pendaftaran akaun pembayaran pedagang WeChat, anda perlu membuat pesanan dalam uniapp supaya pengguna boleh membayar dalam talian untuk membeli barangan atau perkhidmatan. Apabila membuat pesanan, anda perlu memberi perhatian kepada parameter berikut:

1. appId: AppID yang diberikan oleh platform terbuka WeChat
2. timeStamp: timestamp, dari 1 Januari 1970 00; : Bilangan saat sejak 00:00;
3. nonceStr: rentetan rawak, tidak lebih daripada 32 aksara
4. pakej: nilai parameter prabayar_id dikembalikan oleh antara muka pesanan bersatu, formatnya ialah; seperti berikut: prepay_id=*
5. signType: algoritma tandatangan, kini menyokong MD5;
6. paySign: tandatangan, biasanya dijana oleh latar belakang.

Dalam uniapp, anda boleh membuat pesanan pedagang dengan cara berikut:

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('支付完成');
          }
        })
      })
    }
  }
}

3 Konfigurasikan parameter pembayaran WeChat
Selepas membuat pesanan pedagang, anda perlu mengkonfigurasi. dalam parameter pembayaran WeChat uniapp, termasuk nombor pedagang, kunci antara muka, sijil, dsb. Apabila mengkonfigurasi parameter, anda perlu memberi perhatian kepada perkara berikut:

1. Nombor pedagang: nombor pedagang yang diberikan oleh pembayaran WeChat; ia perlu disimpan dalam Dalam pelayan bahagian belakang;
2. Laluan sijil: Jika anda perlu menggunakan fungsi lanjutan seperti bayaran balik dan sampul merah, anda perlu memuat naik sijil ke platform pembayaran WeChat.
3. Dalam uniapp, anda boleh mengkonfigurasi parameter pembayaran WeChat dengan cara berikut:

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>
  `;
}

1. Anda perlu memasukkan parameter pembayaran, termasuk nombor pesanan pedagang dan amaun , jenis transaksi, dll.;
2. Selepas pembayaran berjaya, keputusan pembayaran boleh ditentukan dengan menerima pemberitahuan WeChat tak segerak.
3. Dalam uniapp, anda boleh menghubungi antara muka pembayaran WeChat dengan cara berikut:

  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('支付失败');
    }
  });

Atas ialah kandungan terperinci Cara menggunakan uniapp untuk melaksanakan fungsi pembayaran WeChat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!