微信小程序开发入门教程（三）-小程序云开发支付功能

吴歌發表於 2019-8-12 09:54:00

微信小程序开发入门教程（三）---小程序云开发支付功能

支付（shoukuan）功能真的很重要!由于我还没有商户号，以下代码未实际验证
1、服务端
进入云开发，新建云函数pay（应该也可以在开发者工具编写后上传）
编写后端代码index.js 这里用到第三方库wx-js-utils（https://github.com/lcxfs1991/wx-js-utils ）
<div class="cnblogs_code">
<pre>const cloud = require('wx-server-sdk');
const {
WXPay,
WXPayUtil
} = require('wx-js-utils');

cloud.init();

const appId = 'wx****************'; // 小程序appid
const mchId = '152*******'; // 商户号
const key = '****************************'; // 商户密钥
const timeout = 10000; // 超时时间

let wxpay = new WXPay({
appId,
mchId,
key,
timeout: 10000,
signType: 'MD5',
useSandbox: false // 不使用沙箱环境
});

exports.main = async(event, context) => {
const curTime = Date.now();
const tradeNo = `${event.userInfo.openId.substr(-5)}-${curTime}`; // 生成订单号
const body = '测试订单'; // 订单商品名称
const spbill_create_ip = '127.0.0.1'; // 发起支付的IP
const notify_url = 'http://www.qq.com'; // 回调地址
const total_fee = event.price * 100; // 支付金额，单位为分
const time_stamp = '' + Math.ceil(Date.now() / 1000);
const out_trade_no = `${tradeNo}`;
let orderParam = {
body,
spbill_create_ip,
notify_url,
out_trade_no,
total_fee,
openid: event.userInfo.openId,
trade_type: 'JSAPI',
timeStamp: time_stamp,
};
const {
return_code,
result_code,
...restData
} = await wxpay.unifiedOrder(orderParam); // 统一下单
if (return_code === 'SUCCESS' && result_code === 'SUCCESS') {
const {
 prepay_id,
 nonce_str
} = restData;
const sign = WXPayUtil.generateSignature({
 appId,
 nonceStr: nonce_str,
 package: `prepay_id=${prepay_id}`,
 signType: 'MD5',
 timeStamp: time_stamp
}, key); // 签名
return {
 code: 0,
 data: {
 out_trade_no,
 time_stamp,
 ...restData,
 sign
 }
}
}
return {
code: -1
}
};</pre>
</div>
2、小程序
app.js
<div class="cnblogs_code">
<pre>App({
onLaunch() {
wx.cloud.init({
 traceUser: true,
});
}
});</pre>
</div>
index.wxml
<div class="cnblogs_code">
<pre><view class='container'>
<input class='ipt' value='{{price}}' bindinput='onInput' type='digit' />
<button class='btn-pay' bindtap='pay'>Pay</button>
</view></pre>
</div>
index.wxss
<div class="cnblogs_code">
<pre>.container {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
}

.ipt {
border-bottom: 1px solid #f1f2f3;
text-align: center;
font-size: 50rpx;
font-weight: bold;
width: 220rpx;
color: #17233d;
}

.btn-pay {
margin-top: 100rpx;
padding: 14rpx 100rpx;
line-height: 1.5em;
font-size: 36rpx;
background: #5cadff;
color: #fff;
}

.btn-pay::after {
border: 0;
}</pre>
</div>
index.js
<div class="cnblogs_code">
<pre>Page({
data: {
price: 0.01
},

onInput(event) {
this.setData({ price: event.detail.value });
},

pay() {
const price = parseFloat(this.data.price).toFixed(2);
wx.showLoading({
 title: ''
});
wx.cloud.callFunction({
 name: 'pay', // 调用pay函数
 data: { price }, // 支付金额
 success: (res) => {
 wx.hideLoading();
 const { result } = res;
 const { code, data } = result;
 if (code !== 0) {
 wx.showModal({
 title: '提示',
 content: '支付失败',
 showCancel: false
 });
 return;
 }
 console.log(data);
 wx.requestPayment({
 timeStamp: data.time_stamp,
 nonceStr: data.nonce_str,
 package: `prepay_id=${data.prepay_id}`,
 signType: 'MD5',
 paySign: data.sign,
 success: () => {
 wx.showToast({title: '支付成功'});
 }
 });
 },
 fail: (res) => {
 wx.hideLoading();
 console.log('FAIL');
 console.log(res);
 }
});
}
});</pre>
</div>
最终效果:页面显示0.01元和pay按钮。
 
补充：参考https://www.jianshu.com/p/bd96741287a8和https://blog.csdn.net/gf771115/article/details/100917779
还可以使用https://github.com/befinal/node-tenpay
还有：https://developers.weixin.qq.com/community/develop/article/doc/0004c4a50a03107eaa79f03cc56c13
 
参考：
https://juejin.im/post/5c876108e51d45543d2836e4
https://cloud.tencent.com/edu/learning/course-100005-1276
关于微信小程序认证问题 https://blog.csdn.net/forthejoker/article/details/79654610
下载github项目的一个方法 https://blog.csdn.net/qq_35433926/article/details/89415895
支付官方文档 https://pay.weixin.qq.com/wiki/doc/api/index.html
https://www.jianshu.com/p/bd96741287a8 
来源：https://www.cnblogs.com/pu369/p/11338016.html

頁: [1]

琼殿技术论坛's Archiver

微信小程序开发入门教程（三）---小程序云开发支付功能