好的，以下是一个简单的微信小程序支付的 demo，你可以参考一下：
1. 在微信公众平台申请开通支付功能，并获取商户号、appid、密钥等信息。
2. 在小程序的 app.json 文件中添加以下配置：
```
{
"pages": [
"pages/index/index",
"pages/pay/pay"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "支付测试",
"navigationBarTextStyle": "black"
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/index.png",
"selectedIconPath": "images/index_selected.png"
},
{
"pagePath": "pages/pay/pay",
"text": "支付",
"iconPath": "images/pay.png",
"selectedIconPath": "images/pay_selected.png"
}
]
},
"sitemapLocation": "sitemap.json"
}
```
3. 在 pages 目录下创建 pay 目录，并在其中新建 pay.js、pay.wxml、pay.wxss 三个文件。其中，pay.js 文件中的代码如下：
```
Page({
data: {
total_fee: 1, // 支付金额，单位为分
out_trade_no: '', // 商户订单号
nonce_str: '', // 随机字符串
time_stamp: '', // 时间戳
prepay_id: '', // 预支付交易会话标识
paySign: '' // 签名
},
onLoad: function () {
this.setData({
out_trade_no: this.getOutTradeNo(),
nonce_str: this.getNonceStr(),
time_stamp: this.getTimeStamp()
})
},
// 点击支付按钮触发的事件
pay: function () {
wx.request({
url: 'https://api.mch.weixin.qq.com/pay/unifiedorder', // 统一下单接口
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: {
appid: '你的appid',
body: '测试商品', // 商品描述
mch_id: '你的商户号',
nonce_str: this.data.nonce_str,
notify_url: '你的回调地址', // 支付完成后的回调地址
openid: '用户的openid',
out_trade_no: this.data.out_trade_no,
spbill_create_ip: '127.0.0.1',
total_fee: this.data.total_fee,
trade_type: 'JSAPI'
},
success: res => {
console.log(res.data)
const { nonce_str, prepay_id, sign } = res.data.xml
this.setData({
nonce_str,
prepay_id,
paySign: sign
})
this.payRequest()
},
fail: err => {
console.log(err)
}
})
},
// 调起微信支付
payRequest: function () {
wx.requestPayment({
timeStamp: this.data.time_stamp,
nonceStr: this.data.nonce_str,
package: `prepay_id=${this.data.prepay_id}`,
signType: 'MD5',
paySign: this.data.paySign,
success: res => {
console.log(res)
wx.showToast({
title: '支付成功',
icon: 'success'
})
},
fail: err => {
console.log(err)
wx.showToast({
title: '支付失败',
icon: 'none'
})
}
})
},
// 生成商户订单号
getOutTradeNo: function () {
const now = new Date()
const year = now.getFullYear()
const month = now.getMonth() + 1
const date = now.getDate()
const hours = now.getHours()
const minutes = now.getMinutes()
const seconds = now.getSeconds()
const milliseconds = now.getMilliseconds()
return `${year}${month}${date}${hours}${minutes}${seconds}${milliseconds}`
},
// 生成随机字符串
getNonceStr: function () {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
const maxPos = chars.length
let str = ''
for (let i = 0; i < 32; i++) {
str += chars.charAt(Math.floor(Math.random() * maxPos))
}
return str
},
// 生成时间戳
getTimeStamp: function () {
return parseInt(new Date().getTime() / 1000).toString()
}
})
```
4. 在 pay.wxml 文件中添加以下代码：
```
<view class="container">
<view class="content">
<view class="item">
<text class="label">商品名称：</text>
<text class="value">测试商品</text>
</view>
<view class="item">
<text class="label">支付金额：</text>
<text class="value">{{ total_fee / 100 }}元</text>
</view>
<view class="btn" bindtap="pay">确认支付</view>
</view>
</view>
```
5. 在 pay.wxss 文件中添加以下样式：
```
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.content {
width: 80%;
padding: 20rpx;
background-color: #fff;
border-radius: 10rpx;
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}
.item {
display: flex;
margin-bottom: 20rpx;
}
.label {
font-size: 30rpx;
color: #999;
width: 200rpx;
padding-right: 20rpx;
}
.value {
font-size: 30rpx;
}
.btn {
display: flex;
justify-content: center;
align-items: center;
height: 80rpx;
line-height: 80rpx;
background-color: #3cc51f;
color: #fff;
font-size: 32rpx;
border-radius: 10rpx;
margin-top: 40rpx;
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}
```
以上就是一个简单的微信小程序支付的 demo，你可以参考一下。需要注意的是，使用微信支付时需要注意安全问题，尤其是在客户端存储密钥等敏感信息时，需要加密存储。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
6072
