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