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

这篇具有很好参考价值的文章主要介绍了小程序使用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>文章来源地址https://www.toymoban.com/news/detail-775717.html

到了这里，关于小程序使用webview嵌套H5中使用iframe真机无法跳转 wx.miniProgram.navigateTo等失效问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！