小程序内的分包与数据共享

news/2024/9/25 9:40:11/

一:数据共享

小程序内的数据共享和vue当中不一样,vue当中的vue实例可以使得所有的组件都能this.store

但是小程序它只有page对象,和组件实例对象.对于vue而言,vue实例可以使得添加的组件都有.

但是page对象页面对象,不能使得页面内部有.只能使得这个页面内能访问.vue实例,会使得执行组件时,添加store属性.但是page对象不可以.

每个对象添加只能顾着自己.

因此如果需要在某个页面/组件内添加共享数据,需要自行每个页面和组件都添加

1)页面内添加

导入函数,导入store对象.

导入的对象可以第一个时添加到哪里,第二个是数据源添加那些数据.会添加到this上,这些其实都是新的存储在新的内存上的变量,只不过当修改mutations的时候,会指向同一个对象的.因此当修改其中一个的时候,有更新的效果.所有的都会变.添加绑定后返回的对象可以解绑.

执行这个函数就能执行store对象共享,什么时候执行呢?数据还未绑定前,onloading.绑定的时候就有,当页面卸载进行解绑,不需要了,不要占用空间.

2)组件内共享数据绑定

组件内没有能组件一开始就的生命周期函数,因此这里写属性,会自动绑定.

上面的方法卸载时,得到的对象内的方法会解绑所有.包括组件.

主包内会一开始就加载第一个路径的地址的页面,以及下载主包内的其他页面.

因此tabbar一般都是首页.就写tabbar/首页路径到主包内

二:分包

1.使用分包的原因

当不使用分包时,加载小程序时会将所有的页面和资源都下载下来.分包,分为主包和分包,小程序一开始只会下载主包的内容,首页1更快渲染.

  • 整个小程序所有分包大小不超过 20M
  • 单个分包/主包大小不能超过 2M

2.如何使用分包呢?

在app.json下,pages原本是所有页面的路径,现在只是主包的路径.

在subpackages所写的是其他分包,每个分包内都有多个页面的路径.

root是根目录下的文件夹

{"pages":["pages/index","pages/logs"],"subpackages": [{"root": "packageA","pages": ["pages/cat","pages/dog"]}, {"root": "packageB","name": "pack2","pages": ["pages/apple","pages/banana"]}]
}

分包内不能再谢谢分包,只能写路径,页面.

全局样式等打包到主包上,如果再分包商不能被所有分包使用.

当加载分包内的某一页面,只会按需下载相关的四个文件.

三:独立分包

像上述分包和主包,即使一开始不跳转到主包,只是打开分包,也会加载主包的内容.

但是独立分包,不同于普通的分包,内部有完整的文件,不需要下载主包,主包内的全局样式等也不会对独立分包内的页面起作用.这是独立分包.

1)开启独立分包

subpackages即可,则执行的时候这个就是独立分包.

{"root": "moduleB","pages": ["pages/pear","pages/pineapple"],"independent": true
}

如果是分包内的页面则一定会加载主包,如果是独立分包的页面,只会加载独立分包的内容.分包做到了按需下载.减少下载的内容.

分包内写有公共样式的多个分包.

独立分包,只有自己的.

进入哪个页面,下载哪个页面的文件,不是整个分包,下载主包也是与页面相关的文件.

四:分包预下载

app.json内

这样写会当加载这个页面的内容时,也会加载相关的文件.packages可以写name.

整个项目内,可以分包预下载的体积大小限制是2M.


http://www.ppmy.cn/news/1464498.html

相关文章

使用springdoc-openapi-starter-webmvc-ui后访问swagger-ui/index.html 报错404

按照官网说明,引入 springdoc-openapi-starter-webmvc-ui后应该就可以直接访问swagger-ui.html或者swagger-ui/index.html就可以出现swagger页面了,但是我引入后,访问提示报错404. 在我的项目中,有其他依赖间接引入了org.webjars…

高性能排行榜之Redis的zadd方法实现

排行榜之Redis实现 1、排行榜系统的功能点 数据收集与计算 排名规则 实时性 可视化展示 周期性更新 2、排行榜系统基本功能要素 3种实现方案 Redis实现方案 出于性能, 自排序,持久化,可扩展性考虑。 使用Redis的zset来实现排行榜 增…

Python 点云裁剪

点云裁剪 一、介绍1.1 概念1.2 函数讲解二、代码示例2.1 代码实现2.2 代码讲解三、结果示例一、介绍 1.1 概念 点云裁剪 :根据待裁剪对象的多边形体积(json文件)实现点云的裁剪。 1.2 函数讲解 下面代码示例中主要用到了两个函数。 读取待裁剪对象的多边形体积信息(json文…

住宅IP?

住宅IP是由主要运营商(如电信、移动、联通等)为用户开通的宽带业务所分配的IP地址。这些IP地址是真实的、具有实际位置的IP,与普通用户的设备IP和宽带网络IP一致。它们不是连续的,而是散点分布,这使得它们在使用时更加…

【UnityShader入门精要学习笔记】第十五章 使用噪声

本系列为作者学习UnityShader入门精要而作的笔记,内容将包括: 书本中句子照抄 个人批注项目源码一堆新手会犯的错误潜在的太监断更,有始无终 我的GitHub仓库 总之适用于同样开始学习Shader的同学们进行有取舍的参考。 文章目录 使用噪声上…

印象笔记使用技巧

印象笔记(Evernote)是一款功能强大的笔记应用,广泛用于个人信息管理、项目管理和知识整理等方面。以下是一些实用的印象笔记使用技巧: 快速创建和保存笔记: 使用快捷键Ctrl N可以快速创建新的笔记。使用快捷键Ctrl S…

英语学习笔记22——Give me/him/her/us/them a .... Which one?

Give me/him/her/us/them a … Which one? 给我/他/她/我们/他们一个…… 哪一个? 词汇 Vocabulary empty a. 空的,啥也没有的    v. 倒空 例句:这个盒子是空的。    This box is empty.    这是个空盒子。    This is an emp…

2024广东省赛 I.不等式

题目 #include <bits/stdc.h> using namespace std; #define int long long#define pb push_back#define fi first#define se second#define lson p << 1#define rson p << 1 | 1#define ll long longconst int maxn 1e6 5, inf 1e9, maxm 4e4 5, base…