Vue手动快速移植小程序总结

1、前言

1.1 关于技术选型

这大半年精力从后端转移到前端开发，一下要同时弄ios + 安卓 + 小程序的研发，很自然选择了混合App的方案，这样可以在最小学习成本下快速实现功能，并且在遇到一些可能的风险的时候，不至于因为不懂OC, Swift或者Android相关的东西导致无法处理。

前端技术框架早期Angular和Vue都接触过，Angular从1，到2，6都试过，技术架构变得太大，听说现在都到9了，以前的6又不兼容了，上生产的系统，还是不要依赖这种变化太大的技术了，不然后期重构和维护成本很大。反观vue，从早期1到现在的2， 和后来马上要出的3 语法变化都不大，况且，我还要兼顾小程序研发，而小程序的结构和vue很像，因此web部分我选用了Vue作为技术选型。

顺带推广一下自家小程序哈～～～

1.2 关于移植小程序需求

最近微信官方推Kbone了，打出的口号就是vue和小程序同时支持，本想多研究研究的，但是由于目前的项目的一些限制，我们并没有完全依赖Vue的所有特性和组件，中间有一些换为我们自己的实现方式，因此Kbone并不一定能很好支持这种方式的项目，就不去研究了。况且手动移植会更加可靠些，毕竟是两个独立项目，调试起来会更方便一些，而且小程序和App本身从界面设计和应用需求上就会有些不同。

以下举个简单例子：

App的界面：

小程序的界面：

这里的主要区别的原因在于Tab的支持， Vue里的Tab在任何地方都可以把Tab内容作为独立页面来看待，有完整的生命周期，但是小程序里，除非是App的根页面可以配置正儿八经的Tab外，其它子模块都只能靠自己绘制和Component实现，而小程序的Component的生命周期(lifetimes)仅支持attach和detach两种, 以及(pageLifetimes)仅支持show和hide两种，因此，若采用直接移植的话，对于页面生命周期的相关逻辑，改动较大