使用wepy進行微信小程序分包處理

我的分包配置

1. 目錄結構(部分)

├──pages
│   ├── home.wpy
│   ├── log.wpy
│   └── packageA
│       ├── imgs
│       ├── page_0.wpy
│       └── page_1.wpy
│   └── packageB
│       ├── imgs
│       ├── page_0.wpy
│       └── page_1.wpy
└──app.wpy

2. app.wpy 配置

config= {
    pages: [
      'pages/home',
      'pages/log'
    ],
    subPackages: [
      {
        root: "pages/packageA",
        name:  "packageA",
        pages: [
            'page_0',
            'page_1'
        ]
      },
      {
        root: "pages/packageB",
        name:  "packageA",
        pages: [
            'page_0',
            'page_1'
        ]
      }
    ]
    // ... other configuration
}

3. 使用

1. 跳轉
   • 分包的跳轉方式只需要在原來的基礎上添加分包的根目錄即可
   • 其它不變

例

// 分包前
this.$navigate('page_0')

// 分包后
this.$navigate('packageA/page_0')

2. 分包內的引用

// 分包前
import api from '../utils/api'

// 分包后
import api from '../../utils/api'

3. 靜態資源
   我進行分包的一部分原因是因為，個別模塊需要用到的本地靜態資源占用空間較大，導致小程序體積太大無法上傳。

小程序模板默認將靜態資源放在項目根目錄，經測試，分包時需要將對應分包使用到的分包根目錄下才能解決上述問題。

4. 填坑

• 微信小程序文檔中的分包配置字段為subpackages，如此配置在 wepy 1.7.x版本中無法正常跳轉到分包頁面的情況
  原因是因為wepy，在讀取配置時，使用的是subPackages
  因此在使用 wepy 1.7.x 版本的朋友需要同步修改一個這個字段的書寫

tip: 該問題已經在 wepy 2.1.0 中解決

• 截止博主寫這個博客的時候，微信官方的分包目錄結構仍為下圖所示，親測在 wepy 1.7.x 版本中會出現頁面無法找到的問題，正確配置方式請參見本文的部分
  

ReadMore

【已解決】wepy中使用分包加載報錯
微信開放文檔|分包