1. 程式人生 > 實用技巧 >小程式內部A頁面向內嵌H5頁面跳轉,並且傳參

小程式內部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頁面在手機端除錯問題