说到微信小程序开发,是真的气不打一处来,微信开发文档真的很坑爹,需要蒙、猜,尤其是对于微信开发的刚入行的同行来说,真的是有点难度,而且踩坑不断,连环坑层出不穷,真的是无力吐槽,废话少说,本篇博文来话一下微信小程序开发的微信支付功能的实现。
这里不再说微信小程序的微信支付的后端处理部分,如有后端的开发人员看到本篇博文请直接跳过。直接说说微信小程序前端部分集成微信支付的部分,如有不懂的地方,或者内容有错误的地方欢迎指出来,不胜感激。
网上有太多的无良教程,关于微信支付的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”,欢迎关注!
三掌柜的微信公众号:
三掌柜的新浪微博: