小程序使用分包的示例代碼
本文介紹了小程序使用分包的示例代碼,分享給大家,具體如下:
官方文檔:https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html
某些情況下,開(kāi)發(fā)者需要將小程序劃分成不同的子包,在構(gòu)建時(shí)打包成不同的分包,用戶在使用時(shí)按需進(jìn)行加載。
總結(jié)就是小程序內(nèi)所有代碼圖片資源大小超過(guò)2M,此時(shí)就可以考慮創(chuàng)建分包,擴(kuò)大小程序容量
目前小程序分包大小有以下限制:
- 整個(gè)小程序所有分包大小不超過(guò) 12M
- 單個(gè)分包/主包大小不能超過(guò) 2M
在小程序啟動(dòng)時(shí),默認(rèn)會(huì)下載主包并啟動(dòng)主包內(nèi)頁(yè)面,當(dāng)用戶進(jìn)入分包內(nèi)某個(gè)頁(yè)面時(shí),客戶端會(huì)把對(duì)應(yīng)分包下載下來(lái),下載完成后再進(jìn)行展示。
注意:TabBar所對(duì)應(yīng)的頁(yè)面和一些公共的方法和資源必須放在主包,在主包頁(yè)面調(diào)用分包的組件或者方法都是不頂用的
使用分包
開(kāi)發(fā)者通過(guò)在 app.jsonsubpackages
字段聲明項(xiàng)目分包結(jié)構(gòu):
{ "pages": [ "pages/index/index", "pages/logs/logs" ], "subpackages": [ { "root": "packageA", "pages": [ "pages/index/index", "pages/user/user" ] }, { "root": "packageB", "pages": [ "pages/index/index", "pages/mall/mall" ] } ], "preloadRule": { "pages/index/index": { "network": "all", "packages": [ "packageA" ] } }, "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }, "style": "v2", "sitemapLocation": "sitemap.json" }
引用原則
packageA
無(wú)法 requirepackageB
JS 文件,但可以 requireapp
、自己 package 內(nèi)的 JS 文件packageA
無(wú)法 importpackageB
的 template,但可以 requireapp
、自己 package 內(nèi)的 templatepackageA
無(wú)法使用packageB
的資源,但可以使用app
、自己 package 內(nèi)的資源
總結(jié):分包之間的資源和代碼不能相互引用,且主包不能調(diào)用分包的資源
分包預(yù)下載
開(kāi)發(fā)者可以通過(guò)配置,在進(jìn)入小程序某個(gè)頁(yè)面時(shí),由框架自動(dòng)預(yù)下載可能需要的分包,提升進(jìn)入后續(xù)分包頁(yè)面時(shí)的啟動(dòng)速度。對(duì)于獨(dú)立分包,也可以預(yù)下載主包。
分包預(yù)下載目前只支持通過(guò)配置方式使用,暫不支持通過(guò)調(diào)用API完成
preloadRule的 key
是頁(yè)面路徑,全路徑
獨(dú)立分包
獨(dú)立分包是小程序中一種特殊類型的分包,可以獨(dú)立于主包和其他分包運(yùn)行。從獨(dú)立分包中頁(yè)面進(jìn)入小程序時(shí),不需要下載主包。當(dāng)用戶進(jìn)入普通分包或主包內(nèi)頁(yè)面時(shí),主包才會(huì)被下載。
開(kāi)發(fā)者可以按需將某些具有一定功能獨(dú)立性的頁(yè)面配置到獨(dú)立分包中。當(dāng)小程序從普通的分包頁(yè)面啟動(dòng)時(shí),需要首先下載主包;而獨(dú)立分包不依賴主包即可運(yùn)行,可以很大程度上提升分包頁(yè)面的啟動(dòng)速度。
一個(gè)小程序中可以有多個(gè)獨(dú)立分包。
官方文檔在這兒:https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/independent.html
目前還沒(méi)用過(guò)獨(dú)立分包。對(duì)于到底在什么情境下運(yùn)用還不是很清楚
到此這篇關(guān)于小程序使用分包的示例代碼的文章就介紹到這了,更多相關(guān)小程序使用分包內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript實(shí)現(xiàn)函數(shù)柯里化與反柯里化過(guò)程解析
這篇文章主要介紹了javascript實(shí)現(xiàn)函數(shù)柯里化與反柯里化過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10驗(yàn)證javascript中Object和Function的關(guān)系的三段簡(jiǎn)單代碼
今天重溫經(jīng)典書(shū)籍。這一次看的是博客園李戰(zhàn)老師寫(xiě)的<<悟透JavaScript>>,也是被樓豬翻看最多的技術(shù)書(shū)籍之一。2010-06-06OpenLayers3實(shí)現(xiàn)測(cè)量功能
這篇文章主要為大家詳細(xì)介紹了OpenLayers3實(shí)現(xiàn)測(cè)量功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09JavaScript文本特效實(shí)例小結(jié)【3個(gè)示例】
這篇文章主要介紹了JavaScript文本特效,結(jié)合3個(gè)實(shí)例分析了javascript基于定時(shí)器的文字動(dòng)態(tài)操作特效相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-12-12javascript while語(yǔ)句和do while語(yǔ)句的區(qū)別分析
這篇文章通過(guò)實(shí)例代碼較詳細(xì)的給大家介紹了javascript while語(yǔ)句和do while語(yǔ)句的區(qū)別,感興趣的朋友一起看看吧2007-12-12微信小程序開(kāi)發(fā)(二):頁(yè)面跳轉(zhuǎn)并傳參操作示例
這篇文章主要介紹了微信小程序開(kāi)發(fā)頁(yè)面跳轉(zhuǎn)并傳參操作,結(jié)合實(shí)例形式詳細(xì)分析了微信小程序頁(yè)面跳轉(zhuǎn)并傳參相關(guān)操作技巧,需要的朋友可以參考下2020-06-06