一个简单的微信小程序支付demo
微信小程序支付Demo
前言
本文将详细描述一个简单的微信小程序支付demo。该demo将演示如何在微信小程序中实现支付功能,包括获取openid、生成预付单、发起支付请求等步骤。
环境准备
* 微信开发者工具(v1.02或以上版本)
* 微信公众平台账号* 支付宝或微信支付商户账号demo结构
本demo的结构如下:
* `index.wxml`:首页,包含一个按钮用于触发支付流程* `payment.js`:支付逻辑脚本,负责获取openid、生成预付单、发起支付请求等操作* `config.js`:配置文件,存储微信公众平台和支付商户的相关信息index.wxml
```html
```
payment.js
```javascript// payment.jsPage({
data: {},
// 获取openid getOpenid: function() {
wx.cloud.callFunction({
name: 'getOpenid',
data: {},
success: res => {
console.log('openid:', res.result.openid);
this.setData({ openid: res.result.openid });
},
fail: err => {
console.error(err);
}
});
},
//生成预付单 createOrder: function() {
wx.cloud.callFunction({
name: 'createOrder',
data: { amount:0.01, openid: this.data.openid },
success: res => {
console.log('order_id:', res.result.order_id);
this.setData({ order_id: res.result.order_id });
},
fail: err => {
console.error(err);
}
});
},
// 发起支付请求 pay: function() {
wx.cloud.callFunction({
name: 'pay',
data: { order_id: this.data.order_id, openid: this.data.openid },
success: res => {
console.log('payment_id:', res.result.payment_id);
wx.showToast({ title: '支付成功' });
},
fail: err => {
console.error(err);
wx.showToast({ title: '支付失败', icon: 'none' });
}
});
},
payment: function() {
this.getOpenid();
setTimeout(() => {
this.createOrder();
setTimeout(() => {
this.pay();
},1000); // 等待createOrder完成后再发起支付请求 },1000);
},
});
```
config.js
```javascript// config.jsconst app = getApp();
module.exports = {
wxAppId: 'your_wx_app_id',
wxSecret: 'your_wx_secret',
alipayAppId: 'your_alipay_app_id',
alipayPrivateKey: 'your_alipay_private_key',
};
```
注意事项
* 本demo仅供参考,需要根据实际情况进行调整和完善。
* 需要在微信公众平台中配置相关信息,并且需要有支付商户账号。
* 需要在`config.js`文件中填写自己的微信公众平台和支付商户的相关信息。
总结
本文详细描述了一个简单的微信小程序支付demo。该demo演示了如何获取openid、生成预付单、发起支付请求等操作。需要注意的是,需要在微信公众平台中配置相关信息,并且需要有支付商户账号。