基于vue2.0开发混合app的思考

前言

工作中接到开发混合app的需求，以前没有接触过，做了一段时间调研，也写个几个项目，就过程中遇到的问题，谈谈想法。

调研阶段

经过一阵google搜索，大致了解了几种方案，按照类别可以分成以下几类：

类别	代表
native APP	react-native(jsx)、weex(vue)
hybrid APP	dcloud(mui、5+SDK)、ionic(angular、cordova)、webview加载SPA应用
web APP	浏览器加载SPA应用

注：并未考虑原生 APP。

各种方案的优缺点，网上有很多详细的文章，这里就不一一叙述了，大家可自行搜索。

实践阶段

1. React-Native

接下来就是一个一个的尝试，最早接触过React-Native开发，就先说说它。

React-Native提供了常用的组件，JSX语法，生态圈也比较繁荣，有很多插件。

坑也比较多：

• 前期对windows平台以及android平台支持不太友好，在此平台上搭建环境简直想哭，建议mac；
• list组件存在性能问题，初入门的面对一大堆英文文档研究性能问题，还是有一点点勉强的；
• 打包要兼顾ios和android，需要一定的原生基础，但不多；
• 键盘遮挡问题；
• navigator不是太好用；

2. Ionic

稍微尝试了下Ionic框架，简单理解就是，Ionic提供UI框架，angular作为mvvm渲染框架，cordova作为中间件，并负责打包。

Ionic的UI组件丰富，大大方便了前端的开发工作，但是UI设计严格要求的话，还是需要自己定制的。

3. Dcloud

dcloud提供了hbuilder开发工具，mui框架，以及5+sdk，致力于提高HTML5性能体验。

mui不仅提供的UI组件丰富，还提供了事件管理、网络请求等功能，真的是一应俱全，而且有相关的完整demo。

坑：

• 普遍反映社区不活跃，官方论坛回复也很慢。
• 对于熟悉mvvm模式的开发而言，不算好消息，dcloud采用的是类似jquery操作dom的方式
• 项目比较散乱，代码冗余，和目前流行的前端项目工程化还是有差距的
• vue + mui 集成，相对比较困难，但是本人还是成功了。
• 客户端反映，集成复杂，权限问题严重。

4. weex

感觉还有待提高，对初学者很不友好。

从环境搭建，到建立项目工程，再到调试打包，没有一份合理的指导，入坑需谨慎。

坑：

• weex-toolkit 升级后不再支持init命令
• npm需要> 5.0
• 使用vue-router需要将项目改造成单页面，即修改webpack配置文件为单入口
• vue-router需要设置默认值，否则会显示空白
• navigator方式跳转在web端不行，需要使用playground调试
• 在自己编写的组件中使用v-for指令，playground中调试一直报错，Web正常。
• flex-direction默认不是row

5. webview嵌套

前端工程可自行架构，但要注意和客户端商量好交互方式。

单页面和多页面都是可以的。

单页面有一些注意的地方，重定向最好不要用，replace比push更好用。

webview就相当于浏览器，如果从原生跳转到嵌套SPA页面，再跳转到原生，可以像浏览器一样正常逐级返回。

从原生跳转到SPA页面，首先要跳转到SPA项目的路由入口才能继续向下一级跳转。