uniapp微信小程序分包

这篇具有很好参考价值的文章主要介绍了uniapp微信小程序分包。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一. 分包的概念

1. 什么是分包

2. 分包的好处

3. 分包后项目的构成

4. 分包加载规则

5. 分包体积限制

二. 分包的方法

1. 分包后的目录结构

2. 配置manifest.json

3. 配置pages.json

4. 全局修改分包文件路径文章来源地址https://www.toymoban.com/news/detail-665116.html


一. 分包的概念

1. 什么是分包

分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。

2. 分包的好处

1. 优化小程序首次启动多个消灾时间
2. 方便团队开发,解耦协作

3. 分包后项目的构成

一个主包:一般只包含项目的启动页面或 TabBar 页面、以及所有分包都需要用到的一些公共资源
多个分包:只包含和当前分包有关的页面和私有资源

4. 分包加载规则

在小程序启动时,默认会下载主包并启动主包内页面,当用户进入某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示

5. 分包体积限制

1. 整个小程序所有分包大小不超过20M(主包+所有分包)
2. 单个分包/主包大小不能超过2M

二. 分包的方法

1. 分包后的目录结构

    ├── pages       // 主包
    │   ├── index
    │   └── logs
    ├── packageA        // 分包A
    │   └── pages
    │       ├── cat
    │       └── dog
    ├── packageB        // 分包B
    │   └── pages
    │       ├── apple
    │       └── banana
    ├── manifest.json       // 配置项
    └── pages.json      // 页面路径

2. 配置manifest.json

"mp-weixin":{
    "optimization":{
      "subPackages":true // 开启分包优化
    }
}

3. 配置pages.json

在pages.json中新建"subPackages"数组,"preloadRule"对象

1. "subPackages"数组中包含两个参数:
    1.root:为子包的根目录
    2.pages:子包由哪些页面组成,参数同pages
注意:主包和分包是不能在同一目录下,所以在构建项目时,要考虑目录结构,以便后期进行分包

2. "preloadRule"中,key 是页面路径,value 是进入此页面的预下载配置
    1. network指定网络下预下载可选wifi/all(非必填)
    2. packages进入也买你后预下载的分包(必填)
{
  "pages": ["pages/index"],   // 主包内页面
  "subpackages": [
    {
      "root": "packageA",    // 分包A
      "pages": [
        {
          "path" : "pages/cat"
        },
        {
          "path" : "pages/dog"
        }
      ]
    },
    {
      "root": "packageB", // 分包B
      "pages": [
        {
          "path" : "pages/apple"
        },
        {
          "path" : "pages/banana"
        }
      ]
    }
  ],
  "preloadRule": {    // 分包预载配置 
    "pages/index": {    // 在进入小程序pages/index页面时,由框架自动预下载分包A、分包B
      "network": "all",
      "packages": ["packageA","packageB"]
    }
  }
}

4. 全局修改分包文件路径

webstorm 可通过 ctrl+shift+R 替换所有路径

到了这里,关于uniapp微信小程序分包的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 在 WebStorm 中开发 uni-app - 用vue2实现手机APP(apk) + 微信小程序项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2023年04月15日
    浏览(81)
  • WebStorm开发uni-app ,用vue2实现手机APP(apk) + 微信小程序多端项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2024年02月11日
    浏览(75)
  • 微信小程序uni-app

    小程序 是一种不需要下载、安装即可使用的应用,它实现了应用触手可及的梦想,用户扫一扫或者搜一下就能打开应用,也实现了用完即走的理念,用户不用安装太多应用,应用随处可用,但又无须安装卸载。 微信开发文档 1、工作原理 网页开发,渲染线程和脚本是互斥的

    2024年02月10日
    浏览(123)
  • 微信小程序授权(uni-app)

    概述 为了避免重复开发,自己封装了一个通用用户授权回调方法,只需要传入需要授权的scope,权限中文描述、回调函数,就可以实现一整套小程序是否授权、打开授权设置,调用后续操作函数的工作 功能 可以根据自己的实际应用进行微调 目前使用的uni-app版本,可以根据自

    2024年02月16日
    浏览(86)
  • uni-app 小程序主包、分包优化方案

    先看效果 图1  图2是点图1的那个蓝色的字 代码依赖分析看的 好,如果博主这2两张图是你要的效果,来,说说具体操作方案 一、manifest.json加代码,如下,官方的文旦地址点右边---》uni-app官网 二、 目录结构 1、新建一个pageCity(你自己命名) 2、移动你原本的子页面文件(非

    2024年02月15日
    浏览(42)
  • 语法速通 uni-app随笔【uni-app】【微信小程序】【vue】

    其中, pages 目录/ index 目录【必有】: index.js 编写业务逻辑 【初始数据,生命周期函数】 index.json 编写配置 index.wxml 编写模板 【可理解为本页html】 index.wxss 【可理解为本页css】 直接输入敲回车,连尖括号都不需要就可以标签补全 1)初始数据写死 在 index.wxml 引入变

    2024年02月12日
    浏览(174)
  • uni-app微信小程序使用echarts

    前言:本来是使用的ucharts,但因为无法监听图例点击交互,满足不了需求,所以只能放弃。 首先,下载echart组件。可以先随便建个文件夹,然后 npm init。接着下载依赖 然后找到 node_modulesmpvue-echarts下的文件,如图 只留下src,其他的删掉(没有用到)。然后复制 mpvue-echart

    2024年02月10日
    浏览(74)
  • uni-app 微信小程序 激励视频广告

    封装激励视频-Ad.js 调用上面写的方法:

    2024年02月12日
    浏览(83)
  • 【uni-app微信小程序】实现支付功能

    实现微信支付功能需要在小程序后台配置支付相关信息,并且在前端代码中调用微信支付API进行支付操作。好的, uni-app微信小程序实现支付功能整体流程 大致如下: 注册微信公众平台,并完成开发者资质认证; 在微信商户平台注册商户账号,并完成商户资质认证; 在商户

    2024年02月13日
    浏览(99)
  • uni-app(微信小程序)获取当前位置uni.getLocation

     1、微信公众平台  开发  开发管理   2、开通之后到项目文件    3、下载腾讯地图插件并引入到文件中    

    2024年02月11日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包