Vue中使用h5 Plus的实现方法
作者：我啥都会
这篇文章主要介绍了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了。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。