小程序嵌套h5页面

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页面在手机端调试问题