Vue中使用h5 Plus的方法

零、前言

npm上Vue中使用的库数不胜数，作为移动App端的又一泰斗，h5 plus当然也是可以被使用进来的。H5Plus是一种基于HTML、JS、CSS编写的运行于手机端的App，这种App可以通过扩展的JS API任意调用手机的原生能力，实现与原生App同样强大的功能和性能。

一、安装库

1.安装库
cnpm i vue-awesome-mui -S
如果没有cnpm那就npm吧！

二、引入

main.js中引入
import Mui from 'vue-awesome-mui';
Vue.config.productionTip = false
Vue.use(Mui);

三、使用

xx.vue中

<script>
  export default {
    name:'Profile',
    methods:{
      // 扩展API准备完成后要执行的操作
      plusReady () {
        var ws = plus.webview.currentWebview(); //pw回车可输出plus.webview
        console.log("hello plus");
      },
    },
    created () {
      // 扩展API是否准备好，如果没有则监听“plusready"事件
      if (window.plus) {
        this.plusReady()
      } else {
        document.addEventListener('plusready', this.plusReady, false) 
      }
    }
  }
</script>

四、demo

调用拍照的方法：

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

在methods中添加方法： 

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} // 摄像头拍照参数
  )
},

五、用hbuilder打包至App

注意细节：

1.将config文件夹里的index.js文件中assetsPublicPath由'/'改为 './'；否则会出现白屏的问题

2.删除路由模式或者改为hash

 运行：

npm run build

生成dist文件夹。

新建hbuilder 5+App项目，将dist目录下的东西全部放在5+App项目下，直接全部覆盖。

最终如图：

然后可以直接在hbuilderx中连接手机进行测试，可以看到结果：

打印出了webview的信息： 

 拍照接口效果截图：

六、结束

本文简单记录了一下vue中使用h5 plus的方法，并做了一个简单调用相机的例子，以后再开发App就可以用上Vue了。