前言
工作中接到开发混合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项目的路由入口才能继续向下一级跳转。
