初體驗小程序Vue交互

//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頁面切換。

//傳參
在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頁面以後右鍵調試便可。