Html5Plus(h5+)+Vue开发的研习记录
耗费了不少时间在Cordova、H5+上面，最终还是在项目中选择了H5+，原因是因为不需要安装本地SDK。毕竟对于IOS来说它必须是需要一台苹果电脑的。而H5+的云打包解决了这个问题。
前面立项前也是构思使用H5+和MUI来做开发的，但是由于某些因数最终是用了vue3，将webpack打包之后的dist再拿到Hbuilder打包成APP。
期间确实有一些需要解决的问题，例如微信支付的应用签名，APK的签名等等。（有关APK签名的在其他博文里面有介绍，此处不详说）
解决方案
回到正题，要让vue能够调用H5+的东西，先要搞清楚原理。无论是Cordova还是H5+，他们所通过的方式都是在Webview注入了一个对象，在代码中通过window.plus调用。因为注入的过程和页面文档的加载并非是先后顺序进行的，所以在文档中调用plus对象时，需要先判断当前的plus是否已经初始化完毕了。这里，可以采用官方提供的事件来判断：plusready
官方示例Demo如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Hello world</title>
<script type="text/javascript">
// 扩展API是否准备好，如果没有则监听“plusready"事件
if(window.plus){
plusReady();
}else{
document.addEventListener( "plusready", plusReady, false );
}
// 扩展API准备完成后要执行的操作
function plusReady(){
// ... code
}
</script>
</head>
<body>
</body>
</html>
官方的文档也有说明，当扩展API准备好之后，那么就可以在javascript中调用plus对象，从而实现对APP的底层方法的调用，例如摄像头，设备识别码等。
我们在vue的assets/js/目录中新建一个js文件 plusextends.js 内容如下：
const plusExtends = fn => {
if (window.plus) {
setTimeout(fn, 0)
} else {
document.addEventListener('plusready', fn, false)
}
}
export default plusExtends
然后，在main.js 添加下面的内容，以便于在vue组件中直接调用：
import plusExtends from './assets/js/plusextends.js'
Vue.prototype.$plusExtends = plusExtends
完成上述操作之后，便可以在任意的Vue文件中调用H5+的plus对象了。示例：
<template>
<div>></div>
</template>
<script>
export default{
methods:{
this.$plusExtends(()=>{
var cmr = window.plus.camera.getCamera();
cmr.captureImage((path )=>{
alert(path)
})
})
}
}
</script>
通过上面的代码，即可成功的调起系统的摄像头进行拍照。
Cordova的整合方式其实也是类似的，但是要注意，在使用plus对象的时候要通过window.plus来使用。否则esline会报plus undefined错。
