微信小程序的下一步：支持 NPM、小程序云、可視化編程、支持分包 ... ...

微信最新的數(shù)據(jù)顯示，目前已發(fā)布小程序數(shù)量為 100 萬 +，小程序開發(fā)者已達 150 萬 +，小程序日均打開次數(shù) 4 次，主動訪問的用戶量為 54%，從這些數(shù)據(jù)可以看出，小程序儼然已經(jīng)成為微信生態(tài)體系中最重要的組成部分。

昨天下午，微信公開課微信小程序技術(shù)專場在上海舉行，會上，微信公布了面向開發(fā)者的技術(shù)規(guī)劃，內(nèi)容主要包括小程序技術(shù)能力與規(guī)劃、小程序生態(tài)體系、小程序性能優(yōu)化三個方面。

1小程序技術(shù)能力規(guī)劃

自定義組件 2.0

小程序的幾個頁面間，存在一些相同或是類似的區(qū)域，這時候可以把這些區(qū)域邏輯封裝成一個自定義組件，代碼就可以重用，或者對于比較獨立邏輯，也可以把它封裝成一個自定義組件，也就是微信去年發(fā)布的自定義組件，它讓代碼得到復(fù)用、減少代碼量，更方便模塊化，優(yōu)化代碼架構(gòu)組織，也使得模塊清晰，后期更好地維護，從而保證更好的性能。

但微信打算在原來的基礎(chǔ)上推出的自定義組件 2.0，它將擁有更高級的性能：

• usingComponents 計劃支持全局定義和通配符定義：這意味著不用在每個頁面反復(fù)定義，可以批量導(dǎo)入目錄下的所有自定義組件

• 計劃支持類似 Computed 和 watch 的功能，它能使代碼邏輯更清晰

• 計劃支持 Component 構(gòu)造器插件，在實例化一個自定義組件的時候，允許你在構(gòu)造器的這個階段，加入一些邏輯，方便進行一些擴展，甚至是可以擴展成 VUE 的語法

npm 支持

目前小程序開發(fā)的痛點是：開源組件要手動復(fù)制到項目，后續(xù)更新組件也需要手動操作。不久的將來，小程序?qū)⒅С?npm 包管理，有了這個之后，想要引入一些開源的項目就變得很簡單了，只要在項目里面聲明，然后用簡單的命令安裝，就可以使用了。

官方自定義組件

微信小程序團隊表示，他們在考慮推出一些官方自定義組件，為什么不內(nèi)置到基礎(chǔ)庫里呢？因為內(nèi)置組件要提供給開發(fā)者，這個組件一定是開發(fā)者很難實現(xiàn)或者是無法實現(xiàn)的一個能力。所以他們更傾向于封裝成自定義組件，想基于這些內(nèi)置組件里，封裝一些比較常見的、交互邏輯比較復(fù)雜的組件給大家使用，讓大家更容易開發(fā)。類似彈幕組件，開發(fā)者就不用關(guān)注彈幕怎么飄，可以節(jié)省開發(fā)者的開發(fā)成本。

同時，他們也想給開發(fā)者提供一些規(guī)范和一些模板，讓開發(fā)者設(shè)計出好用的自定義組件，更好地被大家去使用。

添加體驗評分

當(dāng)小程序加載太慢時，可能會導(dǎo)致用戶的流失，而小程序的開發(fā)者可能會面臨著不知道如何定位問題或不知如何解決問題的困境。

為此，小程序即將推出一個體驗評分的功能，這是為了幫助開發(fā)者可以檢查出小程序有一些什么體驗不好的地方，也會同時給出一份優(yōu)化的指引建議。

原生組件同層渲染

小程序在最初的技術(shù)選型時，引入了原生組件的概念，因為原生組件可以使小程序的能力更加豐富，比如地圖、音視頻的能力，但是原生組件是由客戶端原生渲染的，導(dǎo)致了原生組件的層級是最高的，開發(fā)者很容易遇到打開調(diào)試的問題，發(fā)現(xiàn)視頻組件擋在了 vConsole 上。

為了解決這個問題，當(dāng)時微信做了一個過渡的方案：cover-view。cover-view 可以覆蓋在原生組件之上，這一套方案解決了大部分的需求場景。比如說視頻組件上很多的按鈕、標(biāo)題甚至還有動畫的彈幕，這些都是用 cover-view 去實現(xiàn)的，但它還是沒有完全解決原生組件的開發(fā)體驗問題，因為 cover-view 有一些限制：

• 無法與其他組件混在一起渲染

• 沒有完整的觸摸事件

