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

爽儿儿儿

发布了26 篇原创文章 · 获赞 15 · 访问量 3万+

私信关注

vue项目中使用H5Plus

猜你喜欢