微信小程序分包处理操作

àì夳堔傛蜴生んèń 2023-01-15 08:30 308阅读 0赞

--------------------

**要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)**

--------------------

大家都知道，微信小程序的项目是有大小限制的，不能超过2M，超过2M的我们就要实行分包处理。

温馨提示：我们在写小程序的项目的时候，不能等项目写完了看着太大才去决定要分包，而是要在写之前就要去判断项目的大小，后期实行分包过分麻烦。不要问柚子是怎么知道的，问就是猜的......

下面开始讲解操作

第一步，我们要先创建一个文件夹，跟pages同级，用来放我们的分包，如图所示，package文件夹，内部可以再新建一个pages文件夹来存放页面，新建static文件夹存放静态资源文件

![20210422094711734.png][]

第二步，找到我们的app.json文件并打开他，下面我用代码展示，方便复制粘贴就不截图了

//Json文件是没有注释的，如果复制记得要删除注释
     //这里面我只解释两个，分包操作的话，pages里面我们就只放所有的tabBar页面即可，其余所有页面都放到分包里面去，这段代码是我的一个项目的路径，五个tabBar页面放到pages里
     //subpackages里面存放我们其余的所有页面的路径，root后面是我们分包文件夹的名字，下面写路径可以不用加这个名字了，本来里面有很多路径的，但是我都删掉了，留了几个参考
     {
      "pages": [
        "pages/home/index",
        "pages/Collection/entrance/index",
        "pages/Statistical-query/entrance/index",
        "pages/personalCenter/entrance/index",
        "pages/map/entrance/index"
      ],
      "subpackages": [
        {
          "root": "package",
          "pages": [
            "pages/auth/login/index",
            "pages/auth/updatePass/index",
            "pages/map/xzcjMap/index",
            "pages/map/scglcjMap/index"
          ]
        }
      ],
      "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#0867FF",
        "navigationBarTitleText": "XXXXX",
        "navigationBarTextStyle": "white",
        "backgroundColor": "#0867FF"
      },
      "tabBar": {
        "selectedColor": "#20a0ff",
        "color": "#666",
        "list": [
          {
            "pagePath": "pages/home/index",
            "iconPath": "/static/img/home_menu.png",
            "selectedIconPath": "/static/img/selected_home_menu.png",
            "text": "XXXXX"
          },
          {
            "pagePath": "pages/map/entrance/index",
            "iconPath": "/static/img/map_menu.png",
            "selectedIconPath": "/static/img/selected_map_menu.png",
            "text": "XXXXX"
          },
          {
            "pagePath": "pages/Statistical-query/entrance/index",
            "iconPath": "/static/img/analyse_menu.png",
            "selectedIconPath": "/static/img/selected_analyse_menu.png",
            "text": "XXXXX"
          },
          {
            "pagePath": "pages/Collection/entrance/index",
            "iconPath": "/static/img/collection_menu.png",
            "selectedIconPath": "/static/img/selected_collection_menu.png",
            "text": "XXXXX"
          },
          {
            "pagePath": "pages/personalCenter/entrance/index",
            "iconPath": "/static/img/center_menu.png",
            "selectedIconPath": "/static/img/selected_center_menu.png",
            "text": "XXXXX"
          }
        ]
      },
      "networkTimeout": {
        "request": 100000,
        "downloadFile": 100000
      },
      "style": "v2",
      "sitemapLocation": "sitemap.json"
    }

就是这样，很简单的，我们可以在右上角详情里去查看分包和主包的大小

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDUyMjc0_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDUyMjc0_size_16_color_FFFFFF_t_70 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDUyMjc0_size_16_color_FFFFFF_t_70 2][]

好了，搞完了，你们可以试一下，有什么问题随时来问，希望能有帮助吧。

[20210422094711734.png]: /images/20221022/91c4f353d2794016946cfc96af5d96fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDUyMjc0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210422100655488.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDUyMjc0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDUyMjc0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210422101304476.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDUyMjc0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDUyMjc0_size_16_color_FFFFFF_t_70 2]: /images/20221022/df67465ebd624013b56838a8b9f25f49.png