微信小程序---分包操作

news2025/7/13 2:27:22

有时候我们的小程序太大,首次打开小程序的时候回比较慢,这个时候我们可以试试分包操作。分包可以让用户在操作小程序的时候按需下载资源(用户在进入某些页面的时候才去下载相应的资源,可以加快小程序的速度,优化用户体验)。

小程序代码有个2M限制,是不是有的时候放图片都得忍着点,不敢把太大的放在小程序里面,只能放远程;但是随着项目不断迭代更新,代码图片越来越多,开发的时候更加小心翼翼。是不是很不舒服,还能不能让我舒服的敲代码了。

那就说一下分包的限制吧;分包以后单独包最大不能超过2M;整个小程序可以达到20M;比那2M限制翻了10倍;那就让我们愉快地敲代码吧。

打包原则:

  • 声明 subpackages后,将按 subpackages 配置路径进行打包,subpackages 配置路径外的目录将被打包到 app(主包) 中
  • app(主包)也可以有自己的 pages(即最外层的 pages 字段)
  • subpackage 的根目录不能是另外一个subpackage内的子目录
    -tabBar页面必须在 app(主包)内
  • 登录页面和tabbar页面,这几个页面是要分成主包的,tabBar 页面必须在 app(主包)内

引用原则:

  • packageA 无法 require packageB JS 文件,但可以 require app、自己 package内的 JS 文件
  • packageA无法import packageB 的 template,但可以require app、自己 package内的 template
  • packageA 无法使用 packageB 的资源,但可以使用 app、自己 package 内的资源

1.首先在app.json里面全局配置里面配置分包:(subpackages 属性和pages同级)

我在根路径创建了两个分包,分别是homepay

  "pages": [
    "pages/index/index",
    "pages/user/index",
  ],
  "subpackages":[
    {
      "root":"template/home", //分包的根路径,彼此之间不可以重复
      "name":"home",  	//分包的标识名字,用于预加载分包时用
      "pages":[			//分包的路径(不预加载的时候,用户进入分包路径才会加载分包资源)
        "shop_house/shop_house"
      ],
      "independent":false   //是否独立分包(可以不加载主包就独立加载的包,独立分包不能当做全局资源)
    },
    {
      "root":"template/pay",
      "name":"pay",
      "pages":[
        "pay_house/pay_house"
      ],
      "independent":false
    }
  ],

2.创建文件

template是存放分包的文件夹。homepay这两个文件夹分别是template的子文件夹,里面可以放图片等其他资源和页面。
注意:静态资源哪个模块的就放哪个包下,不要共享,共享就会变成主包里的资源。这也就是为什么不直接把images文件放在template根路径的原因
在这里插入图片描述

3.查看分包效果

在这里插入图片描述

4.主包与分包之间的页面跳转

1)主包跳转到分包

注意:跳转的路径要带上分包里配置的root这一级(所有的相对路径全部写上),不然它找不到路径就会报错

主包:

<!--pages/user/index.wxml-->
<text>pages/user/index.wxml</text>
<image src="../images/1.jpeg"></image>
<navigator url="../../template/home/shop_house/shop_house">跳转shopping_house</navigator>
<navigator url="../../template/pay/pay_house/pay_house">跳转pay_house</navigator>

在这里插入图片描述
分包:

<!--template/pay/pay_house/pay_house.wxml-->
<text>template/pay/pay_house/pay_house.wxml</text>
<image src="../images/3.jpeg"></image>

在这里插入图片描述

2)分包跳转到主包

分包跳转到主包(方法很多种,我这里说两种)

  • wx.switchTab(Object object)
    跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,路径后不能带参数。
    此方法跳转的页面必须是在tabBar定义过的页面

  • wx.reLaunch(Object object)
    关闭所有页面,打开到应用内的某个页面,路径后面可带参数。

分包:
点击“去首页”,这样就直接去主页了

<navigator open-type="switchTab" url="/pages/index/index">去首页</navigator>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/406638.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

