需求體現：

在小程序里面，點擊查看用戶簽訂的協議，跳轉到協議詳情頁，剛好協議詳情頁在另一個H5項目的已經有，所以就想直接跳轉過去，不必再重復開發小程序版本的模塊

實現H5頁面跳轉

小程序里面加載H5頁面，需要嵌在web-view里面，注意：一個項目只能有一個。 例如：在小程序里面打開百度網頁 在小程序項目里面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頁面返回小程序

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

window.wx.miniProgram.navigateTo({

url: `/page/account/index`,

});

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

小程序和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，看錯誤來源哪里。謹記。