Vue中使用h5 Plus的实现方法
npm上Vue中使用的库数不胜数,作为移动App端的又一泰斗,h5 plus当然也是可以被使用进来的。
H5Plus是一种基于HTML、JS、CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和性能。
一、安装库
安装库
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了。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
最新评论