uniapp实现微信支付（代码和注释很详细）

最新推荐文章于 2024-08-12 10:37:45 发布

如夜了我衣衫太薄便归家靠路灯°

最新推荐文章于 2024-08-12 10:37:45 发布

阅读量669

点赞数 3

文章标签： uni-app 微信

本文链接：https://blog.csdn.net/weixin_42487883/article/details/140519195

版权

实现 Uniapp 的微信支付功能需要经过以下几个步骤：

获取微信支付参数：从服务器获取支付所需的参数，例如 appId、timeStamp、nonceStr、package、signType、paySign 等。
调用微信支付接口：使用 uni.requestPayment 方法调用微信支付接口。
支付结果处理：处理支付结果，展示支付成功或失败的提示。

以下是一个完整的代码示例和详细的注释说明。

第一步：服务器端获取微信支付参数

服务器端代码（例如使用 Node.js + Koa）：

const Koa = require('koa');
const Router = require('koa-router');
const request = require('request');
const crypto = require('crypto');

const app = new Koa();
const router = new Router();

router.post('/getWxPayParams', async (ctx) => {
  const { openid, total_fee } = ctx.request.body;

  const appid = '你的微信公众平台应用ID';
  const mch_id = '你的商户号';
  const nonce_str = Math.random().toString(36).substr(2, 15);
  const body = '商品描述';
  const out_trade_no = '订单号';
  const spbill_create_ip = '用户IP';
  const notify_url = '回调通知地址';
  const trade_type = 'JSAPI';
  const key = '你的API密钥';

  const sign = createSign({
    appid,
    mch_id,
    nonce_str,
    body,
    out_trade_no,
    total_fee,
    spbill_create_ip,
    notify_url,
    trade_type,
    openid,
  }, key);

  const formData = `<xml>
    <appid>${appid}</appid>
    <mch_id>${mch_id}</mch_id>
    <nonce_str>${nonce_str}</nonce_str>
    <sign>${sign}</sign>
    <body>${body}</body>
    <out_trade_no>${out_trade_no}</out_trade_no>
    <total_fee>${total_fee}</total_fee>
    <spbill_create_ip>${spbill_create_ip}</spbill_create_ip>
    <notify_url>${notify_url}</notify_url>
    <trade_type>${trade_type}</trade_type>
    <openid>${openid}</openid>
  </xml>`;

  const result = await new Promise((resolve, reject) => {
    request({
      url: 'https://api.mch.weixin.qq.com/pay/unifiedorder',
      method: 'POST',
      body: formData
    }, (error, response, body) => {
      if (!error && response.statusCode === 200) {
        resolve(body);
      } else {
        reject(error);
      }
    });
  });

  const parseString = require('xml2js').parseString;
  let res;
  parseString(result, (err, json) => {
    if (err) {
      throw err;
    }
    res = json.xml;
  });

  const timeStamp = Math.floor(Date.now() / 1000).toString();
  const nonceStr = res.nonce_str[0];
  const prepay_id = res.prepay_id[0];
  const paySign = createSign({
    appId: appid,
    timeStamp,
    nonceStr,
    package: `prepay_id=${prepay_id}`,
    signType: 'MD5'
  }, key);

  ctx.body = {
    appId: appid,
    timeStamp,
    nonceStr,
    package: `prepay_id=${prepay_id}`,
    signType: 'MD5',
    paySign,
  };
});

function createSign(params, key) {
  const string = Object.keys(params).sort().map(k => `${k}=${params[k]}`).join('&') + `&key=${key}`;
  return crypto.createHash('md5').update(string).digest('hex').toUpperCase();
}

app.use(router.routes());
app.listen(3000);

第二步：客户端调用微信支付接口

// 在你的uniapp项目中，创建一个支付页面，例如pay.vue

<template>
  <view>
    <button @click="pay">微信支付</button>
  </view>
</template>

<script>
export default {
  methods: {
    async pay() {
      try {
        // 向服务器请求微信支付参数
        const { data } = await uni.request({
          url: 'http://你的服务器地址/getWxPayParams',
          method: 'POST',
          data: {
            openid: '用户的openid',
            total_fee: 1 // 订单总金额，单位为分
          }
        });

        // 调用uni.requestPayment发起微信支付
        await uni.requestPayment({
          provider: 'wxpay',
          timeStamp: data.timeStamp,
          nonceStr: data.nonceStr,
          package: data.package,
          signType: data.signType,
          paySign: data.paySign,
          success(res) {
            // 支付成功后的逻辑
            uni.showToast({
              title: '支付成功',
              icon: 'success'
            });
          },
          fail(err) {
            // 支付失败后的逻辑
            uni.showToast({
              title: '支付失败',
              icon: 'none'
            });
          }
        });
      } catch (error) {
        console.error('请求支付参数失败', error);
      }
    }
  }
};
</script>

<style>
/* 样式代码 */
</style>