小程序学习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程序打包成EXE文件的实现方式

《将Java程序打包成EXE文件的实现方式》:本文主要介绍将Java程序打包成EXE文件的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录如何将Java程序编程打包成EXE文件1.准备Java程序2.生成JAR包3.选择并安装打包工具4.配置Launch4

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

Java程序进程起来了但是不打印日志的原因分析

《Java程序进程起来了但是不打印日志的原因分析》:本文主要介绍Java程序进程起来了但是不打印日志的原因分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java程序进程起来了但是不打印日志的原因1、日志配置问题2、日志文件权限问题3、日志文件路径问题4、程序

Spring 基于XML配置 bean管理 Bean-IOC的方法

《Spring基于XML配置bean管理Bean-IOC的方法》:本文主要介绍Spring基于XML配置bean管理Bean-IOC的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一... 目录一. spring学习的核心内容二. 基于 XML 配置 bean1. 通过类型来获取 bean2. 通过

python uv包管理小结

《pythonuv包管理小结》uv是一个高性能的Python包管理工具,它不仅能够高效地处理包管理和依赖解析,还提供了对Python版本管理的支持,本文主要介绍了pythonuv包管理小结,具有一... 目录安装 uv使用 uv 管理 python 版本安装指定版本的 Python查看已安装的 Python

springboot项目中常用的工具类和api详解

《springboot项目中常用的工具类和api详解》在SpringBoot项目中,开发者通常会依赖一些工具类和API来简化开发、提高效率,以下是一些常用的工具类及其典型应用场景,涵盖Spring原生... 目录1. Spring Framework 自带工具类(1) StringUtils(2) Coll

SpringSecurity JWT基于令牌的无状态认证实现

《SpringSecurityJWT基于令牌的无状态认证实现》SpringSecurity中实现基于JWT的无状态认证是一种常见的做法,本文就来介绍一下SpringSecurityJWT基于令牌的无... 目录引言一、JWT基本原理与结构二、Spring Security JWT依赖配置三、JWT令牌生成与

SpringBoot实现微信小程序支付功能

《SpringBoot实现微信小程序支付功能》小程序支付功能已成为众多应用的核心需求之一,本文主要介绍了SpringBoot实现微信小程序支付功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作... 目录一、引言二、准备工作(一)微信支付商户平台配置(二)Spring Boot项目搭建(三)配置文件

基于Python和MoviePy实现照片管理和视频合成工具

《基于Python和MoviePy实现照片管理和视频合成工具》在这篇博客中,我们将详细剖析一个基于Python的图形界面应用程序,该程序使用wxPython构建用户界面,并结合MoviePy、Pill... 目录引言项目概述代码结构分析1. 导入和依赖2. 主类:PhotoManager初始化方法:__in

关于WebSocket协议状态码解析

《关于WebSocket协议状态码解析》:本文主要介绍关于WebSocket协议状态码的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录WebSocket协议状态码解析1. 引言2. WebSocket协议状态码概述3. WebSocket协议状态码详解3