1. 简介
微信支付是一种在线支付方式，允许用户使用微信支付应用程序支付购买商品或服务。Uniapp 是一种基于 Vue.js 的跨平台开发框架，可以在多个平台使用同一份代码。在 Uniapp 中实现微信支付非常方便，只需要调用微信小程序的接口即可。本文将介绍如何在 Uniapp 中使用微信扫码支付。
2. 准备工作
2.1. 注册微信支付
在使用微信支付之前，需要先注册一个微信支付账号。具体注册过程可以参考微信支付官网。注册完成后，需要在微信支付后台进行相关的配置，包括申请支付权限、设置支付密钥等。在完成微信支付配置后，可以获得以下信息：
appid：用于标识商户身份的 ID，也是进行微信支付的必要参数。
商户号：微信支付分配的商户号。
API 密钥：用于进行数据传输加密的密钥。
支付通知 URL：用于接收微信支付结果通知的 URL，需要在商户平台设置。
注意：需要使用企业证书或个人证书进行微信支付。
2.2. 导入微信支付模块
在 Uniapp 中实现微信支付需要导入微信支付模块。在 uni_modules 中安装 uni-wxpay 模块：
npm install uni-wxpay --save
安装完成后，在需要使用微信支付的页面中导入并初始化模块：
import Wxpay from '@/uni_modules/uni-wxpay/js_sdk/wxpay'
const wxpay = new Wxpay({
appId: 'YOUR_APP_ID',
mchId: 'YOUR_MCH_ID',
apiKey: 'YOUR_API_KEY',
notifyUrl: 'YOUR_NOTIFY_URL'
})
注意：需要将 YOUR_APP_ID、YOUR_MCH_ID、YOUR_API_KEY、YOUR_NOTIFY_URL 替换为实际的值。
3. 实现微信支付
3.1. 准备支付数据
在进行微信支付之前，需要准备支付数据。支付数据包括以下信息：
商户订单号：商户订单号，需要保证唯一性。
商品描述：商品描述。
支付金额：支付金额，单位为分。
交易起始时间：交易起始时间，需要使用 getTime() 获取。
交易结束时间：交易结束时间，需要在起始时间的基础上加上交易过期时间。
用户 IP：用户 IP，可以使用 uni.request() 获取。
具体实现代码如下：
const orderNo = 'ORDER_NO'
const body = 'BODY'
const totalFee = TOTAL_FEE
const timeStart = new Date().getTime()
const timeExpire = timeStart + 30 * 60 * 1000
let clientIp = ''
uni.request({
url: 'https://pv.sohu.com/cityjson?ie=utf-8',
header: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
success: res => {
const reg = /^.*(?=")/g
clientIp = res.data.match(reg)[0].replace('returnCitySN = ', '')
}
})
注意：需要将 ORDER_NO、BODY、TOTAL_FEE 替换为实际的值。
3.2. 发起支付请求
支付数据准备完成后，需要通过调用 wxpay.requestPayment(params) 方法发起支付请求。其中，params 为一个对象，包含以下参数：
timeStamp：时间戳，需要使用 getTime() 获取，单位为秒。
nonceStr：随机字符串，可以使用 Math.random() 生成。
package：包含签名的支付信息，需要调用 wxpay.getPayRequestParams() 方法生成。
signType：签名算法，固定为 MD5。
paySign：签名，需要调用 wxpay.getPaySign(params) 方法生成。
具体实现代码如下：
wxpay.requestPayment({
timeStamp: parseInt(new Date().getTime() / 1000),
nonceStr: Math.random().toString(36).substr(2),
package: wxpay.getPayRequestParams({
body,
out_trade_no: orderNo,
total_fee: totalFee,
trade_type: 'NATIVE',
spbill_create_ip: clientIp,
time_start: timeStart,
time_expire: timeExpire,
notify_url: wxpay.options.notifyUrl
}),
signType: 'MD5',
paySign: wxpay.getPaySign({
timeStamp: parseInt(new Date().getTime() / 1000),
nonceStr: Math.random().toString(36).substr(2),
package: wxpay.getPayRequestParams({
body,
out_trade_no: orderNo,
total_fee: totalFee,
trade_type: 'NATIVE',
spbill_create_ip: clientIp,
time_start: timeStart,
time_expire: timeExpire,
notify_url: wxpay.options.notifyUrl
}),
signType: 'MD5'
})
}).then(res => {
console.log(res)
}).catch(err => {
console.error(err)
})
4. 支付结果通知
支付完成后，微信支付会通过支付结果通知将支付结果返回到商户平台。需要在商户平台设置支付通知 URL，在该 URL 接收来自微信支付的支付结果通知。支付结果通知采用 HTTP POST 请求，包含以下参数：
return_code：返回状态码，SUCCESS 表示成功，FAIL 表示失败。
return_msg：返回信息。
appid：公众账号 ID。
mch_id：商户号。
nonce_str：随机字符串。
sign：签名。
result_code：业务结果，SUCCESS 表示成功，FAIL 表示失败。
openid：用户标识。
is_subscribe：是否关注公众账号。
trade_type：交易类型，例如 NATIVE。
bank_type：付款银行。
total_fee：订单金额。
settlement_total_fee：应结订单金额。
cash_fee：现金支付金额。
transaction_id：微信支付订单号。
out_trade_no：商户订单号。
attach：商家数据包。
time_end：支付完成时间。
需要在支付结果通知 URL 中使用以下代码解析支付结果通知：
const express = require('express')
const Wxpay = require('wxpay-sdk')
const router = express.Router()
const wxpay = new Wxpay({
app_id: 'YOUR_APP_ID',
mch_id: 'YOUR_MCH_ID',
key: 'YOUR_API_KEY'
})
router.post('/notify_url', (req, res) => {
const data = req.body
if (wxpay.verifySign(data)) {
// 对支付结果进行相应的处理
res.send(wxpay.buildResponse({
return_code: 'SUCCESS',
return_msg: 'OK'
}))
} else {
res.send(wxpay.buildResponse({
return_code: 'FAIL',
return_msg: 'Sign Error'
}))
}
})
module.exports = router
需要将 YOUR_APP_ID、YOUR_MCH_ID、YOUR_API_KEY 替换为实际的值。
5. 总结
本文介绍了如何在 Uniapp 中使用微信扫码支付。需要先完成微信支付的注册和配置，然后导入微信支付模块，准备支付数据并发起支付请求，最后在支付结果通知 URL 中解析支付结果通知。通过本文的介绍，相信读者已经对 Uniapp 实现微信支付有了一定的了解。