//H5
我們用vue構建一個嵌入頁面。在這里我們用vue/cli 3.0來搭建我們的項目，vue/cli 3.0需要vue2.0以及webpack4.0以上的版本，還需要node.js的環境
因此我們需要在全局安裝vue webpack 以及 vue/cli
1.下載vue cli 3.0
分別執行
npm install -g vue
npm install -g webpack
npm install -g @vue/cli（可以通過vue serve檢查是否下載安裝成功）
2.創建一個vue項目
執行vue create App
3.選擇一個preset，一個是默認的babel+ESLint ，另一個是手動選項的。選擇手動選項，有babel，TS，CSS工具，router,Vuex等，根據自己的需求選擇合適的。
這里我選擇的是babel，router，Vuex，CSS（css我選擇的是stylus），一直回車即可。
4.創建成功后會形成一個App文件夾，此時所有的配置以及webpack配置都已完成，cd App文件夾執行npm run serve即可運行項目，打包的話可以直接npm run build會產生一個dist文件
調整 webpack 配置最簡單的方式就是在 vue.config.js 中的 configureWebpack 選項提供一個對象：
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
new MyAwesomeWebpackPlugin()
]
}
}
該對象將會被 webpack-merge 合並入最終的 webpack 配置。
5.在.Vue文件中編寫H5頁面即可
微信小程序進入H5頁面時，直接用<web-view src="{{url}}">跳轉即可，路徑后面可以添加需要傳入H5頁面的簡單數據等。
坑①：跳轉時要新建一個page頁面坐中間跳轉用，如果直接在需要跳轉的當前頁面添加web-view，通過判斷wx-if或者hidden判斷web-view是否顯示渲染會有問題。
如果用wx-if判斷，當從H5界面通過wx.miniProgram.navigateBack({delta:1})返回小程序時會直接跳過跳轉頁面（入口頁面），進入tableBar頁面，因為web-view是完全侵入式的，wx-if仍然是在當前頁面（入口頁面），所以會返回當前頁面的上一層tableBar頁面。
如果用hidden判斷，會在tableBar頁面進入到入口頁面時會直接跳過入口頁面進入H5頁面。
H5頁面返回小程序頁面時，需要用到小程序的方法。所以需要注入WX的SDK，可以在Script標簽中注入<script src="https://res.wx.qq.com/open/js/jweixin-x.x.x.js"></script>，這種方法在vue中會提示錯誤讓下載某個包，所以可以不用引入SDK，直接npm install weixin-js-sdk --save，然后import wx from 'weixin-js-sdk'引入即可，然后可以通過wx.miniProgram.navigateBack({delta:1})返回到wx界面，此時可能會有疑問為什么不用wx.miniProgram里面的其他（switchTab，navigateTo，reLaunch，redirectTo）方法進行跳轉，首先switchTab不能攜帶參數且只能跳轉tabBar頁面，reLaunch會關閉所有頁面且入口頁面的back事件會變得卡頓，redirectTo也有同樣的卡頓問題，navigateTo貌似是最好的選擇，可以跳轉也可以傳參，可是它只能跳轉固定的page，而且有一個致命缺陷是，他與navigateBack配合使用之后回到上一個頁面，也就是H5頁面，所以在小程序頁面點擊back回退時，只會在小程序入口頁面和H5頁面切換。
坑①：跳轉時要新建一個page頁面坐中間跳轉用，如果直接在需要跳轉的當前頁面添加web-view，通過判斷wx-if或者hidden判斷web-view是否顯示渲染會有問題。
如果用wx-if判斷，當從H5界面通過wx.miniProgram.navigateBack({delta:1})返回小程序時會直接跳過跳轉頁面（入口頁面），進入tableBar頁面，因為web-view是完全侵入式的，wx-if仍然是在當前頁面（入口頁面），所以會返回當前頁面的上一層tableBar頁面。
如果用hidden判斷，會在tableBar頁面進入到入口頁面時會直接跳過入口頁面進入H5頁面。
H5頁面返回小程序頁面時，需要用到小程序的方法。所以需要注入WX的SDK，可以在Script標簽中注入<script src="https://res.wx.qq.com/open/js/jweixin-x.x.x.js"></script>，這種方法在vue中會提示錯誤讓下載某個包，所以可以不用引入SDK，直接npm install weixin-js-sdk --save，然后import wx from 'weixin-js-sdk'引入即可，然后可以通過wx.miniProgram.navigateBack({delta:1})返回到wx界面，此時可能會有疑問為什么不用wx.miniProgram里面的其他（switchTab，navigateTo，reLaunch，redirectTo）方法進行跳轉，首先switchTab不能攜帶參數且只能跳轉tabBar頁面，reLaunch會關閉所有頁面且入口頁面的back事件會變得卡頓，redirectTo也有同樣的卡頓問題，navigateTo貌似是最好的選擇，可以跳轉也可以傳參，可是它只能跳轉固定的page，而且有一個致命缺陷是，他與navigateBack配合使用之后回到上一個頁面，也就是H5頁面，所以在小程序頁面點擊back回退時，只會在小程序入口頁面和H5頁面切換。
//傳參
在H5頁面取從小程序界面帶來的參數，因為我們是用navigateBack返回到小程序界面的，所以傳參時不能通過路由導航傳，此時要用到一個新的API：wx.miniProgram.postMessage來傳遞參數。
例：wx.miniProgram.postMessage({
data: {
id:this.id
},
})
注：
1.用此方法傳參時，需要在小程序中使用bindmessage="handleGetMessage"，綁定一個取值的方法，通過handleGetMessage:function(e){
console.log(e.detail.data)
},
取到data中傳的數據
2.該方法觸發需要一定的條件
網頁向小程序 postMessage 時，會在特定時機（小程序后退、組件銷毀、分享）觸發並收到消息。
小程序向H5頁面傳遞參數時，直接在跳轉的url后面加？傳參即可，取的時候，在Vue的生命周期鈎子里面可以直接通過原生js的方法（自己封裝一個取參數的方法）在跳轉到H5頁面之前拿到由小程序傳過來的參數。
在H5頁面取從小程序界面帶來的參數，因為我們是用navigateBack返回到小程序界面的，所以傳參時不能通過路由導航傳，此時要用到一個新的API：wx.miniProgram.postMessage來傳遞參數。
例：wx.miniProgram.postMessage({
data: {
id:this.id
},
})
注：
1.用此方法傳參時，需要在小程序中使用bindmessage="handleGetMessage"，綁定一個取值的方法，通過handleGetMessage:function(e){
console.log(e.detail.data)
},
取到data中傳的數據
2.該方法觸發需要一定的條件
網頁向小程序 postMessage 時，會在特定時機（小程序后退、組件銷毀、分享）觸發並收到消息。
小程序向H5頁面傳遞參數時，直接在跳轉的url后面加？傳參即可，取的時候，在Vue的生命周期鈎子里面可以直接通過原生js的方法（自己封裝一個取參數的方法）在跳轉到H5頁面之前拿到由小程序傳過來的參數。
//觸發H5頁面的事件
在H5頁面綁定的方法事件，可以在本頁面直接調用，測試時需要在微信開發者工具中跳轉到H5頁面之后右鍵調試即可。
在H5頁面綁定的方法事件，可以在本頁面直接調用，測試時需要在微信開發者工具中跳轉到H5頁面之后右鍵調試即可。