微信小程序的下一步:支持 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)查看:小程序商店