【51CTO.com原創稿件】“微信小程序的發布給了一個新的思路，我們可以通過小程序的思路去解決動態化的一些問題，于是我們提出了小程序的動態化方案。”在51CTO舉辦的WOT2018全球軟件與運維技術峰會上，魅族高級工程師張興業如是說。

那么，魅族的小程序是什么?為什么選擇Weex技術做小程序?小程序的方案投入重點在哪里?怎樣保證小程序的性能和穩定性?魅族小程序開發與前端開發有哪些異同點?接下來，本文為大家一一解讀。

[[232792]]

魅族高級工程師張興業

利用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】