说到微信小程序开发，是真的气不打一处来，微信开发文档真的很坑爹，需要蒙、猜，尤其是对于微信开发的刚入行的同行来说，真的是有点难度，而且踩坑不断，连环坑层出不穷，真的是无力吐槽，废话少说，本篇博文来话一下微信小程序开发的微信支付功能的实现。
这里不再说微信小程序的微信支付的后端处理部分，如有后端的开发人员看到本篇博文请直接跳过。直接说说微信小程序前端部分集成微信支付的部分，如有不懂的地方，或者内容有错误的地方欢迎指出来，不胜感激。
网上有太多的无良教程，关于微信支付的openid讲解不详细，根本就没说前端自己处理获取openid是多么的不安全，多么的危险。那么，在这里可以明确的告诉大家，如果想让公司的业务不出现损失，防范于未然，还是直接建议你的上司，不要听后台的一言之词，因为有时候后台嫌麻烦就不想处理这些逻辑，获取openid的正确步骤是：前端通过wx.login(Object object)获取登录凭证code，然后根据后台提供的接口把code发送给后台，后台从微信官方后台获取openid、session_key等信息，最后前端根据后台返回的timeStamp 、nonceStr 、package、paySign等这些参数，去请求微信支付的系统方法wx.requestPayment(Object object)，最后拉起来微信支付的接口去付款。
先把前端需要调用的几个方法进行分离讲解，最后面在进行组合使用的介绍。大概代码步骤如下所示：
1、获取登录凭证code的方法
wx.login({
success: function (res) {
console.log("获取code",res.code); //res.code就是获取到的登录凭证code
}
});
2、请求自己后台的接口获取微信支付需要传的timeStamp 、nonceStr 、package、paySign等参数
let url = `https://iot..cn/api/mobile/payment/toPay?code=${res.code}`;
const params = {
code: res.code,
}
pay(url, params).then(res => {
const { code, data, msg } = res;
if (code = 200) { //res里面就是后台返回的timeStamp 、nonceStr 、package、paySign等参数数据
}
3、调用微信支付的方法
wx.requestPayment({
timeStamp: data.timeStamp,
nonceStr: data.nonceStr,
package: data.package,
signType: data.signType,
paySign: data.sign,
success(res) {
wx.showModal({
title: '支付成功',
showCancel: false,
success: () => {
wx.redirectTo({
url: "../home/home",
})
// wx.navigateBack()
}
})
},
fail(res) {
wx.showModal({
title: '支付失败',
content: res,
showCancel: false
})
}
})
以上三个方法是拆分了实现微信支付功能的步骤，下面再来把完整的步骤整合在一起，具体如下所示：
payCost: function () { //这是在支付按钮的点击事件里面进行支付处理
var that = this;
const {
id
} = this.data.detail; //登陆获取code
wx.login({
fail() {
wx.showToast({
title: '微信登录失败'
})
},
success: async function (res) {
// console.log("获取code", res.code);
if (!res.code) {
wx.showToast({
title: '微信登录失败，无法调起支付',
})
return;
}
let url = `https://iot..cn/api/mobile/payment/toPay?code=${res.code}`;
const params = {
code: res.code,
}
wxPay(url, params).then(res => {
const { code, data, msg } = res;
if (code != 200) {
wx.showToast({
title: msg,
});
return;
}
wx.requestPayment({
timeStamp: data.timeStamp,
nonceStr: data.nonceStr,
package: data.package,
signType: data.signType,
paySign: data.sign,
success(res) {
wx.showModal({
title: '支付成功',
showCancel: false,
success: () => {
// wx.navigateBack()
}
})
},
fail(res) {
wx.showModal({
title: '支付失败',
content: res,
showCancel: false
})
}
})
}).cache(err => {
wx.showModal({
title: '支付失败',
content: '请求支付信息失败！' + err.message
})
});
}
})
},
以上就是本章全部内容，欢迎关注三掌柜的微信公众号“iOS开发by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！
三掌柜的微信公众号：
三掌柜的新浪微博：
