微信小程式的下一步：支援NPM、小程式雲、視覺化程式設計、支援分包

微信最新的資料顯示，目前已釋出小程式數量為100萬+，小程式開發者已達150萬+，小程式日均開啟次數4次，主動訪問的使用者量為54%，從這些資料可以看出，小程式儼然已經成為微信生態體系中最重要的組成部分。

\\

7月11日下午，微信公開課微信小程式技術專場在上海舉行，會上，微信公佈了面向開發者的技術規劃，內容主要包括小程式技術能力與規劃、小程式生態體系、小程式效能優化三個方面。

\\

小程式技術能力規劃

\\

自定義元件2.0

\\

小程式的幾個頁面間，存在一些相同或是類似的區域，這時候可以把這些區域邏輯封裝成一個自定義元件，程式碼就可以重用，或者對於比較獨立邏輯，也可以把它封裝成一個自定義元件，也就是微信去年釋出的自定義元件，它讓程式碼得到複用、減少程式碼量，更方便模組化，優化程式碼架構組織，也使得模組清晰，後期更好地維護，從而保證更好的效能。

\\

但微信打算在原來的基礎上推出的自定義元件2.0，它將擁有更高階的效能：

\\

• \\t

  usingComponents計劃支援全域性定義和萬用字元定義：這意味著不用在每個頁面反覆定義，可以批量匯入目錄下的所有自定義元件

  \\t\\t
• \\t

  計劃支援類似Computed和watch的功能，它能使程式碼邏輯更清晰

  \\t\\t
• \\t

  計劃支援Component構造器外掛，在例項化一個自定義元件的時候，允許你在構造器的這個階段，加入一些邏輯，方便進行一些擴充套件，甚至是可以擴充套件成VUE的語法

  \\t\

npm支援

\\

目前小程式開發的痛點是：開源元件要手動複製到專案，後續更新元件也需要手動操作。不久的將來，小程式將支援npm包管理，有了這個之後，想要引入一些開源的專案就變得很簡單了，只要在專案裡面宣告，然後用簡單的命令安裝，就可以使用了。

\\

官方自定義元件

\\

微信小程式團隊表示，他們在考慮推出一些官方自定義元件，為什麼不內建到基礎庫裡呢？因為內建元件要提供給開發者，這個元件一定是開發者很難實現或者是無法實現的一個能力。所以他們更傾向於封裝成自定義元件，想基於這些內建元件裡，封裝一些比較常見的、互動邏輯比較複雜的元件給大家使用，讓大家更容易開發。類似彈幕元件，開發者就不用關注彈幕怎麼飄，可以節省開發者的開發成本。

\\

同時，他們也想給開發者提供一些規範和一些模板，讓開發者設計出好用的自定義元件，更好地被大家去使用。

\\

新增體驗評分

\\

當小程式載入太慢時，可能會導致使用者的流失，而小程式的開發者可能會面臨著不知道如何定位問題或不知如何解決問題的困境。

\\

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

\\

原生元件同層渲染

\\

小程式在最初的技術選型時，引入了原生元件的概念，因為原生元件可以使小程式的能力更加豐富，比如地圖、音視訊的能力，但是原生元件是由客戶端原生渲染的，導致了原生元件的層級是最高的，開發者很容易遇到開啟除錯的問題，發現視訊元件擋在了vConsole上。

\\

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

\\

• 無法與其他元件混在一起渲染\\t
• 沒有完整的觸控事件\\t
• cover-view對樣式的表現有差異\\t
• cover-view對樣式的支援度不夠高\

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

\\

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

\\

生態規劃

\\

小程式雲

\\

小程式雲是微信團隊和騰訊雲共同研發的小程式基礎能力，它的特點是：無伺服器搭建、無域名配置、能完整體驗雲端流程，可原生呼叫小程式API，同步支援伺服器SDK，開發工具視覺化管理雲端服務。

\\

小程式雲的基礎能力主要體現在雲函式、資料庫和文件儲存上：

\\

雲函式的特點：

\\

• \\t

  雲端執行的程式碼，無服務搭建

  \\t\\t
• \\t

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

  \\t\\t
• \\t

  微信資料管道協議接入，多種觸發方式

  \\t\\t
• \\t

  天然可信任的使用者登入態

  \\t\\t
• \\t

  開發工具一鍵上傳部署

  \\t\

資料庫的特點：

\\

• \\t

  高效能文件型資料庫

  \\t\\t
• \\t

  簡單易用的API設計

  \\t\\t
• \\t

  小程式/雲函式多端呼叫

  \\t\\t
• \\t

  基於微信登入態的安全控制規則

  \\t\

檔案儲存的特點：

\\

• \\t

  具有云端檔案儲存空間

  \\t\\t
• \\t

  小程式內直接上傳檔案到雲端

  \\t\\t
• \\t

  帶許可權管理的雲端下載

  \\t\\t
• \\t

  CDN加速

  \\t\\t
• \\t

  視覺化管理

  \\t\

視覺化程式設計

\\

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

\\

全面升級自動化測試

\\

微信小程式計劃推出一種全新的自動化測試引擎，它能夠自定義測試語言，支援在開發工具上錄製測試指令碼，得出更權威、更系統的自動化測試報告。

\\

打造小程式開發者社群

\\

微信希望能夠增加激勵，鼓勵開發者分享，搭建聲望體系，增強小程式開發者的影響力並統一微信體系下包括小程式、公眾號、微信支付、企業微信的開發體驗，同時，微信還將部署更多的海外服務節點，提供測試號體驗，完善開發流程，文件、教程、開發者工具實現多語言支援，豐富和推動小程式開發者社群的發展。

\\

小程式的效能優化

\\

為了優化小程式的效能，即將推出分包預下載和獨立分包功能：

\\

\\

\\

在效能優化上，微信官方還給出了以下建議：

\\

• \\t

  開發者要控制程式碼包的大小，及時清理無用程式碼和資原始檔，減少程式碼中的圖片等資原始檔的大小和數量。

  \\t\\t
• \\t

  分包載入，將小程式中不經常使用的頁面放到多個分包中，主包只保留最常用的核心頁面，啟動時只載入主包，使用時按需下載分包，不要一次性下載整個程式碼包。

  \\t\\t
• \\t

  首屏載入優化：非同步資料請求不需要等待頁面渲染完成，利用storage API對非同步請求資料進行快取，二次啟動時先利用快取資料渲染頁面，再進行後臺更新，為避免白屏，應先展示頁面骨架和基礎內容，並及時地對需要使用者等待的互動操作進行反饋。

  \\t\\t
• \\t

  正確使用setData：僅傳輸頁面中發生變化的資料，使用setData的特殊key實現佈局更新，並對連續的setData呼叫進行合併等。

  \\t\\t
• \\t

  正確使用onPageScoll：只在必要的時候監聽onPageScoll事件，避免在onPageScoll中執行復雜邏輯，避免在onPageScoll中呼叫setData等。

  \\t\