微信小程序的下一步:支持 NPM、小程序云、可視化編程、支持分包 ... ...
微信最新的數據顯示,目前已發布小程序數量為 100 萬 +,小程序開發者已達 150 萬 +,小程序日均打開次數 4 次,主動訪問的用戶量為 54%,從這些數據可以看出,小程序儼然已經成為微信生態體系中最重要的組成部分。
昨天下午,微信公開課微信小程序技術專場在上海舉行,會上,微信公布了面向開發者的技術規劃,內容主要包括小程序技術能力與規劃、小程序生態體系、小程序性能優化三個方面。
1小程序技術能力規劃
自定義組件 2.0
小程序的幾個頁面間,存在一些相同或是類似的區域,這時候可以把這些區域邏輯封裝成一個自定義組件,代碼就可以重用,或者對于比較獨立邏輯,也可以把它封裝成一個自定義組件,也就是微信去年發布的自定義組件,它讓代碼得到復用、減少代碼量,更方便模塊化,優化代碼架構組織,也使得模塊清晰,后期更好地維護,從而保證更好的性能。
但微信打算在原來的基礎上推出的自定義組件 2.0,它將擁有更高級的性能:
-
usingComponents 計劃支持全局定義和通配符定義:這意味著不用在每個頁面反復定義,可以批量導入目錄下的所有自定義組件
-
計劃支持類似 Computed 和 watch 的功能,它能使代碼邏輯更清晰
-
計劃支持 Component 構造器插件,在實例化一個自定義組件的時候,允許你在構造器的這個階段,加入一些邏輯,方便進行一些擴展,甚至是可以擴展成 VUE 的語法
npm 支持
目前小程序開發的痛點是:開源組件要手動復制到項目,后續更新組件也需要手動操作。不久的將來,小程序將支持 npm 包管理,有了這個之后,想要引入一些開源的項目就變得很簡單了,只要在項目里面聲明,然后用簡單的命令安裝,就可以使用了。
官方自定義組件
微信小程序團隊表示,他們在考慮推出一些官方自定義組件,為什么不內置到基礎庫里呢?因為內置組件要提供給開發者,這個組件一定是開發者很難實現或者是無法實現的一個能力。所以他們更傾向于封裝成自定義組件,想基于這些內置組件里,封裝一些比較常見的、交互邏輯比較復雜的組件給大家使用,讓大家更容易開發。類似彈幕組件,開發者就不用關注彈幕怎么飄,可以節省開發者的開發成本。
同時,他們也想給開發者提供一些規范和一些模板,讓開發者設計出好用的自定義組件,更好地被大家去使用。
添加體驗評分
當小程序加載太慢時,可能會導致用戶的流失,而小程序的開發者可能會面臨著不知道如何定位問題或不知如何解決問題的困境。
為此,小程序即將推出一個體驗評分的功能,這是為了幫助開發者可以檢查出小程序有一些什么體驗不好的地方,也會同時給出一份優化的指引建議。
原生組件同層渲染
小程序在最初的技術選型時,引入了原生組件的概念,因為原生組件可以使小程序的能力更加豐富,比如地圖、音視頻的能力,但是原生組件是由客戶端原生渲染的,導致了原生組件的層級是最高的,開發者很容易遇到打開調試的問題,發現視頻組件擋在了 vConsole 上。
為了解決這個問題,當時微信做了一個過渡的方案:cover-view。cover-view 可以覆蓋在原生組件之上,這一套方案解決了大部分的需求場景。比如說視頻組件上很多的按鈕、標題甚至還有動畫的彈幕,這些都是用 cover-view 去實現的,但它還是沒有完全解決原生組件的開發體驗問題,因為 cover-view 有一些限制:
-
無法與其他組件混在一起渲染
-
沒有完整的觸摸事件
-
cover-view 對樣式的表現有差異
-
cover-view 對樣式的支持度不夠高
因此微信決定將用同層渲染取代 cover-view,它能像普通組件一樣使用,原生組件的層級不再是最高,而是和其他的非原生組件在同一層級渲染,可完全由 z-index 控制,可完全支持觸摸事件。
微信表示,同層渲染在 iOS 平臺小程序上已經開始內測,會很快開放給開發者,Android 平臺已經取得突破性進展,目前正在做一輪封裝的工作,開放指日可待。
2生態規劃
小程序云
小程序云是微信團隊和騰訊云共同研發的小程序基礎能力,它的特點是:無服務器搭建、無域名配置、能完整體驗云端流程,可原生調用小程序 API,同步支持服務器 SDK,開發工具可視化管理云端服務。
小程序云的基礎能力主要體現在云函數、數據庫和文檔存儲上:
云函數的特點:
-
云端運行的代碼,無服務搭建
-
客戶端隔離,私密安全的運行空間
-
微信數據管道協議接入,多種觸發方式
-
天然可信任的用戶登錄態
-
開發工具一鍵上傳部署
數據庫的特點:
-
高性能文檔型數據庫
-
簡單易用的 API 設計
-
小程序 / 云函數多端調用
-
基于微信登錄態的安全控制規則
文件存儲的特點:
-
具有云端文件存儲空間
-
小程序內直接上傳文件到云端
-
帶權限管理的云端下載
-
CDN 加速
-
可視化管理
可視化編程
可視化編程是一種全新的小程序開發模式,通過簡單的拖曳即可生成小程序,讓那些不擅長前端技術的開發人員也能開發小程序,它能極大地降低開發門檻,打造更好的小程序視覺交互體驗。
全面升級自動化測試
微信小程序計劃推出一種全新的自動化測試引擎,它能夠自定義測試語言,支持在開發工具上錄制測試腳本,得出更權威、更系統的自動化測試報告。
打造小程序開發者社區
微信希望能夠增加激勵,鼓勵開發者分享,搭建聲望體系,增強小程序開發者的影響力并統一微信體系下包括小程序、公眾號、微信支付、企業微信的開發體驗,同時,微信還將部署更多的海外服務節點,提供測試號體驗,完善開發流程,文檔、教程、開發者工具實現多語言支持,豐富和推動小程序開發者社區的發展。
3小程序的性能優化
為了優化小程序的性能,即將推出分包預下載和獨立分包功能
在性能優化上,微信官方還給出了以下建議:
-
開發者要控制代碼包的大小,及時清理無用代碼和資源文件,減少代碼中的圖片等資源文件的大小和數量。
-
分包加載,將小程序中不經常使用的頁面放到多個分包中,主包只保留最常用的核心頁面,啟動時只加載主包,使用時按需下載分包,不要一次性下載整個代碼包。
-
首屏加載優化:異步數據請求不需要等待頁面渲染完成,利用 storage API 對異步請求數據進行緩存,二次啟動時先利用緩存數據渲染頁面,再進行后臺更新,為避免白屏,應先展示頁面骨架和基礎內容,并及時地對需要用戶等待的交互操作進行反饋。
-
正確使用 setData:僅傳輸頁面中發生變化的數據,使用 setData 的特殊 key 實現布局更新,并對連續的 setData 調用進行合并等。
-
正確使用 onPageScoll:只在必要的時候監聽 onPageScoll 事件,避免在 onPageScoll 中執行復雜邏輯,避免在 onPageScoll 中調用 setData 等。
HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面,所看即所得,只需要美工就能做出精美商城。更多小程序商店請查看:小程序商店