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

本文主要是介绍小程序学习day13-API Promise化、全局数据共享(状态管理)、分包,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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)

这篇关于小程序学习day13-API Promise化、全局数据共享(状态管理)、分包的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1103248

相关文章

python获取指定名字的程序的文件路径的两种方法

《python获取指定名字的程序的文件路径的两种方法》本文主要介绍了python获取指定名字的程序的文件路径的两种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 最近在做项目,需要用到给定一个程序名字就可以自动获取到这个程序在Windows系统下的绝对路径,以下

SpringBoot全局域名替换的实现

《SpringBoot全局域名替换的实现》本文主要介绍了SpringBoot全局域名替换的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录 项目结构⚙️ 配置文件application.yml️ 配置类AppProperties.Ja

PHP应用中处理限流和API节流的最佳实践

《PHP应用中处理限流和API节流的最佳实践》限流和API节流对于确保Web应用程序的可靠性、安全性和可扩展性至关重要,本文将详细介绍PHP应用中处理限流和API节流的最佳实践,下面就来和小编一起学习... 目录限流的重要性在 php 中实施限流的最佳实践使用集中式存储进行状态管理(如 Redis)采用滑动

SpringBoot 多环境开发实战(从配置、管理与控制)

《SpringBoot多环境开发实战(从配置、管理与控制)》本文详解SpringBoot多环境配置,涵盖单文件YAML、多文件模式、MavenProfile分组及激活策略,通过优先级控制灵活切换环境... 目录一、多环境开发基础(单文件 YAML 版)(一)配置原理与优势(二)实操示例二、多环境开发多文件版

JWT + 拦截器实现无状态登录系统

《JWT+拦截器实现无状态登录系统》JWT(JSONWebToken)提供了一种无状态的解决方案:用户登录后,服务器返回一个Token,后续请求携带该Token即可完成身份验证,无需服务器存储会话... 目录✅ 引言 一、JWT 是什么? 二、技术选型 三、项目结构 四、核心代码实现4.1 添加依赖(pom

Redis实现高效内存管理的示例代码

《Redis实现高效内存管理的示例代码》Redis内存管理是其核心功能之一,为了高效地利用内存,Redis采用了多种技术和策略,如优化的数据结构、内存分配策略、内存回收、数据压缩等,下面就来详细的介绍... 目录1. 内存分配策略jemalloc 的使用2. 数据压缩和编码ziplist示例代码3. 优化的

SpringBoot集成XXL-JOB实现任务管理全流程

《SpringBoot集成XXL-JOB实现任务管理全流程》XXL-JOB是一款轻量级分布式任务调度平台,功能丰富、界面简洁、易于扩展,本文介绍如何通过SpringBoot项目,使用RestTempl... 目录一、前言二、项目结构简述三、Maven 依赖四、Controller 代码详解五、Service

深入解析C++ 中std::map内存管理

《深入解析C++中std::map内存管理》文章详解C++std::map内存管理,指出clear()仅删除元素可能不释放底层内存,建议用swap()与空map交换以彻底释放,针对指针类型需手动de... 目录1️、基本清空std::map2️、使用 swap 彻底释放内存3️、map 中存储指针类型的对象

Linux系统管理与进程任务管理方式

《Linux系统管理与进程任务管理方式》本文系统讲解Linux管理核心技能,涵盖引导流程、服务控制(Systemd与GRUB2)、进程管理(前台/后台运行、工具使用)、计划任务(at/cron)及常用... 目录引言一、linux系统引导过程与服务控制1.1 系统引导的五个关键阶段1.2 GRUB2的进化优

Unity新手入门学习殿堂级知识详细讲解(图文)

《Unity新手入门学习殿堂级知识详细讲解(图文)》Unity是一款跨平台游戏引擎,支持2D/3D及VR/AR开发,核心功能模块包括图形、音频、物理等,通过可视化编辑器与脚本扩展实现开发,项目结构含A... 目录入门概述什么是 UnityUnity引擎基础认知编辑器核心操作Unity 编辑器项目模式分类工程