小程序学习day13-API Promise化、全局数据共享(状态管理)、分包

news2024/11/15 8:15:32

44、API Promise化

(1)基于回调函数的一部API的缺点:小程序官方提供的异步API都是基于回调函数实现的,容易造成回调地狱的问题,代码可读性、可维护性差

(2)API Promise化概念:

指的是通过额外的配置,将官方提供的、基于回调函数的异步API,升级改造为基于Promise的异步API,提高代码的可读性、可维护性,避免回调地狱的问题。

(3)实现API Promise化(主要依赖于miniprogram-api-promise第三方包)

1)miniprogram-api-promise的安装(npm i --save miniprogram-api-promise@1.0.4)

2)在外部资源管理器删除miniprogram_npm包,重新构建npm
①删除miniprogram_npm包

②重新构建npm

显示:

3)在app.js文件中,导入并使用promisifyAll
①导入promisifyAll

②使用promisifyAll

(4)调用Promise化后的异步API

45、全局数据共享(状态管理)

(1)作用:解决组件之间数据共享的问题,比如:Vuex、Redux、MobX

(2)原理:

        1)通过mobx-miniprogram创建Store实例对象
        2)通过mobx-miniprogram-bindings把Store中的共享数据或方法,绑定到组件或页面中使用

(3)安装Mobx相关包,并进行npm重建

1)执行命令,安装mobx包(npm i --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1)

2)删除miniprogram_npm包

3)重新构建npm

(4)创建Mobx的Store实例

1)在store文件夹下的js文件中,导入observable,导出空实例

2)定义可以提供的数据、计算属性和actions方法
①数据

②计算属性(方法前,必须加get)

③actions方法(需要导入action,然后使用)

3)在页面中使用Store
①在所需页面导入createStoreBindings、store

②在onLoad方法中挂载所需字段、计算属性、方法

示例:

③在onUnload方法中,销毁实例

④在页面使用

效果:

4)将Store中的成员绑定到组件中
①导入storeBindingsBehavior和store

   

②实现自动绑定

③绑定字段、方法

④使用(在所需组件内使用,将组件渲染到页面)

46、分包

(1)概念:把一个完整的小程序项目按照不同的需求划分为不同的子包,在构建时打包成·不同的分包,用户使用时按需加载。

(2)优点:

        1)可以优化小程序首次启动的下载时间
        2)在多团队共同开发时可以更好的解耦协作

(3)分包的项目构成

        1)分包前的项目构成:所有页面和公共资源

分包前,小程序的所有页面和资源都被打包到了一起,导致项目体积过大,影响小程序首次启动的下载时间

        2)分包后的项目构成:1个主包+多个分包
①主包:一般只包含项目的启动页面或tabBar页面、以及所有分包都需要用到的一些公共资源
②分包:只包含和当前分包有关的页面和私有资源

(4)分包的加载规则

1)在小程序启动时,默认会下载主包,并启动主包内页面(tabBar页面需要放到主包中)
2)当用户进入分包时,客户端会把对应分包下载下来,下载完成后再进行展示(非tabBar页面可以按照功能的不同,划分为不同的分包之后,进行按需下载)

(5)分包的体积限制

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

(6)分包的基本用法

1)添加分包

在app.json中新增与pages平级的subpackages属性,为其配置根目录,页面路径

2)为分包命名

通过name命名

3)查看分包的体积

在“详情”的“基本信息”中,查看“本地代码”

4)打包原则
        ①小程序会按subpackages的配置进行分包,subpackages户外的目录将被打包到主包中
        ②主包也可以有自己的pages(即最外层的pages字段)
        ③tabBar页面必须在主包内
        ④分包之间不能互相嵌套
5)引用规则
        ①主包无法引用分包内的私有资源
        ②分包之间不能相互引用私有资源
        ③分包可以引用主包内的公共资源

(7)独立分包(一个小程序中可以有多个独立分包)

        1)概念:本质上也是分包,但可以独立于主包和其他分包而单独运行
        2)独立分包和普通分包的区别:是否依赖于主包才能运行
                ①普通分包必须依赖于主包才能运行
                ②独立分包可以不下载主包的情况下运行
        3)应用及其原因:
①应用:开发者可以按需将某些具有一定功能的独立性页面配置到独立的分包中
②原因:当小程序从普通的分包页面启动时,需要首先下载主包,而独立分包不依赖与主包即可运行,可以很大程度上提升分包页面的启动速度 。
        4)独立分包的配置

