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\nLatitude:' + 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生命周期中調用

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

Vue.prototype.$plusExtends = plusExtends

　　最后是打包問題，不管是把Vue執行build后打包文件放入Hbuilder的項目再打包，還是Hbuilder生成一個殼子后在加載時候引入外部url，這兩個都可以，我兩個都測試過。其實webview在打包時候就完成了JS與手機本地關聯，不管加載本地，還是外部url都一樣。