小程序学习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

相关文章

Java调用DeepSeek API的最佳实践及详细代码示例

《Java调用DeepSeekAPI的最佳实践及详细代码示例》:本文主要介绍如何使用Java调用DeepSeekAPI,包括获取API密钥、添加HTTP客户端依赖、创建HTTP请求、处理响应、... 目录1. 获取API密钥2. 添加HTTP客户端依赖3. 创建HTTP请求4. 处理响应5. 错误处理6.

SpringBoot中使用 ThreadLocal 进行多线程上下文管理及注意事项小结

《SpringBoot中使用ThreadLocal进行多线程上下文管理及注意事项小结》本文详细介绍了ThreadLocal的原理、使用场景和示例代码,并在SpringBoot中使用ThreadLo... 目录前言技术积累1.什么是 ThreadLocal2. ThreadLocal 的原理2.1 线程隔离2

Deepseek R1模型本地化部署+API接口调用详细教程(释放AI生产力)

《DeepseekR1模型本地化部署+API接口调用详细教程(释放AI生产力)》本文介绍了本地部署DeepSeekR1模型和通过API调用将其集成到VSCode中的过程,作者详细步骤展示了如何下载和... 目录前言一、deepseek R1模型与chatGPT o1系列模型对比二、本地部署步骤1.安装oll

Java深度学习库DJL实现Python的NumPy方式

《Java深度学习库DJL实现Python的NumPy方式》本文介绍了DJL库的背景和基本功能,包括NDArray的创建、数学运算、数据获取和设置等,同时,还展示了如何使用NDArray进行数据预处理... 目录1 NDArray 的背景介绍1.1 架构2 JavaDJL使用2.1 安装DJL2.2 基本操

在不同系统间迁移Python程序的方法与教程

《在不同系统间迁移Python程序的方法与教程》本文介绍了几种将Windows上编写的Python程序迁移到Linux服务器上的方法,包括使用虚拟环境和依赖冻结、容器化技术(如Docker)、使用An... 目录使用虚拟环境和依赖冻结1. 创建虚拟环境2. 冻结依赖使用容器化技术(如 docker)1. 创

浅析如何使用Swagger生成带权限控制的API文档

《浅析如何使用Swagger生成带权限控制的API文档》当涉及到权限控制时,如何生成既安全又详细的API文档就成了一个关键问题,所以这篇文章小编就来和大家好好聊聊如何用Swagger来生成带有... 目录准备工作配置 Swagger权限控制给 API 加上权限注解查看文档注意事项在咱们的开发工作里,API

linux进程D状态的解决思路分享

《linux进程D状态的解决思路分享》在Linux系统中,进程在内核模式下等待I/O完成时会进入不间断睡眠状态(D状态),这种状态下,进程无法通过普通方式被杀死,本文通过实验模拟了这种状态,并分析了如... 目录1. 问题描述2. 问题分析3. 实验模拟3.1 使用losetup创建一个卷作为pv的磁盘3.

一分钟带你上手Python调用DeepSeek的API

《一分钟带你上手Python调用DeepSeek的API》最近DeepSeek非常火,作为一枚对前言技术非常关注的程序员来说,自然都想对接DeepSeek的API来体验一把,下面小编就来为大家介绍一下... 目录前言免费体验API-Key申请首次调用API基本概念最小单元推理模型智能体自定义界面总结前言最

JAVA调用Deepseek的api完成基本对话简单代码示例

《JAVA调用Deepseek的api完成基本对话简单代码示例》:本文主要介绍JAVA调用Deepseek的api完成基本对话的相关资料,文中详细讲解了如何获取DeepSeekAPI密钥、添加H... 获取API密钥首先,从DeepSeek平台获取API密钥,用于身份验证。添加HTTP客户端依赖使用Jav

Java实现状态模式的示例代码

《Java实现状态模式的示例代码》状态模式是一种行为型设计模式,允许对象根据其内部状态改变行为,本文主要介绍了Java实现状态模式的示例代码,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来... 目录一、简介1、定义2、状态模式的结构二、Java实现案例1、电灯开关状态案例2、番茄工作法状态案例