先说下这个的背景吧。。。
本人是做java后端的,自认为还有很大的发展空间(嘻嘻,你懂的),看过一段时间的小程序可是没有支付成功。。。最近公司要做小程序项目,老大让我看下小程序,折腾了好几天,参照着https://blog.csdn.net/zhourenfei17/article/details/77765585 这篇博客,终于弄出来了。。。。。。。
虽然,效率还有很大提升空间,但是还是在这里做下记录,希望能后来,的人能有些参考。
上面链接的博文是有java代码的(其实原文中也有小程序端代码),我这里只贴一下小程序端的代码吧。
// pages/pay/pay.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.login({
success: function (res) {
var service_url = 'https://04f19bb6.ngrok.io/pay/weixin/login?code=' + res.code;//需要将服务器域名添加到小程序的request合法域名中,而且必须是https开头 //这里的地址是我用ngrok 代理本机的地址(不知道ngrok 的同学可以百度下, 很简单)
wx.request({
url: service_url,
data: {
code: res.code
},
method: 'GET',
success: function (res) {
console.log(res);
if (res.data != null && res.data != undefined && res.data != '') {
wx.setStorageSync("openid", res.data.openid);//将获取的openid存到缓存中
}
var openid = res.data.openid;
var that = this;
wx.request({
url: 'https://04f19bb6.ngrok.io/pay/weixin/wxpay?openid=' + openid ,
data: {
},
method: 'GET',
success: function (res) {
console.log(res);
console.log(res.data.data.packge)
//小程序发起微信支付
wx.requestPayment({
timeStamp: res.data.data.timeStamp,//记住,这边的timeStamp一定要是字符串类型的,不然会报错,我这边在java后端包装成了字符串类型了
nonceStr: res.data.data.nonceStr,
package: res.data.data.package,
signType: 'MD5',
paySign: res.data.data.paySign,
success: function (event) {
// success
console.log(event);
wx.showToast({
title: '支付成功',
icon: 'success',
duration: 2000
});
},
fail: function (error) {
// fail
console.log("支付失败")
console.log(error)
},
complete: function () {
// complete
console.log("pay complete")
}
});
}
});
}
});
}
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
})
小程序端的代码我略微做出了写改正就是,把 博主原来的
doWxPay(res.data)这个函数直接写在的 onload()函数中。
其他需要注意的地方就是,小程序我新建了一个pay 的page,在app.json中把它放在了最上面,所以可以直接调用到该方法。。
期间遇到的写bug:
1 注意商户的支付秘钥和小程序的秘钥是不同的,注意在java代码中填写正确。
2 其他的坑就是在返回参数的时候少写= 调用微信 支付借口失败,显示没有支付金额。。其实是
"prepay_id=" 要带等号。