【51CTO.com原创稿件】“微信小程序的发布给了一个新的思路，我们可以通过小程序的思路去解决动态化的一些问题，于是我们提出了小程序的动态化方案。”在51CTO举办的WOT2018全球软件与运维技术峰会上，魅族高级工程师张兴业如是说。
那么，魅族的小程序是什么?为什么选择Weex技术做小程序?小程序的方案投入重点在哪里?怎样保证小程序的性能和稳定性?魅族小程序开发与前端开发有哪些异同点?接下来，本文为大家一一解读。
魅族高级工程师张兴业
利用Weex技术做魅族小程序
张兴业表示，魅族小程序参考了微信小程序的思路，可以理解成是一种快应用。厂商联盟发布的快应用是对外的，对开发者使用了标准的开发文档;魅族小程序主要是对内的业务使用，它是魅族内部的一套无需安装的小程序方案，集成了魅族内部的服务、登录、埋点、push、支付等。
为什么选择Weex技术?传统使用比较多的技术有WebApp、Hybrid、json2view等等，后来又出现了ReactNative和Weex技术，魅族都曾做过尝试，对性能、长列表、动画等方面做过测试，最终选择了Weex。“我们想寻找一个动态化的方案，需要高性能、可扩展的开发方案，而Weex的测试结果满足我们的要求，无论是包大小、应用启动影响，还是页面渲染和内存占用等，均合乎我们的需求。” 张兴业说。
Weex技术能够帮助用户实现高效开发、动态更新。这里举两个例子，在开发Flyme社区一个列表页面时，如果用iOS或者安卓去开发，代码量很多，可能300行也开发不完，而且还要写很多布局文件。但是，采用Weex技术，仅仅50多行代码即可解决一个列表的问题，有效缩短了开发时间。另外，魅族短视频应用趣视频也是应用了Weex技术。当时，趣视频预装在系统内，不能卸载掉，面对各渠道不能卸载的舆情压力,紧急上线“趣评论 得大奖”话题活动,希望用户登入客户端后感受到趣视频的“趣”味,缓解他们的负面情绪,尽可能降低舆情风险。由于采用了基于creator的Weex方案，需求从提出到发布到用户手上只花了不到一天的时间，实现快速开发、快速上线。
谈谈魅族小程序方案
如果想实现小程序方案都需要做什么?张兴业认为，如果做一个类似Weex的渲染方案，周期会比较长，但是基于Weex技术去在现有方案上做就比较简单。首先，需要UI渲染、Native API、应用数据缓存、以及一个系统级的渲染引擎。然后需要一个管理平台，创建应用，在平台上实现小程序的上架、下架、升级、内测等功能。之后，魅族基于自研的FlymeUI组件去开发。这就是魅族开发团队的做法。下图所示是一个系统级渲染引擎框架。从下向上看，底层为Weex支持，主要用于渲染。
系统级渲染引擎框架
“还有一些module的扩展，module扩展主要是封装了我们自己的服务，像登录、推送、支付，还有上传下载，大约封装了九大类，上百个接口。” 张兴业解释说：“每个小程序都运行在独立的进程中，并不是共用渲染引擎这个进程，独立就是为了避免因小程序出错影响主进程的渲染。此外，我们引入了针对图片的缓存方案，http方案。”
魅族还构建了高可用服务平台体系，主要包含：一个可靠的管理系统，一个完善的监控度量体系，以及多维度的数据分析系统。其中，监控度量体系主要用来监控小程序启动时间、页面渲染时间、页面滑动帧率、各种crash日志、流量、电量等问题和指导标准，通过无痕埋点的方式监控卡顿、不流畅、内存爆掉问题;数据分析系统主要依托大数据的能力，通过埋点SDK上报数据，通过小程序ID区分。
小程序方案的重点优化
那么，小程序方案重点优化有哪些呢?哪些工作投入的精力比较多?在魅族的小程序开发实践中，主要做了四个方面的重点优化，即：启动性能、长列表、动画、安全。
在启动性能方面，怎么实现程序秒开?小程序的启动主要分为四部分：***步，去服务端获取应用的信息;第二步，下载小程序，通过CDN下载***文件;第三步，对小程序进行初始化。小程序初始化主要是包加载验证、manifest文件读取;第四步，实现小程序首屏页面渲染，这里主要还是依靠Weex自身的性能。因此，优化比较多的是***步和第二步。
小程序的启动流程主要有以下三种方案：
很明显，***种方案需要执行所有的流程，耗时长。第二种方案同样耗时长，影响用户体验。比如在4G网络环境不好的情况下，下载新版本耗时会显著增多。相对来说，第三种方案较好，它加入了并发执行，一边拉取版本信息，一边渲染本地的缓存文件，有缓存时可以直接打开。但是该方案也有缺点，长期未启动应用再次启动是老版本，而且紧急更新版本***启动不会体现。所以考虑至此，魅族提出了第四种方案，增加了重启机制，提示有新版本需要用户重启。
在长列表方面，Weex提供了List组件，但是在使用list组件时，它的内存会一直增加，虽然增幅不大，但是对于长列表，尤其是***列表，内存也会增大到爆，这时应用就会退出。在移动应用中，长列表是使用比较频繁的组件，基本每个应用都会用到，对列表的优化就放到了首要位置。我们对list组件的渲染流程做了分析，虽然weex的list组件对view做了复用，但是dom结构数据还是在增加，从而引起内存的增加。列表中内容虽然很长，但是结构都一样，dom层也适合做复用，我们以此为切入点，优化了长列表的内存升高问题。 在weex***的版本0.18.0中提供了recycle-list组件，weex官方也解决了长列表内存升高问题，接入weex新版本的开发者可以使用recycle-list组件代替list组件。
怎么去解决list内存升高的问题?现在，Weex0.18版本已经能够解决。至于低版本的，张兴业建议，直接从JS发给Native，所有的vue的渲染都在原生侧实现。原生侧的vue是可以复用的，data的数据量很小，基本就没有内存的升高。
此外，在动画方面，用Weex实现的时候，简单动画是没有问题的，复杂动画还是很麻烦，而且交互性能比较低，魅族这边使用自研的ActionView方案，ActionView完全使用Native的方式渲染，很流畅。ActionView方案也在魅族的各个应用的Banner、主题美化的动态壁纸、画屏动画使用，如果想体验一下ActionView的效果，可以访问http://action.flyme.cn。在安全方面，主要是为了外发去考虑的，采用沙盒机制实现了进程隔离和数据隔离;对用户进行权限控制;并根据安全域限制了http request访问域名……
演讲***，张兴业分享了一些关于接入AI和AR的一些思考。他表示，未来将有更多可能。AI模型下发将会与云端识别相结合，5G、AI助力AR再焕发新春。
以上内容是51CTO记者根据魅族高级工程师张兴业在WOT2018全球软件与运维技术峰会的采访内容整理，更多关于WOT的内容请关注51cto.com。
【51CTO原创稿件，合作站点转载请注明原文作者和出处为51CTO.com】