前端学习笔记(15)-Vue3状态管理store及Vuex的使用

1.状态管理 2.用响应式API做简单状态管理 3.Vuex基础 4.Vuex 核心概念 5. VuexsessionStorage实现数据存储1.状态管理理论上来说&#xff0c;每一个 Vue 组件实例都已经在“管理”它自己的响应式状态了。我们以一个简单的计数器组件为例&#xff1a;<script setup> impor…

最新小程序反编译详细教程,亲测可用

小程序因为触手可及、自带推广等的特点&#xff0c;自诞生以来&#xff0c;实现了很多的商业场景&#xff0c;同时取代了App的大部分市场份额。其实小程序的开发和网页开发类似&#xff0c;同样使用的是JavaScript开发的&#xff0c;属于前端&#xff0c;所以借助一些程序的帮助…

html+css唯美登录页面,代码提供(效果展示)

文章目录效果图所有代码效果图 所有代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" cont…

vue脚手架报错:“Component name “***“ should always be multi-word”解决方法

出现的问题 在我们写完脚手架运行 npm run serve 后控制台报错 页面报错 报错的原因 在为自定义组件命名的时候未按照官方代码规范进行命名&#xff0c;根据 ESLint 官方代码风格指南&#xff0c;除了根组件&#xff08;App.vue&#xff09;以外&#xff0c;其他自定义组件命名…

若依框架登录后跳转其他页面获取不同的菜单登录进入后跳转至动态路由的第一个路由

