目前 uniApp也成為一種 App端開發的大趨勢
因為在目前跨端 uniApp可以說相當優秀

可以同時兼容 H5 PC 小程序 APP 的技術 目前市場屈指可數
那么 說到微信小程序 自然就要處理分包 因為微信小程序對應用大小限制非常銘感
限制在2MB 超過之后就會無法真機調試與打包

不過需要注意的是 就算分包 確保每個包都不大于 2MB的情況下 如果主包加上其他包總和大于 20MB依舊會超過限制

不過不用擔心 圖片建議放在服務器上 別增加小程序的負擔了 然后 一個包可以裝非常多page頁面 然后 10個包 一般的市場應用都能滿足了

所以 分包固然好 但也不能為所欲為 只能說將容納度提高了

說回到項目 目前所有的頁面 都在pages中
所以 我們的主包自然就是 我們整個項目頁面的主包

我們先打開項目跟目錄的 manifest.json
打開源碼視圖

我們在下面找到 mp-weixin 這就是 微信相關的配置
我們在下面加上

"optimization":{"subPackages": true}

意思就是開啟分包

然后 我們右鍵項目 跟目錄 多創建幾個 page包

這里 我創建了 pageA 和 pageB 兩個包

然后 我們在 pageA中創建一個 vue 文件

就叫list吧

list.vue 編寫代碼如下

<template><view class="content">LIST組件</view>
</template><script>
</script><style>
</style>

pageB 中創建一個 map.vue
代碼如下

<template><view class="content">MAP組件</view>
</template><script>
</script><style>
</style>

這樣 整體的目錄結構 就是這樣的

但 現在 pageA 和 pageB都沒有生效
我們打開 pages.json
在里面加個subPackages

"subPackages": [{"root": "pageA","pages": [{"path": "list","style": {"navigationBarTitleText": "列表"}}]},{"root": "pageB","pages": [{"path": "map","style": {"navigationBarTitleText": "集合"}}]}
],

我們配置了兩個分包 pageA和pageB
然后聲明了 它們下面的page 分包是 pageA的list 和 pageB下的map
一個包下面可以有多個page例如這樣

{"root": "pageA","pages": [{"path": "list","style": {"navigationBarTitleText": "列表"}},{"path": "map","style": {"navigationBarTitleText": "集合"}}]
}

但我這里 為了簡單點 兩個包下面就都只寫了一個界面

然后 我們pages中的 首頁 index 編寫代碼如下

<template><view class="content"><button @click="Jump()">跳轉</button></view>
</template><script>export default {data() {return {}},onLoad() {},methods: {Jump() {uni.navigateTo({url: "/pageA/list"})}}}
</script><style>*{margin: 0;padding: 0;}.content {height: 100vh;width: 100vw;position: relative;}
</style>

設置button按鈕 然后點擊事件 嘗試向 pageA下的list界面跳轉

我們嘗試微信開發者工具運行

項目啟動成功

我們點擊按鈕
套轉也是非常順利