实现 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>
第三步：处理支付结果
在支付成功和失败的回调函数中，你可以根据业务逻辑进行相应的处理，例如跳转到订单详情页面、显示支付结果等。
注意事项
确保服务端和客户端的安全性：服务器端获取微信支付参数时，需要确保参数的真实性和安全性，防止被篡改。客户端调用支付接口时，也需要做好错误处理和安全验证。
处理支付回调：微信支付成功后，会向你设置的 notify_url 发送支付结果通知，你需要在服务器端处理该通知，更新订单状态等。
调试：在开发过程中，可以使用微信支付的沙盒环境进行调试，避免真实支付操作对用户造成影响。