在普通分包的基础上,添加independent属性

5)引用规则(独立分包和普通分包以及主包之间是相互隔绝的,不能相互引用彼此的资源)
        ①主包无法引用独立分包内的私有资源
        ②独立分包之间,不能相互引用私有资源
        ③独立分包和普通分包之间,不能相互引用私有资源
        ④独立分包不能引用主包内的公共资源

(8)分包预下载

1)概念:在进入小程序的某个页面时,由框架自动预下载可能需要的分包,从而提升进入后续分包页面时的启动速度
2)配置分包预下载(预下载分包会在进入页面时触发):
在app.json中新增preloadRule属性,进行配置

比如:

Wifi与all

3)分包预下载的限制

同一个分包中的页面享有共同的预下载限额2M(同一页面内所有分包预下载体积之和<=2M)

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

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

相关文章

Qt 环境搭建

sudo apt-get upadte sudo apt-get install qt4-dev-tools sudo apt-get install qtcreator sudo apt-get install qt4-doc sudo apt-get install qt4-qtconfig sudo apt-get install qt-demos编译指令 qmake -projectqmakemake实现Ubuntu20,04 与Windows之间的复制粘贴 安装o…

在C#中如何监控其它应用全屏

原文链接&#xff1a;https://www.cnblogs.com/zhaotianff/p/18338275 在C#中判断其它应用全屏可以有多种方案。我这里提供两种思路 使用定时器 在定时器中定时判断当前窗口的状态是否是最大化或者宽高是否等于桌面窗口的宽高。 这种方法我没有去尝试&#xff0c;凭个人经验…

复杂的编辑表格

需求描述 表格可以整体编辑&#xff1b;也可以单行弹框编辑&#xff1b;且整体编辑的时候&#xff0c;依然可以单行编辑 编辑只能给某一列&#xff08;这里是参数运行值&#xff09;修改&#xff0c;且根据数据内容的参数范围来判断展示不同的形式&#xff1a;input/数字输入/单…

小波卷积:为计算机视觉任务开辟新的参数效率之路

论文复述 这篇论文介绍了一种创新的卷积神经网络层——WTConv&#xff0c;它通过小波变换技术显著扩展了CNN的感受野&#xff0c;同时保持了参数效率。WTConv层能够实现对输入数据的多频率响应&#xff0c;增强了模型对形状而非纹理的特征识别能力&#xff0c;提高了在图像分类…

黑神话悟空不只是玩游戏 有人用它3天赚了85W

这几天你是不是在想办法升级电脑配置&#xff0c;买PS5玩黑神话悟空游戏&#xff0c;每一个男人看到那么好的游戏画面&#xff0c;都控制不住想玩&#xff0c;今天分享给大家一些资料&#xff0c;让你快速玩游戏的同时&#xff0c;还能挣点外快&#xff0c;黑神话悟空不只是玩游…

MATLAB 计算两点沿某个方向的间距(81)

MATLAB 计算两点沿某个方向的间距(81) 一、算法介绍二、算法实现1.代码2.效果一、算法介绍 上一章介绍了如何计算点到空间直线的距离,这里进一步的,我们也可以计算两个点,沿着某个方向的距离,这在很多处理中都会使用到,实际上就是将两点投影到该方向的直线,再计算间距…

线性表复习之初始化顺序表操作

线性表的顺序表示-初始化顺序表 代码 #include <stdio.h> #define MaxSize 10 // 定义最大长度typedef struct{int data[MaxSize]; // 申请空间&#xff08;静态&#xff09;int length; // 当前长度 }SqList;void InitList(SqList &L){for (int i 0; i < MaxS…

java-队列--黑马

队列 别看这个&#xff0c;没用&#xff0c;还是多刷力扣队列题 定义 队列是以顺序的方式维护一组数据的集合&#xff0c;在一端添加数据&#xff0c;从另一端移除数据。一般来讲&#xff0c;添加的一端称之尾&#xff0c;而移除一端称为头 。 队列接口定义 // 队列的接口定…

河南萌新联赛2024第(六)场:郑州大学

目录 A-装备二选一&#xff08;一&#xff09;_河南萌新联赛2024第&#xff08;六&#xff09;场&#xff1a;郑州大学 (nowcoder.com) 思路&#xff1a; 代码&#xff1a; B-百变吗喽_河南萌新联赛2024第&#xff08;六&#xff09;场&#xff1a;郑州大学 (nowcoder.com) …

