手把手教你uniapp和小程序分包(图文)-猿码集

1.什么是uniapp分包

uniapp是一种基于Vue.js开发的跨平台开发框架，可以使用一个代码base开发出同时运行在多个平台（如微信小程序、H5、App等）的应用。 uniapp分包就是将应用按照业务逻辑进行分解后，将不同的业务模块编译成不同的小程序分包，减少应用的首屏加载时间。

1.1 分包的原理

在小程序中，每个包的体积有限制，单个包的大小不能超过2M，而整个小程序的包体不能超过8M。当小程序启动时，微信客户端会自动下载所有的小程序代码和资源，而分包机制则是将开发者的代码分成不同的包进行下载和加载。

为了更快地展现出小程序的页面，可以将启动页、首页等最需要展现的页面作为主包中的页面加载。而不需要马上展现出来的功能可被分别收集到不同子包中加载。这些子包在需要时可以被动态加载。利用分包机制可以大大提高小程序的启动速度和用户体验。

1.2 分包的优点

加快小程序的启动速度，为客户带来更好的使用体验；

允许小程序可以在更短的时间内下载更多的内容，从而得到更高的小程序限制；

可以提高应用的可维护性和可扩展性；

允许不同的开发人员并行开发不同的小程序模块；

减少了主包的大小，达到了优化小程序性能、减少请求资源的效果。

2.如何使用uniapp分包

2.1 创建uniapp分包项目

首先需要安装HBuilderX软件，然后新建uniapp项目，选择创建uni-app->空项目。

//创建空项目 npm install -g @vue/cli vue create -p dcloudio/uni-preset-vue my-project # OR yarn global add @vue/cli vue create -p dcloudio/uni-preset-vue my-project //快速原型开发 npm install -g @vue/cli @vue/cli-service-global vue serve

2.2 配置分包规则

在分包规则中，我们可以将每个模块按照业务逻辑分为不同的包，然后在pages.json文件中进行配置。


{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {}
        }
    ],
    "subPackages": [
        {
            "root": "pages/packageA",
            "pages": [
                {
                    "path": "login/index",
                    "style": {}
                }
            ]
        },
        {
            "root": "pages/packageB",
            "pages": [
                {
                    "path": "user/index",
                    "style": {}
                }
            ]
        }
    ],
    "globalStyle": {},
    "usingComponents": {}
}

这里我们创建了两个子包packageA和packageB，每个包里面都包含了一个页面。当小程序启动时，会默认加载主包，当需要进入子包内的页面时，会动态加载该子包。

2.3触发回调函数

因为加载子包需要一定的时间，需要在请求成功后更新初始的显示内容。可以通过为callFunction传递一个参数的方式，当回调函数被触发时，返回子页面的url地址。


uni.loadSubPackage({
    name: 'sub1',//加载的包名
    success: function (res) {
        //更新页面
        console.log(res);
    },
    fail: function (res) {},
    complete: function (res) {}
});

注意到，一旦子包被加载并初始化成功后，该子包将自动被缓存，因此，在下一次进入该子包或其内的页面时，将不会列入子包往来计数，仅仅发送与其他非缓存子包相关的下载请求，直接从缓存读取不会有网络状态下的下载流量。

3.如何使用微信小程序分包

在小程序中使用分包需要做如下准备工作：

3.1 将构建结果上传到服务器

因为小程序分包需要从服务器下载子包，在本地开发时，必须将构建结果上传到服务器上实现。

3.2 配置小程序分包

在微信小程序中，分包配置主要通过app,json来进行:


{
  "pages":[
    "pages/index/index",
  ],
  "subPackages": [
    {
      "root": "pages/sub",
      "name": "sub",
      "pages": [
        "pages/sub/index"
      ]
    }
  ]
}

代码中的subPackages为配置分包详情，每一个subPackages代表一个分包。其中root为分包的根目录，name为分包的唯一名称，在小程序代码中引用分包时需要用到。

3.3加载微信小程序分包和触发回调函数

微信小程序分包的加载可以利用微信小程序的wx.loadSubPackage()方法实现。

我们看下面的示例代码，它查询了sub的当前加载状态，并在回调函数中更新页面及其组件状态：


//触发微信小程序分包的加载
wx.loadSubPackage({
  name: 'sub',
  success: res => {
    //更新页面及其组件状态
  },
  fail: err => {
    //错误提示
  }
})

4.小结

本文主要介绍了uniapp和微信小程序分包的使用方法。分包技术能够优化小程序的性能表现，提高客户的使用体验。有了分包技术，可以将不同功能的代码分别打包成不同的包，从而提高小程序的启动速度。

同时，我们需要注意的是，分包规则还要视应用内的具体需求去调整，避免因分包而导致使用问题。在分包方案中，我们应该避免将不必要的逻辑放在子包中，这将会影响用户体验。相反，应该将许多重要的页面功能集中在主包中，从而保障用户流畅的操作体验。

手把手教你uniapp和小程序分包(图文)