脚本宝典收集整理的这篇文章主要介绍了vue项目融入html5plus，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
耗费了不少时间在Cordova、H5+、react、angluar上面，最终还是选择了H5+，原因是因为不需要安装本地SDK。毕竟对于IOS来说它必须是需要一台苹果电脑的。而H5+的云打包解决了这个问题。接着由于在DCloud文档中只给了常规如何使用H5+,未给出Vue下如何弄，所以又耗费不少去GIThub上找H5+Vue版本，结果是找来找去都没合适的，最后烦的不行，就去了解为啥用JS就能调用手机底层信息，突然就通了。
结论是：无论是Cordova、H5+、react、angluar，他们都是在手机Webview实列初始化时注入了一个对象，从浏览器角度就是在window全局对象中增加了plus(H5+)、deviceready(cordova)对象。但是注入的过程和页面文档的加载并非是先后顺序进行的，所以在文档中调用plus对象时，需要先判断当前的plus是否已经初始化完毕了。这里，可以采用H5+官方提供的事件来判断：plusread事件,其他的比如react，angluar也一样，只是名称不同。由此不论前端用什么开发，比如原生JS，Vue，TyPEscript等等，都只需监听此类事件就行，不用npm安装任何模块，当然安装模块后好处就是归类。
原生JS参考DCloud就OK，下面贴出Vue中使用，在任何xxx.vue文件中
export default { name: "home", data() { return { //数据列表 list:[], //下拉刷新 refreshing:false, //上拉加载更多 loading:false, finished:false, // info:"", } }, computed: {}, created() { console.LOG('created'); if (window.plus) { setTimeout(this.plusread, 0) } else { document.addEventListener('plusready', this.plusread, false) } }, destroyed() { console.log('destroyed'); }, mounted() { console.log('mounted'); }, methods: { plusread(){ alert("my plus5read"); this.info = "plus5read"; window.plus.geolocation.getcurrentPosition(function(p){ alert('GeolocationnLatitude:' + p.coords.latitude + 'nLongitude:' + p.coords.longitude + 'nAltitude:' + p.coords.altitude); }, function(e){ alert('Geolocation error: ' + e.message); } ); }, } } </script>
这样就OK了额，当然这是最原始的写法，可以自己打包。比如在@/plusgins/plusextend.js定义
const plusExtends = fn => { if (window.plus) { setTimeout(fn, 0) } else { document.addEventListener('plusready', fn, false) } } export default plusExtends
然后，在main.js 中在vue注册后，在created生命周期中调用
最后是打包问题，不管是把Vue执行build后打包文件放入Hbuilder的项目再打包，还是Hbuilder生成一个壳子后在加载时候引入外部url，这两个都可以，我两个都测试过。其实webview在打包时候就完成了JS与手机本地关联，不管加载本地，还是外部url都一样。
以上是脚本宝典为你收集整理的vue项目融入html5plus全部内容，希望文章能够帮你解决vue项目融入html5plus所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。