3DsMax将两个模型的UV展到一个UV上面

3DsMax将两个模型的UV展到一个UV上面 3Dmax中的准备工作 创建一个方块&#xff0c;一个球体&#xff0c;模拟两个模型 添加修改器 打开UV编辑器&#xff0c;快速剥 使用缩放工具&#xff0c;缩放UV&#xff0c;放到一个位置 选择正方形&#xff1a;添加修改器&#xff0…

8.3 数据库基础技术-关系代数

并、交、差 笛卡尔积、投影、选择 自然连接 真题

宝塔面板配置node/npm/yarn/pm2....相关全局变量 npm/node/XXX: command not found

1.打开终端 , cd 到根目录 cd / 2.跳转至node目录下,我的node版本是v16.14.2 cd /www/server/nodejs/v16.14.2/bin 2.1 如果不知道自己node版本多少就跳转到 cd /www/server/nodejs 然后查找当前目录下的文件 ls 确定自己的node版本 cd /node版本/bin 3.继续查看bin…

天润融通助力呷哺呷哺:AI技术赋能3000万会员精细化运营

呷哺集团于1998年11月在北京成立&#xff0c;以“一人一锅”台式小火锅的用餐模式&#xff0c;以及其推出的多样化套餐与良好的用餐服务赢得了众多消费者的青睐&#xff0c;并迅速在市场上占据了一席之地。经过20多年的发展&#xff0c;呷哺呷哺已成为一个多品牌经营、全产业链…

基于Android的安全知识学习APP的设计与实现(论文+源码)_kaic

基于Android的安全知识学习APP的设计与实现 摘 要 随着科技的进步&#xff0c;智能手机已经成为人们工作、学习和生活的必需品。基于Android系统的强大功能&#xff0c;使用Java语言、Linux操作系统&#xff0c;搭配Android Studio&#xff0c;并配备Android开发插件&#…

Unet改进3:在不同位置添加NAMAttention注意力机制

本文内容:在不同位置添加NAMAttention注意力机制 目录 论文简介 1.步骤一 2.步骤二 3.步骤三 4.步骤四 论文简介 识别不太显著的特征是模型压缩的关键。然而,它在革命性的注意机制中尚未得到研究。在这项工作中,我们提出了一种新的基于归一化的注意力模块(NAM),它抑制…

广州自闭症学校哪家好?

在广州&#xff0c;选择一家适合自闭症儿童的康复学校是一个需要慎重考虑的决定。在众多机构中&#xff0c;星启帆自闭症儿童康复机构以其专业的师资团队、全面的康复服务以及温馨的学习环境脱颖而出&#xff0c;成为众多家长信赖的选择。 星启帆自闭症康复中心&#xff0c;作…

敦煌智旅:Serverless 初探,运维提效 60%

作者&#xff1a; 百潼 行业新趋势 在后疫情时代&#xff0c;文旅行业开始复苏&#xff0c;在行业的发展趋势中&#xff0c;我们看到了一个充满机遇和挑战的未来。通过不断创新和适应市场需求&#xff0c;文旅行业继续不断发展壮大&#xff0c;为消费者提供更加丰富多样的旅游…

UnQLite:多语言支持的嵌入式NoSQL数据库深入解析

文章目录 1. 引言2. Key/Value 存储接口2.1 关键函数2.2 使用示例2.3 高级操作&#xff1a;批量文件存储 3. 游标的使用4. UnQLite-Python使用示例4. UnQLite数据库引擎架构5.1 Key/Value存储层5.2 文档存储层5.3 可插拔的存储引擎5.4 事务管理器与分页模块5.5 虚拟文件系统 6.…

右值引用与左值引用

目录 1. 左值与右值2. 左值引用与右值引用 1. 左值与右值 2. 左值引用与右值引用

千益畅行,旅游卡,案例分享

旅游卡作为新旅游这个赛道&#xff0c;到处都是金矿&#xff0c;看你怎么去挖&#xff0c;商机无限。千益畅行旅游卡作为旅游卡源头&#xff0c;提供优质完善的服务&#xff0c;你只需要去铺卡搞钱&#xff0c;其他的售后交给我们&#xff01; #旅游卡服务#