前言

有時(shí)候我們的小程序太大，首次打開(kāi)小程序的時(shí)候回比較慢，這個(gè)時(shí)候我們可以試試分包操作。分包可以讓用戶在操作小程序的時(shí)候按需下載資源（用戶在進(jìn)入某些頁(yè)面的時(shí)候才去下載相應(yīng)的資源，可以加快小程序的速度，優(yōu)化用戶體驗(yàn)）。

小程序代碼有個(gè)2M限制，是不是有的時(shí)候放圖片都得忍著點(diǎn)，不敢把太大的放在小程序里面，只能放遠(yuǎn)程；但是隨著項(xiàng)目不斷迭代更新，代碼圖片越來(lái)越多，開(kāi)發(fā)的時(shí)候更加小心翼翼。是不是很不舒服，還能不能讓我舒服的敲代碼了。

那就說(shuō)一下分包的限制吧；分包以后單獨(dú)包最大不能超過(guò)2M；整個(gè)小程序可以達(dá)到20M；比那2M限制翻了10倍；那就讓我們愉快地敲代碼吧。

打包原則：

• 聲明 subpackages后，將按 subpackages 配置路徑進(jìn)行打包，subpackages 配置路徑外的目錄將被打包到 app（主包） 中
• app（主包）也可以有自己的 pages（即最外層的 pages 字段）
• subpackage 的根目錄不能是另外一個(gè)subpackage內(nèi)的子目錄
  -tabBar頁(yè)面必須在 app（主包）內(nèi)
• 登錄頁(yè)面和tabbar頁(yè)面，這幾個(gè)頁(yè)面是要分成主包的，tabBar 頁(yè)面必須在 app（主包）內(nèi)

引用原則：

• packageA 無(wú)法 require packageB JS 文件，但可以 require app、自己 package內(nèi)的 JS 文件
• packageA無(wú)法import packageB 的 template，但可以require app、自己 package內(nèi)的 template
• packageA 無(wú)法使用 packageB 的資源，但可以使用 app、自己 package 內(nèi)的資源

1.首先在app.json里面全局配置里面配置分包：（subpackages 屬性和pages同級(jí)）

我在根路徑創(chuàng)建了兩個(gè)分包，分別是home和pay

  "pages": [
    "pages/index/index",
    "pages/user/index",
  ],
  "subpackages":[
    {
      "root":"template/home", //分包的根路徑，彼此之間不可以重復(fù)
      "name":"home",  	//分包的標(biāo)識(shí)名字，用于預(yù)加載分包時(shí)用
      "pages":[			//分包的路徑（不預(yù)加載的時(shí)候，用戶進(jìn)入分包路徑才會(huì)加載分包資源）
        "shop_house/shop_house"
      ],
      "independent":false   //是否獨(dú)立分包（可以不加載主包就獨(dú)立加載的包，獨(dú)立分包不能當(dāng)做全局資源）
    },
    {
      "root":"template/pay",
      "name":"pay",
      "pages":[
        "pay_house/pay_house"
      ],
      "independent":false
    }
  ],

2.創(chuàng)建文件

template是存放分包的文件夾。home和pay這兩個(gè)文件夾分別是template的子文件夾，里面可以放圖片等其他資源和頁(yè)面。
注意：靜態(tài)資源哪個(gè)模塊的就放哪個(gè)包下，不要共享，共享就會(huì)變成主包里的資源。這也就是為什么不直接把images文件放在template根路徑的原因

3.查看分包效果

4.主包與分包之間的頁(yè)面跳轉(zhuǎn)

1）主包跳轉(zhuǎn)到分包

注意：跳轉(zhuǎn)的路徑要帶上分包里配置的root這一級(jí)（所有的相對(duì)路徑全部寫(xiě)上），不然它找不到路徑就會(huì)報(bào)錯(cuò)

主包：

<!--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)到主包（方法很多種，我這里說(shuō)兩種）

• wx.switchTab(Object object)

跳轉(zhuǎn)到 tabBar 頁(yè)面，并關(guān)閉其他所有非 tabBar 頁(yè)面，路徑后不能帶參數(shù)。

此方法跳轉(zhuǎn)的頁(yè)面必須是在tabBar定義過(guò)的頁(yè)面

• wx.reLaunch(Object object)

關(guān)閉所有頁(yè)面，打開(kāi)到應(yīng)用內(nèi)的某個(gè)頁(yè)面，路徑后面可帶參數(shù)。

分包：

點(diǎn)擊“去首頁(yè)”，這樣就直接去主頁(yè)了

<navigator open-type="switchTab" url="/pages/index/index">去首頁(yè)</navigator>

總結(jié)

到此這篇關(guān)于微信小程序分包操作的文章就介紹到這了,更多相關(guān)微信小程序分包操作內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論