最近碰到的需求是登录进入后,先跳转至一个自己定义的页面,在这个页面选择一个系统后,进入若依的系统,根据选择的系统获取相应的菜单,进入页面后默认跳转至后端返回的动态路由的第一个路由 1.首先在登录页面login.vue做如下改动 写成你要跳转过去的页面:(这个路由如果是自己定…

蓝桥杯冲击-02约数篇(必考)

文章目录 前言 一、约数是什么 二、三大模板 1、试除法求约数个数 2、求约数个数 3、求约数之和 三、真题演练 前言 约数和质数一样在蓝桥杯考试中是在数论中考察频率较高的一种&#xff0c;在省赛考察的时候往往就是模板题&#xff0c;难度大一点会结合其他知识点考察&#x…

安装element ui

安装element ui记录 步骤 1.先在dev控制台输入npm i element-ui --save 2.出现警告 F:\vue_test\src> npm i element-ui --save npm WARN deprecated core-js2.6.12: core-js<3.23.3 is no longer maintained and not recommended for usage due to the number of is…

Vue项目实战——实现一个任务清单(学以致用,两小时带你巩固和强化Vue知识点)

Vue2.x 项目实战&#xff08;一&#xff09; 内容参考链接Vue2.x全家桶Vue2.x 全家桶参考链接Vue2.x项目&#xff08;一&#xff09;Vue2.x 实现一个任务清单Vue2.x项目&#xff08;二&#xff09;Vue2.x 实现GitHub搜索案例Vue3.x项目&#xff08;三&#xff09;Vue3.x 实现一…

Vue 高德地图(@amap/amap-jsapi-loader)的基本使用:添加标记、POI关键字搜索、路线规划...(方法一)

高德地图的基本事件与使用前言&#xff1a; 引入并初始化渲染地图1、初始化地图2、地图鼠标点击事件3、添加标记、 移除标记点4、搜索服务——POI关键字搜索 [AMap.PlaceSearch]5、驾车路线规划服务5.1 可拖拽驾车路线规划 [AMap.DragRoute]5.2 途经点 &#xff08;起点 终点 途…

在vue3+ts项目里使用query和params传参

一 query 传参 &#xff08;类似get请求&#xff09; query 传参方式① 传递方组件 home.vue <template><div classc><p>query传参</p><el-button type"success" click"toList"> to list</el-button> </div>…

LayUI框架的使用步骤实现登录页面

目录 一、LayUI的简介 二、下载安装 三、引入并且测试 四、自定义模块 四、利用LayUI实现一个登录页面 一、LayUI的简介 1.1 什么是LayUI&#xff1f; Layui&#xff08;谐音&#xff1a;类 UI) 是一套开源的 Web UI 解决方案&#xff1b; 由国人开发&#xff08;作者贤心…

Python人脸识别

#头文件&#xff1a;import cv2 as cvimport numpy as npimport osfrom PIL import Imageimport xlsxwriterimport psutilimport time#人脸录入def get_image_name(name):name_map {f.split(.)[1]:int(f.split(.)[0]) for f in os.listdir("./picture")}if not name…

宇宙最强-GPT-4 横空出世:最先进、更安全、更有用

文章目录前言一、准确性提升1.创造力2.视觉输入3.更长的上下文二、相比于ChatGPT有哪些提升1.GPT-4 的高级推理能力超越了 ChatGPT2.GPT-4 在多种测试考试中均优于 ChatGPT。三、研究团队在GPT-4模型都做了哪些改善1.遵循 GPT、GPT-2 和 GPT-3 的研究路径2.我们花了 6 个月的时…

2022年Web前端开发流程和学习路线(详尽版)

前言 前端侧重于人机交互和用户体验&#xff0c;后端侧重于业务逻辑和大规模数据处理。理论上&#xff0c;面向用户的产品里&#xff0c;所有问题&#xff08;包括产品、设计、后端、甚至看不见的问题&#xff09;的表现形式&#xff0c;都会暴露在前端&#xff0c;而只有部分…

JS防抖和节流

前言 在进行窗口的操作或者输入框操作时&#xff0c;如果事件处理函数用的频率无限制&#xff0c;会加重浏览器和服务器的负担&#xff0c;此时我们就可以用防抖&#xff08;debounce&#xff09;和节流&#xff08;throttle&#xff09;的方式来减少调用频率&#xff0c;同时…

简析强制缓存和协商缓存

零、目录 背景介绍 http 缓存机制 使用小结 一、 背景介绍 浏览器和服务器进行交互的过程&#xff0c; 时间开销的瓶颈往往出现在数据的传输的过程之中。 这个场景类似介于 A城 到 B城 之间只有一座 “通道” &#xff0c; 每次想从A城 到 B城 &#xff0c;必须按照人数交付高…

Maven使用教程(IDEA版)

目录 一、Maven简介 1.1 在项目中如何导入jar包&#xff1f; 1.2 传统导入jar包的方式存在什么问题&#xff1f; 1.3 项目生命周期 1.4 Maven简介 二、Maven安装及配置 2.1 Maven下载 2.2 Maven安装 2.3 配置环境变量 三、Maven的项目结构 3.1 Maven的项目结构 3.2…

【CSS】CSS 特性 ③ ( CSS 优先级 | 优先级引入 | 选择器基本权重 )

文章目录一、CSS 优先级1、优先级引入2、选择器基本权重3、完整代码示例一、CSS 优先级 1、优先级引入 定义 CSS 样式时 , 可能出现 多个 类型相同的 规则 定义在 同一个元素上 , 如果 CSS 选择器 相同 , 执行 CSS 层叠性 , 根据 就近原则 选择执行的样式 , 如 : 出现两个 div…

VueX使用

vuex基本概念 vuex官方文档 vuex是vue的状态管理工具&#xff0c;状态即数据。 状态管理就是集中管理vue中 通用的 一些数据 注意&#xff08;官方原文&#xff09;&#xff1a; 不是所有的场景都适用于vuex&#xff0c;只有在必要的时候才使用vuex 使用了vuex之后&#xf…

手机解锁方法:8个顶级的 Android 手机解锁软件

一般来说&#xff0c;太简单的密码是不安全的&#xff0c;所以我们设置一个安全的密码&#xff0c;可能会稍微复杂一点。然而&#xff0c;我们可能经常会忘记复杂的密码并锁定我们的 Android 智能手机。 8个顶级的 Android 手机解锁软件 如果您遇到过这种情况并且正在寻找一种…