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

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

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

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

自定義組件 2.0

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

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

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

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

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

npm 支持

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

官方自定義組件

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

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

添加體驗(yàn)評(píng)分

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

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

原生組件同層渲染

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

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

• 無(wú)法與其他組件混在一起渲染

• 沒(méi)有完整的觸摸事件

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

• cover-view 對(duì)樣式的支持度不夠高

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

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

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

小程序云

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

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

云函數(shù)的特點(diǎn)：

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

• 客戶端隔離，私密安全的運(yùn)行空間

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

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

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

數(shù)據(jù)庫(kù)的特點(diǎn)：

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

• 簡(jiǎn)單易用的 API 設(shè)計(jì)

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

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

文件存儲(chǔ)的特點(diǎn)：

• 具有云端文件存儲(chǔ)空間

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

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

• CDN 加速

• 可視化管理

可視化編程

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

全面升級(jí)自動(dòng)化測(cè)試

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

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

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

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

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

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

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

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

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

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

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

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