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