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('Geolocation
Latitude:' + p.coords.latitude + '
Longitude:' + p.coords.longitude + '
Altitude:' + 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生命周期中调用

import plusExtends from './assets/js/plusextends.js'

Vue.prototype.$plusExtends = plusExtends

　　最后是打包问题，不管是把Vue执行build后打包文件放入Hbuilder的项目再打包，还是Hbuilder生成一个壳子后在加载时候引入外部url，这两个都可以，我两个都测试过。其实webview在打包时候就完成了JS与手机本地关联，不管加载本地，还是外部url都一样。