小程序内嵌webview触发小程序原生方法进行支付

小程序内嵌webview无法进行h5的支付 所以需要通过webview触发小程序的支付 具体操作如下

收线引入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 这里是防止参数中带有?或者= 导致小程序参数被截断

然后触发小程序的页面跳转后 在支付页接参数

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页面。