• cover-view 對樣式的表現(xiàn)有差異

• cover-view 對樣式的支持度不夠高

因此微信決定將用同層渲染取代 cover-view，它能像普通組件一樣使用，原生組件的層級不再是最高，而是和其他的非原生組件在同一層級渲染，可完全由 z-index 控制，可完全支持觸摸事件。

微信表示，同層渲染在 iOS 平臺小程序上已經(jīng)開始內(nèi)測，會很快開放給開發(fā)者，Android 平臺已經(jīng)取得突破性進展，目前正在做一輪封裝的工作，開放指日可待。

2生態(tài)規(guī)劃

小程序云

小程序云是微信團隊和騰訊云共同研發(fā)的小程序基礎(chǔ)能力，它的特點是：無服務(wù)器搭建、無域名配置、能完整體驗云端流程，可原生調(diào)用小程序 API，同步支持服務(wù)器 SDK，開發(fā)工具可視化管理云端服務(wù)。

小程序云的基礎(chǔ)能力主要體現(xiàn)在云函數(shù)、數(shù)據(jù)庫和文檔存儲上：

云函數(shù)的特點：

• 云端運行的代碼，無服務(wù)搭建

• 客戶端隔離，私密安全的運行空間

• 微信數(shù)據(jù)管道協(xié)議接入，多種觸發(fā)方式

• 天然可信任的用戶登錄態(tài)

• 開發(fā)工具一鍵上傳部署

數(shù)據(jù)庫的特點：

• 高性能文檔型數(shù)據(jù)庫

• 簡單易用的 API 設(shè)計

• 小程序 / 云函數(shù)多端調(diào)用

• 基于微信登錄態(tài)的安全控制規(guī)則

文件存儲的特點：

• 具有云端文件存儲空間

• 小程序內(nèi)直接上傳文件到云端

• 帶權(quán)限管理的云端下載

• CDN 加速

• 可視化管理

可視化編程

可視化編程是一種全新的小程序開發(fā)模式，通過簡單的拖曳即可生成小程序，讓那些不擅長前端技術(shù)的開發(fā)人員也能開發(fā)小程序，它能極大地降低開發(fā)門檻，打造更好的小程序視覺交互體驗。

全面升級自動化測試

微信小程序計劃推出一種全新的自動化測試引擎，它能夠自定義測試語言，支持在開發(fā)工具上錄制測試腳本，得出更權(quán)威、更系統(tǒng)的自動化測試報告。

打造小程序開發(fā)者社區(qū)

微信希望能夠增加激勵，鼓勵開發(fā)者分享，搭建聲望體系，增強小程序開發(fā)者的影響力并統(tǒng)一微信體系下包括小程序、公眾號、微信支付、企業(yè)微信的開發(fā)體驗，同時，微信還將部署更多的海外服務(wù)節(jié)點，提供測試號體驗，完善開發(fā)流程，文檔、教程、開發(fā)者工具實現(xiàn)多語言支持，豐富和推動小程序開發(fā)者社區(qū)的發(fā)展。

3小程序的性能優(yōu)化

為了優(yōu)化小程序的性能，即將推出分包預(yù)下載和獨立分包功能

在性能優(yōu)化上，微信官方還給出了以下建議：

• 開發(fā)者要控制代碼包的大小，及時清理無用代碼和資源文件，減少代碼中的圖片等資源文件的大小和數(shù)量。

• 分包加載，將小程序中不經(jīng)常使用的頁面放到多個分包中，主包只保留最常用的核心頁面，啟動時只加載主包，使用時按需下載分包，不要一次性下載整個代碼包。

• 首屏加載優(yōu)化：異步數(shù)據(jù)請求不需要等待頁面渲染完成，利用 storage API 對異步請求數(shù)據(jù)進行緩存，二次啟動時先利用緩存數(shù)據(jù)渲染頁面，再進行后臺更新，為避免白屏，應(yīng)先展示頁面骨架和基礎(chǔ)內(nèi)容，并及時地對需要用戶等待的交互操作進行反饋。

• 正確使用 setData：僅傳輸頁面中發(fā)生變化的數(shù)據(jù)，使用 setData 的特殊 key 實現(xiàn)布局更新，并對連續(xù)的 setData 調(diào)用進行合并等。

• 正確使用 onPageScoll：只在必要的時候監(jiān)聽 onPageScoll 事件，避免在 onPageScoll 中執(zhí)行復(fù)雜邏輯，避免在 onPageScoll 中調(diào)用 setData 等。

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。更多小程序商店請查看：小程序商店