微信小程序分包操作實戰(zhàn)指南
前言
有時候我們的小程序太大,首次打開小程序的時候回比較慢,這個時候我們可以試試分包操作。分包可以讓用戶在操作小程序的時候按需下載資源(用戶在進(jìn)入某些頁面的時候才去下載相應(yīng)的資源,可以加快小程序的速度,優(yōu)化用戶體驗)。
小程序代碼有個2M限制,是不是有的時候放圖片都得忍著點,不敢把太大的放在小程序里面,只能放遠(yuǎn)程;但是隨著項目不斷迭代更新,代碼圖片越來越多,開發(fā)的時候更加小心翼翼。是不是很不舒服,還能不能讓我舒服的敲代碼了。
那就說一下分包的限制吧;分包以后單獨包最大不能超過2M;整個小程序可以達(dá)到20M;比那2M限制翻了10倍;那就讓我們愉快地敲代碼吧。
打包原則:
- 聲明 subpackages后,將按 subpackages 配置路徑進(jìn)行打包,subpackages 配置路徑外的目錄將被打包到 app(主包) 中
- app(主包)也可以有自己的 pages(即最外層的 pages 字段)
- subpackage 的根目錄不能是另外一個subpackage內(nèi)的子目錄
-tabBar頁面必須在 app(主包)內(nèi) - 登錄頁面和tabbar頁面,這幾個頁面是要分成主包的,tabBar 頁面必須在 app(主包)內(nèi)
引用原則:
- packageA 無法 require packageB JS 文件,但可以 require app、自己 package內(nèi)的 JS 文件
- packageA無法import packageB 的 template,但可以require app、自己 package內(nèi)的 template
- packageA 無法使用 packageB 的資源,但可以使用 app、自己 package 內(nèi)的資源
1.首先在app.json里面全局配置里面配置分包:(subpackages 屬性和pages同級)
我在根路徑創(chuàng)建了兩個分包,分別是home
和pay
"pages": [ "pages/index/index", "pages/user/index", ], "subpackages":[ { "root":"template/home", //分包的根路徑,彼此之間不可以重復(fù) "name":"home", //分包的標(biāo)識名字,用于預(yù)加載分包時用 "pages":[ //分包的路徑(不預(yù)加載的時候,用戶進(jìn)入分包路徑才會加載分包資源) "shop_house/shop_house" ], "independent":false //是否獨立分包(可以不加載主包就獨立加載的包,獨立分包不能當(dāng)做全局資源) }, { "root":"template/pay", "name":"pay", "pages":[ "pay_house/pay_house" ], "independent":false } ],
2.創(chuàng)建文件
template
是存放分包的文件夾。home
和pay
這兩個文件夾分別是template
的子文件夾,里面可以放圖片等其他資源和頁面。
注意:靜態(tài)資源哪個模塊的就放哪個包下,不要共享,共享就會變成主包里的資源。這也就是為什么不直接把images
文件放在template
根路徑的原因
3.查看分包效果
4.主包與分包之間的頁面跳轉(zhuǎn)
1)主包跳轉(zhuǎn)到分包
注意:跳轉(zhuǎn)的路徑要帶上分包里配置的root這一級(所有的相對路徑全部寫上),不然它找不到路徑就會報錯
主包:
<!--pages/user/index.wxml--> <text>pages/user/index.wxml</text> <image src="../images/1.jpeg"></image> <navigator url="../../template/home/shop_house/shop_house">跳轉(zhuǎn)shopping_house</navigator> <navigator url="../../template/pay/pay_house/pay_house">跳轉(zhuǎn)pay_house</navigator>
分包:
<!--template/pay/pay_house/pay_house.wxml--> <text>template/pay/pay_house/pay_house.wxml</text> <image src="../images/3.jpeg"></image>
2)分包跳轉(zhuǎn)到主包
分包跳轉(zhuǎn)到主包(方法很多種,我這里說兩種)
- wx.switchTab(Object object)
跳轉(zhuǎn)到 tabBar 頁面,并關(guān)閉其他所有非 tabBar 頁面,路徑后不能帶參數(shù)。
此方法跳轉(zhuǎn)的頁面必須是在tabBar定義過的頁面
- wx.reLaunch(Object object)
關(guān)閉所有頁面,打開到應(yīng)用內(nèi)的某個頁面,路徑后面可帶參數(shù)。
分包:
點擊“去首頁”,這樣就直接去主頁了
<navigator open-type="switchTab" url="/pages/index/index">去首頁</navigator>
總結(jié)
到此這篇關(guān)于微信小程序分包操作的文章就介紹到這了,更多相關(guān)微信小程序分包操作內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解JavaScript如何實現(xiàn)異步并發(fā)任務(wù)控制器
實現(xiàn)一個控制并發(fā)數(shù)的任務(wù)隊列?、實現(xiàn)一個異步并發(fā)任務(wù)控制器,這已經(jīng)是非常經(jīng)典的手寫題目了,因為其中涉及?異步?和?并發(fā)?的內(nèi)容,所以本文就來講講到底如何實現(xiàn)呢2023-05-05深入學(xué)習(xí)js函數(shù)的隱式參數(shù) arguments 和 this
這篇文章主要介紹了 深入學(xué)習(xí)js函數(shù)的隱式參數(shù) arguments 和 this,arguments是一個類數(shù)組結(jié)構(gòu),它保存了調(diào)用時傳遞給函數(shù)的所有實參;this是函數(shù)執(zhí)行時的上下文對象, 這個對象有些讓人感到困惑的行為。 下面分別對他們進(jìn)行討論。,需要的朋友可以參考下2019-06-06JavaScript進(jìn)階練習(xí)及簡單實例分析
下面小編就為大家?guī)硪黄狫avaScript進(jìn)階練習(xí)及簡單實例分析。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06myFocus slide3D v1.1.0 使用方法與下載
myFocus slide3D v1.1.0 使用方法與下載,需要的朋友可以參考下。2011-01-01