uni-app 微信支付集成指南
微信支付是中国最流行的在线支付方式之一，uni-app 提供了方便的微信支付接口，让开发者可以轻松地在应用中实现微信支付功能。下面我们将一步步地介绍如何在 uni-app 中集成微信支付。
准备工作
1. 微信开放平台账号:首先，你需要在微信开放平台注册一个账号，并且创建一个应用，用于接收支付回调。
2. 微信支付 API 密钥:在微信开放平台的应用管理页面中，可以找到微信支付 API 密钥，这个密钥将用于签名请求。
3. uni-app项目:确保你已经创建了一个 uni-app项目，并且安装了必要的依赖包。
步骤一：配置微信支付
在 `app.json` 文件中，添加以下配置：
```json{
"pages": [
// ...
],
"plugins": [
{
"name": "weixin-js-sdk",
"version": "^1.0.0"
}
]
}
```
这将安装微信 JS SDK 的依赖包。
步骤二：创建支付接口
在 `pages/index.js` 文件中，添加以下代码：
```javascriptexport default {
data() {
return {
payType: 'wx', // 支付类型（wx 或 app）
orderInfo: {} // 订单信息 }
},
methods: {
wechatPay() {
const that = this;
uni.showLoading({
title: '支付中...',
mask: true });
try {
let payType = this.payType;
if (payType === 'wx') {
// 微信支付 this.wxPay();
} else if (payType === 'app') {
// app 支付 this.appPay();
}
} catch (e) {
console.error(e);
uni.hideLoading();
}
},
wxPay() {
const that = this;
let orderInfo = this.orderInfo;
let payInfo = {
trade_type: 'JSAPI',
partnerid: 'your_partner_id', // 微信支付商户 ID prepay_id: '', // 预付款 ID nonce_str: '', // 随机字符串 package: 'Sign=WXPay'
};
let sign = this.getWxSign(payInfo);
payInfo.sign = sign;
uni.request({
url: ' method: 'POST',
data: payInfo,
success: (res) => {
console.log(res.data);
let prepay_id = res.data.prepay_id;
that.wxPayCallback(prepay_id);
},
fail: (e) => {
console.error(e);
uni.hideLoading();
}
});
},
appPay() {
const that = this;
let orderInfo = this.orderInfo;
let payInfo = {
trade_type: 'APP',
partnerid: 'your_partner_id', // 微信支付商户 ID prepay_id: '', // 预付款 ID nonce_str: '', // 随机字符串 package: 'Sign=WXPay'
};
let sign = this.getAppSign(payInfo);
payInfo.sign = sign;
uni.request({
url: ' method: 'POST',
data: payInfo,
success: (res) => {
console.log(res.data);
let prepay_id = res.data.prepay_id;
that.appPayCallback(prepay_id);
},
fail: (e) => {
console.error(e);
uni.hideLoading();
}
});
},
getWxSign(payInfo) {
const wxApi = this.$wxapi;
let nonceStr = payInfo.nonce_str;
let timestamp = Date.now();
let sign = wxApi.sign({
jsapi_ticket: 'your_jsapi_ticket',
noncestr: nonceStr,
timestamp: timestamp,
package: payInfo.package });
return sign;
},
getAppSign(payInfo) {
const appApi = this.$appapi;
let nonceStr = payInfo.nonce_str;
let timestamp = Date.now();
let sign = appApi.sign({
partnerid: 'your_partner_id',
noncestr: nonceStr,
timestamp: timestamp,
package: payInfo.package });
return sign;
},
wxPayCallback(prepay_id) {
const that = this;
uni.hideLoading();
// 微信支付回调处理 console.log('微信支付回调');
},
appPayCallback(prepay_id) {
const that = this;
uni.hideLoading();
// app 支付回调处理 console.log('app 支付回调');
}
}
}
```
步骤三：配置微信支付 API
在 `pages/index.js` 文件中，添加以下代码：
```javascriptexport default {
data() {
return {
wxApi: null,
appApi: null }
},
mounted() {
this.wxApi = new WxJsapi({
appId: 'your_app_id',
timestamp: Date.now(),
nonceStr: '',
signature: ''
});
this.appApi = new AppApi({
partnerid: 'your_partner_id'
});
}
}
```
步骤四：测试支付
在 `pages/index.js` 文件中，添加以下代码：
```javascriptexport default {
data() {
return {
payType: 'wx', // 支付类型（wx 或 app）
orderInfo: {} // 订单信息 }
},
methods: {
wechatPay() {
const that = this;
uni.showLoading({
title: '支付中...',
mask: true });
try {
let payType = this.payType;
if (payType === 'wx') {
// 微信支付 this.wxPay();
} else if (payType === 'app') {
// app 支付 this.appPay();
}
} catch (e) {
console.error(e);
uni.hideLoading();
}
},
wxPay() {
const that = this;
let orderInfo = this.orderInfo;
let payInfo = {
trade_type: 'JSAPI',
partnerid: 'your_partner_id', // 微信支付商户 ID prepay_id: '', // 预付款 ID nonce_str: '', // 随机字符串 package: 'Sign=WXPay'
};
let sign = this.getWxSign(payInfo);
payInfo.sign = sign;
uni.request({
url: ' method: 'POST',
data: payInfo,
success: (res) => {
console.log(res.data);
let prepay_id = res.data.prepay_id;
that.wxPayCallback(prepay_id);
},
fail: (e) => {
console.error(e);
uni.hideLoading();
}
});
},
appPay() {
const that = this;
let orderInfo = this.orderInfo;
let payInfo = {
trade_type: 'APP',
partnerid: 'your_partner_id', // 微信支付商户 ID prepay_id: '', // 预付款 ID nonce_str: '', // 随机字符串 package: 'Sign=WXPay'
};
let sign = this.getAppSign(payInfo);
payInfo.sign = sign;
uni.request({
url: ' method: 'POST',
data: payInfo,
success: (res) => {
console.log(res.data);
let prepay_id = res.data.prepay_id;
that.appPayCallback(prepay_id);
},
fail: (e) => {
console.error(e);
uni.hideLoading();
}
});
},
getWxSign(payInfo) {
const wxApi = this.$wxapi;
let nonceStr = payInfo.nonce_str;
let timestamp = Date.now();
let sign = wxApi.sign({
jsapi_ticket: 'your_jsapi_ticket',
noncestr: nonceStr,
timestamp: timestamp,
package: payInfo.package });
return sign;
},
getAppSign(payInfo) {
const appApi = this.$appapi;
let nonceStr = payInfo.nonce_str;
let timestamp = Date.now();
let sign = appApi.sign({
partnerid: 'your_partner_id',
noncestr: nonceStr,
timestamp: timestamp,
package: payInfo.package });
return sign;
},
wxPayCallback(prepay_id) {
const that = this;
uni.hideLoading();
// 微信支付回调处理 console.log('微信支付回调');
