[筆記]實現小程序和H5頁面之間互相跳轉

1、背景

需求背景是這樣的，在小程序裏面，點擊查看用戶簽定的協議，跳轉到協議詳情頁，恰好協議詳情頁在另外一個H5項目的已經有，因此就想直接跳轉過去，避免再開發小程序版本的協議詳情頁

2、小程序跳轉H5頁面

小程序裏面運行H5頁面，須要嵌在web-view裏面，注意：一個項目只能有一個。 Demo:在小程序裏面打開百度網頁 在小程序項目裏面src/pages/新建一個webview的文件夾，含有wxml/wxss/json/js

wxml：
<web-view src="{{ src }}"></web-view>
複製代碼

js：在onLoad裏面獲取到url這個參數，而後賦值給data，這樣在wxml裏面就能取到src的值。
Page({
	data: {
		url: '',
	},
	onLoad: function (param) {
		this.setData({
			url: decodeURIComponent(param.url),
		})
	}
});
複製代碼

json/wxss是空文件就能夠了。
在小程序的頁面跳轉到H5頁面的寫法

wx.navigateTo({
    url: '../webview/index?url=https://www.baidu.com/'
});
複製代碼

這樣就成功實現從小程序跳轉到H5頁面。

3、H5頁面返回小程序

從H5頁面返回小程序頁面，須要使用微信SDK提供的跳轉方法。

window.wx.miniProgram.navigateTo({
    url: `/page/account/index`,
 });
複製代碼

使用微信的SDK方法，須要先發送簽名驗證wx.config。

4、小程序和H5互跳遇到的坑

1. 【問題描述】wx.miniProgram.navigateTo中url沒法跳轉問題
   【問題解決】:app.json中配置的tabBar與wx.navigateTo中的url引用相同頁面致使
   首先pages/account/index這個路徑在app.json已經存在，也就是當前從H5頁面window.wx.miniProgram.navigateTo(url)的url已經和app.json的同樣。此時是不能經過這個方式跳轉，而是要改爲window.wx.miniProgram.reLaunch(url)

總結：若是url在app.json已定義，則使用reLaunch跳轉，若是沒有，則使用miniProgram.navigateTo(url)

2. 【問題描述】在小程序裏面跳轉到H5協議詳情頁的時候，進入了系統錯誤頁（項目裏定義好的錯誤頁），當我如今微信公衆號打開該協議詳情頁，此時再從小程序進入，不會出現。
   【問題解決】這裏我判斷是跟登陸態有關係，由於我先訪問一下公衆號，此時瀏覽器裏有了登陸態，因此在小程序裏面訪問協議詳情頁不會進入系統錯誤頁。
   定位問題過程：H5頁面是vue頁面，先從路由文件/routes/index.js開始debugger，果真就在登陸的js裏面找到問題，查看登陸的js裏面有一個先會登出的過程，而後再login（這裏是由於不一樣券商的緣由，須要logout清除上一個券商的數據，哈哈，流水帳，否則越記越長，不展開咯）在登陸logout的過程，此時該cgi拋出異常，恰好被全局捕獲，因此進入了系統錯誤頁。 後面的解決方法，是在登出的時候try catch捕獲異常，不要把異常被全局捕獲。

   try {await request('logout.cgi')} catch(e) {console.log('error')}
   複製代碼

   記下問題2，是想跟本身說，bugger常常有，遇到了就一個個地看debugger，看錯誤來源哪裏。謹記在心。