1.小程序内部A页面向内嵌H5页面跳转，并且传参
小程序中A页面代码JS代码
Page({
toPtol(e){
const id=e.currentTarget.dataset[\'id\'];
const loadId=e.currentTarget.dataset[\'loadid\'];
console.log(loadId)
wx.navigateTo({
url: \'/pages/protocol/index?money=32132&loadId=\'+loadId
})
},
}）
小程序中内嵌H5容器页面index.wxml（放入小程序页面的wxml）
|
1
|
<web-view src="{{url}}"></web-view>
|
小程序中内嵌H5容器页面index.js (进入微信页面之后，加载是进行页面的参数获取)
|
1
2
3
4
5
6
7
8
9
10
11
|
Page({ /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options);
this.setData({
url:\'https://www.zhiyunyi.net/protocol.html?money=\'+options.mone+\'&loadId=\'+options.loadId+\'\'
})
},
} |
远程H5页面获取参数JS代码
|
1
2
3
4
5
6
7
8
|
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
var r = window.location.search.substr(1).match(reg)
if (r != null) return unescape(r[2])
return null
}var loadId =getUrlParam(\'loadId\')
console.log(loadId)
|
2.H5页面向小程序传参
内嵌H5JS代码
1.首先引入
|
1
|
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
|
2.添加跳转到小程序页面的代码，参数直接拼接
|
1
|
wx.miniProgram.reLaunch({ url: \'/pages/index/index?name=张三&age=11\'});
|
小程序内部页面代码index.js
|
1
|
Page({ |
onLoad: function (options) {
//options 就是H5传入的参数
}
|
1
|
|
1.小程序内部A页面向内嵌H5页面跳转，并且传参
小程序中A页面代码JS代码
Page({
toPtol(e){
const id=e.currentTarget.dataset[\'id\'];
const loadId=e.currentTarget.dataset[\'loadid\'];
console.log(loadId)
wx.navigateTo({
url: \'/pages/protocol/index?money=32132&loadId=\'+loadId
})
},
}）
小程序中内嵌H5容器页面index.wxml
|
1
|
<web-view src="{{url}}"></web-view>
|
小程序中内嵌H5容器页面index.js
|
1
2
3
4
5
6
7
8
9
10
11
|
Page({ /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options);
this.setData({
url:\'https://www.zhiyunyi.net/protocol.html?money=\'+options.mone+\'&loadId=\'+options.loadId+\'\'
})
},
} |
远程H5页面获取参数JS代码
|
1
2
3
4
5
6
7
8
|
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
var r = window.location.search.substr(1).match(reg)
if (r != null) return unescape(r[2])
return null
}var loadId =getUrlParam(\'loadId\')
console.log(loadId)
|
2.H5页面向小程序传参
内嵌H5JS代码
1.首先引入
|
1
|
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
|
2.添加跳转到小程序页面的代码，参数直接拼接
|
1
|
wx.miniProgram.reLaunch({ url: \'/pages/index/index?name=张三&age=11\'});
|
小程序内部页面代码index.js
|
1
|
Page({ |
onLoad: function (options) {
//options 就是H5传入的参数
}
|
1
|
|
3.内嵌H5页面的调试
1.首先引入
|
1
|
<script type="text/javascript" src="https://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.3.0"></script>
|
2.JS中添加如下代码
|
1
|
window.vConsole = new window.VConsole();
|
3.再需要的地方打印console.log就可以了,这个方法特别适用远程web页面在手机端调试问题