小程序uni-app分包優(yōu)化、頁(yè)面預(yù)加載、頁(yè)面跳轉(zhuǎn)封裝

優(yōu)化

因小程序有體積和資源加載限制，各家小程序平臺(tái)提供了分包方式，優(yōu)化小程序的下載和啟動(dòng)速度。在小程序啟動(dòng)時(shí)，默認(rèn)會(huì)下載主包并啟動(dòng)主包內(nèi)頁(yè)面，當(dāng)用戶進(jìn)入分包內(nèi)某個(gè)頁(yè)面時(shí)，會(huì)把對(duì)應(yīng)分包自動(dòng)下載下來(lái)，下載完成后再進(jìn)行展示。



一、分包優(yōu)化

注意：

subPackages 里的pages的路徑是 root 下的相對(duì)路徑，不是全路徑。

微信小程序每個(gè)分包的大小是2M，總體積一共不能超過(guò)16M。

分包下支持獨(dú)立的 static 目錄，用來(lái)對(duì)靜態(tài)資源進(jìn)行分包。

uni-app內(nèi)支持對(duì)微信小程序、QQ小程序、百度小程序、支付寶小程序、字節(jié)小程序(HBuilderX 3.0.3+)分包優(yōu)化，即將靜態(tài)資源或者js文件放入分包內(nèi)不占用主包大小。

針對(duì)vendor.js過(guò)大的情況可以使用運(yùn)行時(shí)壓縮代碼

HBuilderX創(chuàng)建的項(xiàng)目勾選運(yùn)行–>運(yùn)行到小程序模擬器–>運(yùn)行時(shí)是否壓縮代碼

cli創(chuàng)建的項(xiàng)目可以在package.json中添加參數(shù)–minimize，示例：“dev:mp-weixin”: “cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize”

1.目錄

pages是我們的主包，里面有登錄頁(yè)和index開(kāi)頭的3個(gè)底部tabBar選項(xiàng)卡頁(yè)面。pagesOther里面是我們的分包，里面有個(gè)人中心的一些訂單和消息頁(yè)面。

注意：tabBar 頁(yè)面以及引用的頁(yè)面都需要放在主包，靜態(tài)文件夾名為 static

┌─pages               

│  ├─index

│  │  └─index.vue    

│  ├─index2

│  │  └─index2.vue    

│  ├─index3

│  │  └─index3.vue    

│  └─login

│     └─login.vue    

├─pagesOther

│  ├─static

│  └─personal

│     └─order.vue

│     └─message.vue

├─static             

├─main.js       

├─App.vue          

├─manifest.json  

└─pages.json            

2.分包配置

修改 mainfest.json 配置，點(diǎn)擊源碼視圖，在 mp-weixin 中加入以下代碼

修改 pages.json 配置，在 pages 同級(jí)下新增 subPackages，分包中配置了 page 路徑后，主包 pages 中就不需要了

"pages": [
  // 登錄
  {
    "path": "pages/login/login",
    "style": {
      "navigationBarTitleText": "登錄"
    }
  },
  // 選項(xiàng)卡
  {
    "path": "pages/idnex1/idnex1",
    "style": {
      "navigationBarTitleText": "選項(xiàng)卡一"
    }
  },
  {
    "path": "pages/idnex2/idnex2",
    "style": {
      "navigationBarTitleText": "選項(xiàng)卡二"
    }
  },
  {
    "path": "pages/idnex3/idnex3",
    "style": {
      "navigationBarTitleText": "選項(xiàng)卡三"
    }
  }
   ],
"subPackages": [{
  "root": "pagesOther",  // 分包名稱
  "pages": [
    // 省略無(wú)數(shù)個(gè)頁(yè)面路徑
    ...
    // 個(gè)人中心
    {
      "path": "personal/order",
      "style": {
        "navigationBarTitleText": "訂單"
      }
    },
    {
      "path": "personal/message",
      "style": {
        "navigationBarTitleText": "消息"
      }
    }
   ]
}],
3.頁(yè)面預(yù)加載






