vue項目中使用H5Plus

HTML5 Plus應用概述：
H5Plus是一種基於HTML、JS、CSS編寫的運行於手機端的App，這種App可以通過擴展的JS API任意調用手機的原生能力，實現與原生App同樣強大的功能和性能。

首先拉一套vue-cli的腳手架

vue init webpack project

安裝mui

npm i vue-awesome-mui

在main.js 文件中引入

import Mui from 'vue-awesome-mui';
Vue.use(Mui);

需要用到H5Plus 的地方首先需要：

methods:{
// 擴展API準備完成後要執行的操作  
  plusReady () {
    var ws = plus.webview.currentWebview(); //pw回車可輸出plus.webview  
  },
}
created () {
// 擴展API是否準備好，如果沒有則監聽“plusready"事件  
  if (window.plus) {
    this.plusReady()
  } else {
    document.addEventListener('plusready', this.plusReady, false) // 
  }
}

比如在項目中需要調用拍照的方法：

<ul class="mui-table-view">
   <li class="mui-table-view-cell" id="device.html" @click="getImage">
       <a class="mui-navigate-right">
           調用拍照
       </a>
   </li>
</ul>

getImage () {
  let cmr = plus.camera.getCamera() // 獲取攝像頭對象
  let res = cmr.supportedImageResolutions[0] // 字符串數組，攝像頭支持的拍照分辨率
  let fmt = cmr.supportedImageFormats[0] // 字符串數組，攝像頭支持的拍照文件格式
  console.log('Resolution :' + res + ', Format: ' + fmt)
  cmr.captureImage ((path) => {
    alert('調用成功: ' + path)
  },
  (error) => { // 拍照操作失敗的回調函數
    alert('調用失敗: ' + error.message)
  },
  {resolution: res, format: fmt} // 攝像頭拍照參數
  )
},

直接運行項目的話會報錯，因爲plus需要運行在真機上

npm run build

編譯後得到dist文件夾

重點！！
雲打包app項目需要Hbuilder編譯器

在Hbuilder中的菜單欄找到文件 => 新建 => 移動App

此時會生成出這些文件

將vue編譯後的dist文件夾中的所有內容替換進去 （manifest.json 文件保留）

最後一步：
將手機連接至電腦
Hbuilder => 運行 => 真機運行 => 找到連接的設備

會在手機中安裝一個 Hbuilder 的app，打開它就可以測試調試你的項目代碼了~

詳細調用原生api文檔如下：
http://www.html5plus.org/doc/h5p.html