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頁面在手機端調試問題