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