个人理解微信小程序支付和微信支付二者所需的参数基本一致,一个是直接唤起微信支付程序,另一个是需要在小程序页面中转。
1、在H5投保页面区分当前环境是否在小程序。订单生成后走不同的支付方法
saveProposal(data).then(res => {
this.visible.loading = false;
if(res.code == 200){
let proposalNo = res.data.proposalNo
if(/miniProgram/i.test(userAgent)){ //判断是否是小程序
//小程序支付
appletPay({
data : {openid : data.openid,proposalNo:proposalNo},
success_url : encodeURIComponent(`${window.location.origin}${This.$config.success}?id=${proposalNo}&code=${productCode}`),
cancel_url : encodeURIComponent(`${window.location.origin}${This.$config.cancel}/${proposalNo}`)
})
}else{
//微信支付
pay({
data : {openid : data.openid,proposalNo:proposalNo},
success(res){
window.location.href = `${This.$config.success}/1?id=${proposalNo}&code=${productCode}`
},
cancel(res){
window.location.href = `${This.$config.cancel}/${proposalNo}`
},
fail(res){
This.$toast('支付失败');
}
})
}
}else{
this.$toast(res.message)
}
})
2、通过后端支付接口获取支付所需要的参数 ,成功后跳转到小程序微信支付中间页面
//小程序支付
export function appletPay(opts){
let {data,success_url,cancel_url,fail} = opts;
//根据后端需要设置支付类型为小程序支付
data.payType = 'weixinspay'
//调用后端支付接口,获取微信支付参数。包括appid,签名方式等
getWxPay(data).then(res =>{
if(res.code == 200){
let data = encodeURIComponent(JSON.stringify(res.content))
wx.miniProgram.navigateTo({
url : `/pages/pay/index?data=${data}&success_url=${success_url}&cancel_url=${cancel_url}`
})
}else{
Toast(res.message)
}
})
}
3、在小程序中pay/index.js中获取拿到的支付参数,唤起微信支付
// pages/pay/index.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
/*
* options.data 支付参数
* options.success_url 支付成功回调地址
* options.cancel_url 取消支付回调地址
*/
const data = JSON.parse(decodeURIComponent(options.data) || "{}"); //支付的参数
wx.requestPayment(
{
"timeStamp":data.timeStamp,
"nonceStr": data.nonceStr,
"package": data['package_'],
"signType": "MD5",
"paySign": data.paySign,
"success":function(res){
if(res.errMsg == 'requestPayment:ok'){
wx.redirectTo({
url: `/pages/success/index?weburl=${options.success_url}`
})
console.log('requestPayment:ok',options.success_url)
}
},
"fail":function(res){
if(res.errMsg == 'requestPayment:fail cancel'){
wx.redirectTo({
url: `/pages/cancel/index?weburl=${options.cancel_url}`
})
console.log('requestPayment:fail cancel',options.cancel_url)
}
},
"complete":function(res){}
})
}
})
4、支付成功或支付失败后跳转的页面,如果是小程序自己的页面直接跳转。如果是外部引入公共的成功或失败页面,则需要在小程序中通过中间页的形式,跳转至相应页面
//通过小程序中间页跳转
// "/pages/success/index"小程序中间页,weburl为实际跳转地址
wx.redirectTo({
url: `/pages/success/index?weburl=${options.success_url}`
})
在小程序成功页面中监听传入的跳转地址,通过web-view跳转至目标页面
<!--pages/success/index.wxml-->
<web-view src="{{url}}"></web-view>
// pages/success/index.js
Page({
/**
* 页面的初始数据
*/
data: {
url:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
if(options.weburl){
const weburl = decodeURIComponent(options.weburl)
this.setData({
url:weburl
})
}
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
wx.reLaunch({
url: `/pages/index/index`
})
}
})