zoukankan      html  css  js  c++  java
  • 小程序 web-view 嵌套的网页跳转到小程序内部页面 实现无缝连接

    需要在H5页面被作出判断和处理  点击事件发生时跳转到小程序内部页面

    1.引入小程序提供的JS

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

    2.通常情况下一个H5页面可能应用到多个活动场景中 并不止在小程序中使用

       这时候就需要在小程序里面加入一个参数作为判断 (以下代码中参数名为channel=‘wechat’)

    小程序中:

    onLoad: function (options) {
        var url = '';               //此处的url是你的H5页面的网址
        if(url.indexOf('?')>0){     //在这儿添加参数 以便于进入H5页面时好做判断
          this.url = url + '&channel=wechat'
        }else{
          this.url = url + '?channel=wechat'
        }
        this.setData({
          url: this.url
        })
      },
    <web-view src="{{ url }}"></web-view>

    H5页面中

    function GetQueryString(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 channel = GetQueryString("channel");
    $(document).on('click', '.go', function() {if (channel && channel == 'wechat') {
        wx.miniProgram.navigateTo({
          url: '',    //此处的url是你小程序里面页面的路由
        });
      } 
    });

    3.如果该H5页面只用在小程序里面 则不需要做判断了 直接跳转

    H5页面中:

    $(document).on('click', '.go', function() {
        wx.miniProgram.navigateTo({
          url: '',    //此处的url是你小程序里面页面的路由
        });
    });
  • 相关阅读:
    Codevs1684 垃圾陷阱
    Codevs1540银河英雄传说[并查集]
    Poj1182食物链[并查集]
    树的顺序遍历的应用
    树的顺序遍历
    ARTS打卡
    定位iOS代码中崩溃的位置
    leetcode 24
    leetcode 24
    Drafter简单介绍
  • 原文地址:https://www.cnblogs.com/luffyc/p/10573321.html
Copyright © 2011-2022 走看看