小程序內嵌H5頁面和小程序內部頁面互相傳參和內嵌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

<web-view src="{{url}}"></web-view>

小程序中內嵌H5容器頁面index.js　

Page({
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
   console.log(options);
   this.setData({
     url:'https://www.zhiyunyi.net/protocol.html?money='+options.mone+'&loadId='+options.loadId+''
   })
  },
}　

遠程H5頁面獲取參數JS代碼

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.首先引入

 

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

 

2.添加跳轉到小程序頁面的代碼，參數直接拼接　

 

 

wx.miniProgram.reLaunch({ url: '/pages/index/index?name=張三&age=11'});

小程序內部頁面代碼index.js

Page({

        onLoad: function (options) {

           //options 就是H5傳入的參數

        }

}）

3.內嵌H5頁面的調試　

1.首先引入

<script type="text/javascript" src="https://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.3.0"></script>

2.JS中添加如下代碼

window.vConsole = new window.VConsole();

3.再需要的地方打印console.log就可以了,這個方法特別適用遠程web頁面在手機端調試問題