小程序使用webview嵌套H5中使用iframe真机无法跳转 wx.miniProgram.navigateTo等失效问题

小程序使用webview嵌套H5真机无法跳转 wx.miniProgram.getEnv、wx.miniProgram.navigateTo等失效无响应问题分享
原因分析：由于页面使用了iframe导致在子页面中真机无法准确获取页面运行环境（开发者工具中无影响）；
解决方案：在调用方法前加一个 parent. 在父页面中调用方法即可正常运行；

wx.miniProgram.navigateTo完整流程：

1. 小程序端在app.json文件中，把需要跳转的文件路径添加进去

"pages": [

"pages/index/index",

"pages/test/test",

"pages/pay/pay"

]

2. H5页面端

(1) 引入jweixin-1.6.0.js
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
(2) 原因分析：由于页面使用了iframe导致在子页面中真机无法准确获取页面运行环境（开发者工具中无影响）；解决方案：在调用方法前加一个 parent. 在父页面中调用方法即可正常运行；parent.wx.miniProgram.navigateTo({
   url: url
});

完整示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小程序内嵌webview</title>
<style>
.btn {
font-size: 70px;
color: red;
}
</style>
</head>
<body>
<div id="OpenWx"></div>
<h1>我是webview里的h5页面</h1>
<a id="desc" class="btn" onClick="jumpPay()">点击支付</a>

let payOk = getQueryVariable("payOk");
console.log("payOk", payOk)

if(payOk){//支付成功
document.getElementById('desc').innerText="支持成功"
document.getElementById('desc').style.color="green"
}else{
document.getElementById('desc').innerText="点击支付"
}

//获取url里携带的参数
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
}

function jumpPay() {
let orderId = Date.now();//这里用当前时间戳做订单号（后面使用你自己真实的订单号）
let money = 1;//订单总金额（单位分）
let payData = {orderId: orderId, money: money};

let payDataStr = JSON.stringify(payData);//因为要吧参数传递给小程序，所以这里需要转为字符串
const url = '/pages/pay/pay';
parent.wx.miniProgram.navigateTo({
url: url
});
// console.log("点击了去支付", url)
console.log("点击了去支付")
}

</script>
</body>
</html>

小程序使用webview嵌套H5中使用iframe真机无法跳转 wx.miniProgram.navigateTo等失效问题

猜你喜欢