小程序开发接入微信支付功能的方法介绍
1. 准备工作
1.1 获取商户号和appid
要使用微信支付，首先需要拥有一对商户号和appid。商户号可在微信支付商户平台中申请，具体申请流程不在本文的讨论范围内。
1.2 配置支付证书
微信支付需要配置支付证书，以保证支付的安全性。证书可以在微信支付商户平台中下载，需要包括以下三个部分：
- apiclient_cert.pem，客户端证书；
- apiclient_key.pem，客户端证书的私钥；
- rootca.pem，微信支付根证书。
将这三个证书文件下载下来，放到一个文件夹中，作为后续开发的准备。
2. 开发设置
2.1 添加支付能力
在微信开发者工具中，找到 app.json 文件，添加以下内容：
```
{
"plugins": {
"wxpayPlugin": {
"version": "版本号",
"provider": "提供者 URL"
}
}
}
```
其中，版本号和提供者 URL 相应填写。
2.2 引入 wx.requestPayment 接口
使用微信支付，需要调用 wx.requestPayment 接口。在页面中引入该接口：
```
//index.js
import wxpay from 'wxpayPlugin'
Page({
data: {
orderId: '',
paySign: '',
nonceStr: '',
timeStamp: ''
},
pay: function() {
wx.requestPayment({
timeStamp: this.data.timeStamp,
nonceStr: this.data.nonceStr,
package: 'prepay_id=' + this.data.orderId,
signType: 'MD5',
paySign: this.data.paySign,
success: function(res) {
console.log(res)
},
fail: function(res) {
console.log(res)
}
})
}
})
```
3. 后台设置
3.1 获取统一下单接口数据
在后台服务器中，需要调用微信支付的统一下单接口，获取一些支付必要的数据。调用方法如下：
```
const getPaymentData = async (ctx, body, openid, total_fee) => {
//生成随机数
const nonce_str = String(Math.random()).slice(2, 15);
// 获取ip
const ip = ctx.request.ip.replace(/(^\d+\.\d+\.\d+\.\d+).*/, '$1');
// 获取时间戳
const timeStamp = String(Date.now()).slice(0, 10);
const appid = 'YOUR_APPID'; // 小程序 appid
const mch_id = 'YOUR_MCH_ID'; // 商户号
const params = {
appid,
body,
mch_id,
nonce_str,
notify_url: 'https://www.example.com/wechat/pay/notify', // 回调地址，需自行配置
openid,
out_trade_no: nonce_str + String(Date.now()).slice(0, -4),
spbill_create_ip: ip,
total_fee: total_fee * 100,
trade_type: 'JSAPI'
};
const paramsKeys = Object.keys(params).sort();
let string = '';
for (let i = 0, len = paramsKeys.length; i < len; i++) {
string += (paramsKeys[i] + '=' + params[paramsKeys[i]] + '&')
}
string += 'key=YOUR_KEY'; // 商户平台支付 API 密钥，需自行申请
params.sign = md5(string).toUpperCase(); // 生成签名
let res;
try {
res = await axios.post('https://api.mch.weixin.qq.com/pay/unifiedorder', buildXML(params), { httpsAgent });
} catch (e) {
throw e;
}
const result = await parseXML(res.data);
if (result.return_code === 'SUCCESS' && result.result_code === 'SUCCESS') {
const prepay_id = result.prepay_id;
const nonceStr = String(Math.random()).slice(2, 15);
const packageStr = `prepay_id=${prepay_id}`;
const paySign = getPaySign(nonceStr, packageStr, timeStamp);
return {
timeStamp,
nonceStr,
package: packageStr,
paySign
}
}
console.log(result);
}
```
该接口会返回一个包括 timeStamp、nonceStr、prepay_id 和 paySign 的对象，这些数据后续会在前端页面中用到。
4. 前端设置
4.1 调用后端接口获取支付数据
在前端中，需要调用后台的接口，获取支付数据。可以在页面中让用户点击支付按钮，触发调用后端接口的操作，代码如下：
```
//index.js
Page({
data: {
openid: '',
totalFee: ''
},
async pay() {
const res = await wx.cloud.callFunction({
name: 'login'
})
const openid = JSON.parse(res.result).openid
const { timeStamp, nonceStr, package, paySign } = await wx.cloud.callFunction({
name: 'getPayment',
data: {
openid,
totalFee: this.data.totalFee
}
}).then(res => res.result)
this.setData({
openid,
timeStamp,
nonceStr,
package,
paySign
})
}
})
```
其中，login 是获取用户 openid 的云函数。
4.2 调用微信支付接口
通过前面的步骤，我们已经获得了微信支付所需的数据，接下来就可以调用微信支付接口，发起支付操作了。代码如下：
```
//index.js
Page({
data: {
openid: '',
totalFee: ''
},
async pay() {
// 省略调用后端接口获取支付数据的代码
wx.requestPayment({
timeStamp: this.data.timeStamp,
nonceStr: this.data.nonceStr,
package: this.data.package,
signType: 'MD5',
paySign: this.data.paySign,
success: function(res) {
console.log(res)
},
fail: function(res) {
console.log(res)
}
})
}
})
```
总结
如上所述，接入微信支付功能需要完成如下几个步骤：
1. 获取商户号和 appid；
2. 配置支付证书；
3. 添加支付能力；
4. 引入 wx.requestPayment 接口；
5. 调用微信支付接口。
需要注意的是，微信支付涉及到商户私钥、支付 API 密钥等安全敏感信息，开发过程中需要注意信息的保密性和安全性。