小程序 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是你小程序里面页面的路由
    });
});

 

转载于:https://www.cnblogs.com/luffyc/p/10573321.html