• 小程序内部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页面在手机端调试问题

  • 相关阅读:
    spring框架里面处理中文匹配
    日常问题记录--使用fiddler自动响应jsonp结构的响应
    linux命令--pamp
    每天一个linux命令--nice命令
    阿里RAP+fiddler实现app原生应用的cgi数据mock----- (二)添加mock规则,随机返回4中类型(不同长度)的数据
    父子组件之间传递数据
    redux-API(二)
    redux数据流
    Redux 的基础概念-API
    react-redux要点梳理
  • 原文地址:https://www.cnblogs.com/lst619247/p/14178250.html
Copyright © 2020-2023  润新知