小程序内嵌webview触发小程序原生方法进行支付
发表时间:2020-10-28
发布人:葵宇科技
浏览次数:125
小程序内嵌webview无法进行h5的支付 所以需要通过webview触发小程序的支付 具体操作如下
1.h5部分代码
首先引入jweixin
然后判断一下是否为小程序环境 代码如下
// 判断环境
function checkMiniProgram() {
// 判断是否在微信小程序中打开
var ua = window.navigator.userAgent.toLowerCase();
let that = this;
if(ua.match(/MicroMessenger/i) == 'micromessenger'){ //判断是否是微信环境
//微信环境下
wx.miniProgram.getEnv(function(res) {
if (res.miniprogram) {
// 小程序环境下逻辑
console.log('小程序环境下逻辑');
}else {
//非小程序环境下逻辑
console.log('非小程序环境下逻辑');
}
})
}else{
//非微信环境逻辑
console.log('非微信环境逻辑');
}
}
然后在小程序环境中触发小程序行为
function miniProgramPay() {
var pageParams = encodeURIComponent(JSON.stringify('参数'));
var url = `../payMent/payMent?pageParams=${pageParams}`;//支付的路径
wx.miniProgram.navigateTo({
url: url
});
}
encodeURIComponent 这里是防止参数中带有?或者= 导致小程序参数被截断
然后触发小程序的页面跳转后 在支付页接参数
2.小程序部分代码
let params = {};
if(options.pageParams) {
params = JSON.parse(decodeURIComponent(options.pageParams));
}
因为h5中进行了encodeURIComponent 所以需要在小程序中decodeURIComponent
然后正常掉小程序方法支付即可
需要返回上一级webview页面的话 可以通过
let pages = getCurrentPages();
let prevPage = pages[pages.length - 2]; // 获取上一页
在当前的请求接口中获取要替换webview的页面链接 然后进行
prevPage.setData({
pageUrl : resultUrl //resultUrl为支付页返回的webview路径 pageUrl为webView页面的参数
})
wx.navigateBack({ //返回上一级页面
delta: 0,
})
即可替换上一级页面链接并返回webview页面。