记一次Vue Hybrid App(混合APP)开发

原创 前端三少 随笔 vue 307阅读 2018-07-17 18:55:06 举报

一、 项目开始前的思考

1.浏览设计图、产品原型
2.需要用到分享功能
3.怎么和Android和iOS原生方法互掉
4.网页嵌入到APP中怎么调试
5.手机屏幕适配
6.如果出现Loading chunk xx failed该怎么处理

二、搭建项目

1.使用vue-cli直接创建项目,vue-router、vuex都有用到
2.划分目录


api-将项目的api抽离出来单独放置
assets-放置img、css、font等静态文件
components-放置组件文件,我在当中新建了一个global文件夹放置全局组件
plugins-第三方插件、或者自己封装的插件
router-项目的路由配置
store-项目的vuex数据存储
view-项目视图,可根据项目模块再划分相应的目录

3.公用css还是需要的,在assets中弄一份pubilc.css,重置样式;css预处理用的是scss
4.适配手机屏幕,用了最常用的rem适配方案,动态计算的js用的是adaptive.js
5.使用axios来请求数据,axios的拦截器可以干很多事情;
下面贴一份我的axios配置代码

三、项目开发中

1.将UI设计师提供的控件图作为公共组件实现,如header、footer、常用btn等;
但是弹窗部分是一个高频使用的组件,每次使用组件又略显麻烦,于是借鉴vux的做法,将弹窗部分做成了vue插件,可以通过this调用,方便省事了不少;我将它发布在了npm,有需要的欢迎来使用v-m-layer;我贴一个示例代码,大家也许会觉得好用

2.由于登录是原生实现的,所以在登录完成跳转到h5时要传递相关参数;
开始的做法是原生调用我们h5定义的全局方法,我们在方法中将参数存储到vuex中

但是这种做法会存在异步的问题,比如进入页面需要用token去获取数据,但是token还没来得及被存储就不好玩了;所以使用第二种方法,让APP跳转时将参数携带在url中,我们在APP.vue入口文件中将url中的参数都存到vuex中,这样就好使了。

3.web和app需要互调方法;
开始想去看看JSBridge怎么使用的,后面APP说他们提供简单的调用方法;

但是我们Android和iOS两个平台的互调方法不一样,所以需要判断不同的平台执行不同的方法,

4.当页面在手机上运行时,出现错误我们不好查看错误,不好去追踪;但是好在有vconsole这个插件,可以使我们在手机上查看控制台信息。
vconsole

5.在iOS上点击事件是有300ms延迟的,可以引入fastclick来解决

6.为了看起来像APP,在页面切换时需要有切换动画;想了半天没有什么好的方案,在逛GitHub时发现了一个还不错的方案。
在vuex中存一个变量isBack:false,只要isBack为false就是执行前进动画,为true就执行后退动画;但何时为false,何时为true呢?
https://github.com/zhengguorong/pageAinimate

在APP.vue中设置动画

四、一些优化问题

  1. 不要用vue.component直接注册所有组件,这样会使app.js过大
  2. import a from '@/components/a.vue'引入组件比import{a,b,c} from '@/components'引入组件,打包的体积小
  3. 防止app.js过大,可以将vue.js、vue-router.js使用script在index.html中引入,在打包时不打包进去;或者用webpack的DllPlugin将不常改的文件打包成一个文件,既能减少请求又能减小app.js的体积《DllPlugin优化打包性能(基于vue-cli)》
  4. 路由懒加载
  5. 当匹配不到路由的时候可以设置跳转到404页面,防止出现空白页面

6.用户点击过的A模块被浏览器缓存了,当再重新打包上线后,用户在A模块依然是读取的缓存可以正常浏览;如果从A模块中点击链接到B模块中,由于每次打包的文件hash值不同,导致从服务器中找不到该模块,所以就抛出了Loading chunk xx failed的错误。所以需要捕捉模块加载的错误

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复