vue项目融入html5plus

2021-09-23 12:05:27 阅读：171 来源： 互联网

标签：融入 vue false plusExtends html5plus H5 Vue plus 打包

　　耗费了不少时间在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都一样。

标签：融入,vue,false,plusExtends,html5plus,H5,Vue,plus,打包
来源： https://www.cnblogs.com/huhu1020387597/p/15323562.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue项目融入html5plus