欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序分包操作實戰(zhàn)指南

 更新時間:2022年10月25日 09:12:38   作者:口袋の的天空  
分包指的是把一個完整的小程序項目,按照需求劃分為不同的子包, 在構(gòu)建時打包成不同的分包,用戶在使用時按需進(jìn)行加載,下面這篇文章主要給大家介紹了關(guān)于微信小程序分包操作的相關(guā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)建了兩個分包,分別是homepay

  "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是存放分包的文件夾。homepay這兩個文件夾分別是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ù)控制器

    詳解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
  • js Canvas實現(xiàn)的日歷時鐘案例分享

    js Canvas實現(xiàn)的日歷時鐘案例分享

    本文主要分享了js實現(xiàn)的日歷時鐘案例,具有一定的參考價值,下面跟著小編一起來看下吧
    2016-12-12
  • 原生JS實現(xiàn)微信通訊錄

    原生JS實現(xiàn)微信通訊錄

    這篇文章主要為大家詳細(xì)介紹了原生JS實現(xiàn)微信通訊錄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-06-06
  • JS類型判斷的四種方法詳解

    JS類型判斷的四種方法詳解

    JavaScript中有七種原始數(shù)據(jù)類型和幾種引用數(shù)據(jù)類型,本文將清楚地介紹四種用于類型判斷的方法,分別是typeOf、instanceOf、Object.prototype.toString.call()、Array.isArray(),并介紹其使用方法和判定原理,需要的朋友可以參考下
    2024-08-08
  • js遍歷json的key和value的實例

    js遍歷json的key和value的實例

    下面小編就為大家?guī)硪黄猨s遍歷json的key和value的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-01-01
  • 深入學(xué)習(xí)js函數(shù)的隱式參數(shù) arguments 和 this

    深入學(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-06
  • js 上下左右鍵控制焦點(示例代碼)

    js 上下左右鍵控制焦點(示例代碼)

    這篇文章主要是對js上下左右鍵控制焦點的示例代碼進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2013-12-12
  • JavaScript進(jìn)階練習(xí)及簡單實例分析

    JavaScript進(jìn)階練習(xí)及簡單實例分析

    下面小編就為大家?guī)硪黄狫avaScript進(jìn)階練習(xí)及簡單實例分析。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06
  • myFocus slide3D v1.1.0 使用方法與下載

    myFocus slide3D v1.1.0 使用方法與下載

    myFocus slide3D v1.1.0 使用方法與下載,需要的朋友可以參考下。
    2011-01-01
  • 用顯卡加速,輕松把筆記本打造成取暖器的辦法!

    用顯卡加速,輕松把筆記本打造成取暖器的辦法!

    本篇文章小編為大家介紹,用顯卡加速,輕松把筆記本打造成取暖器的辦法!需要的朋友可以參考一下
    2013-04-04

最新評論