配置preloadRule后，在進(jìn)入小程序某個(gè)頁(yè)面時(shí)，由框架自動(dòng)預(yù)下載可能需要的分包，提升進(jìn)入后續(xù)分包頁(yè)面時(shí)的啟動(dòng)速度

在剛剛 pages.json 中繼續(xù)添加 preloadRule 預(yù)加載配置

packages：表示進(jìn)入 pages/index/index1 這個(gè)頁(yè)面后加載pagesOther這個(gè)分包，值為 __APP__ 時(shí)表示主包

network：在指定網(wǎng)絡(luò)下預(yù)下載，可選值為：all（不限網(wǎng)絡(luò)）、wifi（僅wifi下預(yù)下載）

"preloadRule": {
  "pages/index/index1": {
    "network": "all",
    "packages": ["pagesOther"]
  }
},
然后我們可以看下運(yùn)行時(shí)的依賴分析


二、頁(yè)面跳轉(zhuǎn)

類似HTML中的 <a> 組件，但只能跳轉(zhuǎn)本地頁(yè)面。目標(biāo)頁(yè)面必須在pages.json中注冊(cè)

1.UNI跳轉(zhuǎn)方法

uni方法進(jìn)行跳轉(zhuǎn)

uni.navigateTo

保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面，使用uni.navigateBack可以返回到原頁(yè)面

uni.redirectTo

關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面

uni.reLaunch

關(guān)閉所有頁(yè)面，打開(kāi)到應(yīng)用內(nèi)的某個(gè)頁(yè)面

uni.switchTab

跳轉(zhuǎn)到 tabBar 頁(yè)面，并關(guān)閉其他所有非 tabBar 頁(yè)面

uni.navigateBack

關(guān)閉當(dāng)前頁(yè)面，返回上一頁(yè)面或多級(jí)頁(yè)面?？赏ㄟ^(guò) getCurrentPages() 獲取當(dāng)前的頁(yè)面棧，決定需要返回幾層

uni.preloadPage

預(yù)加載頁(yè)面，是一種性能優(yōu)化技術(shù)。被預(yù)載的頁(yè)面，在打開(kāi)時(shí)速度更快


2.封裝為vue方法

我們可以自己封裝為Vue方法，來(lái)調(diào)用跳轉(zhuǎn)與傳參跳轉(zhuǎn)

var utils = {};
//公共處理方法
utils.install = function(Vue, option) {
  // 頁(yè)面跳轉(zhuǎn)
  Vue.prototype.jump = function(path) {
    uni.navigateTo({
      url: path
    })
  };
  // 返回
  Vue.prototype.back = function(obj) {
  uni.navigateBack(obj);
  };
  // 帶參跳轉(zhuǎn)
  Vue.prototype.togo = function(url,data){
    url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
    uni.navigateTo({  
      url
    })
  };
  function param(data) {
    let url = ''
    for (var k in data) {
      let value = data[k] !== undefined ? data[k] : ''
      url += '&' + k + '=' + encodeURIComponent(value)
    }
    return url ? url.substring(1) : ''
  };
  // 獲取登錄用戶
  Vue.prototype.getUserInfo = function() {
  let res = uni.getStorageSync('userInfo');
  if (res) {
    return res
  } else {
    return {}
  }
  };
};


export default utils;
在 main.js 中use一下就可以在頁(yè)面用了

import utils from './common/util.js'
Vue.use(utils)
攜帶 userid 跳轉(zhuǎn)到 order 頁(yè)面

togoOrderList(userid) {
  this.togo('/pagesOther/personal/order',{userId: userid})
}


當(dāng)然也可以使用uni三方組件進(jìn)行頁(yè)面跳轉(zhuǎn)







作者：小碼哥

歡迎關(guān)注微信公眾號(hào) ：碼出宇宙

掃描添加好友邀你進(jìn)技術(shù)交流群，加我時(shí)注明【姓名+公司(學(xué)校)+職位】