uniapp开发小程序如何做分包

### UniApp 小程序分包实现方法

#### 主包与分包的概念
每个使用分包的小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到的公共资源/JS脚本；而分包则根据开发者的配置进行划分[^5]。

#### 配置分包
为了使小程序能够支持分包功能，在项目的`app.json`或`manifest.json`(视具体框架版本)中需要通过`subpackages`字段指定分包的信息：

{
  "pages":[],
  "globalStyle":{},
  "subPackages":[
    {
      "root":"subpackageName",
      "pages":[
        {"path":"pageA"},
        {"path":"pageB"}
      ]
    }
  ]
}

上述JSON片段展示了如何定义名为`subpackageName`的一个子包及其内部所含有的两个页面`pageA`和`pageB`[^3]。

#### 创建并管理分包目录结构
在项目根目录下建立新的文件夹作为各个分包的基础路径，比如命名为`subpkg`。接着在这个新创建出来的文件夹内按照需求继续细分出更多层次化的文件夹用于存放不同类型的资源文件或是业务逻辑模块。对于每一个具体的分包而言，则应当在其对应的配置项(`subPackages`)当中指明其相对应的实际物理位置(root属性)，同时列举该分包下的所有页面(pages数组)[^4]。

#### 示例代码展示
下面给出一段简单的例子来说明怎样在一个uni-app工程里面完成基本的分包设置过程:

假设现在有一个电商应用,其中商品列表页属于首页tab的一部分所以放在主包里;但是详情页因为访问频率较低故被安排到了单独的分包之中.

1. **构建分包架构**

在项目根目录新建名为`productDetail`的文件夹代表即将创建的商品详情分包.

2. **编辑全局配置**

修改`app.json`,加入如下所示的内容:

   ...
   "subPackages":[
     {
       "root":"/productDetail",
       "pages":[
         {"path":"detail/index","style":{"navigationBarTitleText":"商品详情"}}
       ]
     }
   ],
   ...

3. **编写组件代码**

接下来可以在`productDetail/detail`这个位置添加相应的vue单文件组件(.vue),从而形成完整的分包体系.

---