前言:
微信小程序正常来说只能使用微信支付,但是因为微信支付目前无法使用,所以产生了此需求。
1、我们需要一个正常使用的微信小程序
2、把小程序的主要功能页面复制一套H5页面,并单独写一个支付页面
3、在支付宝开放平台注册支付宝商家商户并配置信息(配置信息这一步一般由后端来做,因为他要根据官方API来写回调接口)
4、H5系统使用和小程序一样的接口API,确保两边的token是一致的可以通用
5、在小程序后台配置webview域名,确保小程序可以跳转到H5页面
6、小程序产生支付行为,把订单预支付接口返回的订单ID传递到webview页面
ini
const orderId = res.data.orderId;
// wx.setStorageSync('payFromId',orderId)
/* 订单跳转h5支付 */
wx.navigateTo({
url: `/pages/payWebview/index?id=${orderId}`,
})
orderId为预支付接口返回的订单id,将他拼接到小程序中的webview页面
javascript
onLoad(options) {
// let cartId =encodeURIComponent(wx.getStorageSync('payFrom'))
// console.log(decodeURIComponent(cartId));
if(options.id){
let token = wx.getStorageSync('token')//获取token
console.log('orderid',options.id); //打印传递的订单id
console.log('token',token);
//将订单id和token一块拼接到H5页面的支付页面
this.setData({
payUrl:`https://lgtesth5.qtxxkx.com/#/pages/Payment/Payment?id=${options.id}&token=${token}`
})
}
},
以上代码是小程序内的webview页面逻辑
7、H5页面解析网址携带的参数,并发起支付。
H5网页要做以下操作
首先获取当前页面的url路径,并将路径携带的参数解析出来,存token的操作是因为支付完成后要查看订单,这个接口需要验证token。
之后是发起支付宝H5支付 代码如下
因为支付宝网页支付返回的字段是一个html标签。所以我们需要在下个页面进行操作
javascript
onLoad(options) {
if (options.url) {
// console.log(options.url);
// const Form = JSON.parse(decodeURIComponent(options.url));
const Form = options.url;
console.log(Form);
this.formUrl = Form;
//将接口返回的Form表单显示到页面
document.querySelector('body').innerHTML = this.formUrl; // body对应上面的class
this.$nextTick(() => {
console.log(document.forms, 'form'); //跳转之前,可以先打印看看forms,确保后台数据和forms正确,否则,可能会出现一些奇奇怪怪的问题 ╮(╯▽╰)╭
document.forms['0'].submit(); //重点--这个才是跳转页面的核心,获取第一个表单并提交
});
} else {
const Form = uni.getStorageSync('Form'); //获取你本地存储的form表单渲染成页面
console.log(Form);
this.formUrl = Form;
//将接口返回的Form表单显示到页面
document.querySelector('body').innerHTML = this.formUrl; // body对应上面的class
this.$nextTick(() => {
console.log(document.forms, 'form'); //跳转之前,可以先打印看看forms,确保后台数据和forms正确,否则,可能会出现一些奇奇怪怪的问题 ╮(╯▽╰)╭
document.forms['0'].submit(); //重点--这个才是跳转页面的核心,获取第一个表单并提交
});
}
},