npm包、全局数据共享、分包

news2025/1/11 10:11:43

使用 npm 包

小程序对 npm 的支持与限制

目前,小程序中已经支持使用 npm 安装第三方包,从而来提高小程序的开发效率。但是,在小程序中使用npm 包有如下 3 个限制:
① 不支持依赖于 Node.js 内置库的包
② 不支持依赖于浏览器内置对象的包
③ 不支持依赖于 C++ 插件的包
总结:虽然 npm 上的包有千千万,但是能供小程序使用的包却“为数不多”。

1.Vant Weapp

1. 什么是 Vant Weapp

Vant Weapp 是有赞前端团队开源的一套小程序 UI 组件库,助力开发者快速搭建小程序应用。它所使用的是 MIT 开源许可协议,对商业使用比较友好。

2. 安装 Vant 组件库

在小程序项目中,安装 Vant 组件库主要分为如下 3 步:
① 通过 npm 安装(建议指定版本为 @1.3.3 )
② 构建 npm 包
③ 修改 app.json

3. 使用 Vant 组件

安装完 Vant 组件库之后,可以在 app.json 的 usingComponents 节点中引入需要的组件,即可在wxml 中直接使用组件。
在这里插入图片描述

4. 定制全局主题样式

Vant Weapp 使用 CSS 变量来实现定制主题。

5. 定制全局主题样式

在 app.wxss 中,写入 CSS 变量,即可对全局生效:
在这里插入图片描述

2.API Promise 化

1. 基于回调函数的异步 API 的缺点

默认情况下,小程序官方提供的异步 API 都是基于回调函数实现的,例如,网络请求的 API 需要按照如下的方式调用:
缺点:容易造成回调地狱的问题,代码的可读性、维护性差!
在这里插入图片描述

2. 什么是 API Promise 化

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

3. 实现 API Promise 化

在小程序中,实现 API Promise 化主要依赖于 miniprogram-api-promise 这个第三方的 npm 包。
在这里插入图片描述

4. 调用 Promise 化之后的异步 API

在这里插入图片描述

全局数据共享

1. 什么是全局数据共享

全局数据共享(又叫做:状态管理)是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有: Vuex 、 Redux 、 MobX 等。
在这里插入图片描述

2. 小程序中的全局数据共享方案

在小程序中,可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。其中:
 mobx-miniprogram 用来创建 Store 实例对象
 mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法,绑定到组件或页面中使用
在这里插入图片描述

2. MobX

1. 安装 MobX 相关的包

在项目中运行如下的命令,安装 MobX 相关的包:
注意: MobX 相关的包安装完毕之后,记得删除 miniprogram_npm 目录后,重新构建 npm 。
在这里插入图片描述

2. 创建 MobX 的 Store 实例

在这里插入图片描述

3.将 Store 中的成员绑定到页面中

在这里插入图片描述

4. 在页面上使用 Store 中的成员

在这里插入图片描述

5. 将 Store 中的成员绑定到组件中

在这里插入图片描述

6. 在组件中使用 Store 中的成员

在这里插入图片描述

分包

1. 什么是分包

分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。

2. 分包的好处

对小程序进行分包的好处主要有以下两点:
 可以优化小程序首次启动的下载时间
 在多团队共同开发时可以更好的解耦协作

3. 分包前项目的构成

分包前,小程序项目中所有的页面和资源都被打包到了一起,导致整个项目体积过大,影响小程序首次启动的下载时间。
在这里插入图片描述

4. 分包后项目的构成

分包后,小程序项目由 1 个主包 + 多个分包组成:
 主包:一般只包含项目的启动页面或 TabBar 页面、以及所有分包都需要用到的一些公共资源
 分包:只包含和当前分包有关的页面和私有资源
在这里插入图片描述

5. 分包的加载规则

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

6. 分包的体积限制

目前,小程序分包的大小有以下两个限制:
 整个小程序所有分包大小不超过 16M (主包 + 所有分包)
 单个分包 / 主包大小不能超过 2M

7.使用分包

1.配置方法

在这里插入图片描述

2.打包原则

① 小程序会按 subpackages 的配置进行分包, subpackages 之外的目录将被打包到主包中
② 主包也可以有自己的 pages (即最外层的 pages 字段)
③ tabBar 页面必须在主包内
④ 分包之间不能互相嵌套

3.引用原则

① 主包无法引用分包内的私有资源
② 分包之间不能相互引用私有资源
③ 分包可以引用主包内的公共资源
在这里插入图片描述

8.独立分包

1. 什么是独立分包

独立分包本质上也是分包,只不过它比较特殊,可以独立于主包和其他分包而单独运行。
在这里插入图片描述

2. 独立分包和普通分包的区别

最主要的区别:是否依赖于主包才能运行
 普通分包必须依赖于主包才能运行
 独立分包可以在不下载主包的情况下,独立运行

3. 独立分包的应用场景

开发者可以按需,将某些具有一定功能独立性的页面配置到独立分包中。原因如下:
 当小程序从普通的分包页面启动时,需要首先下载主包
 而独立分包不依赖主包即可运行,可以很大程度上提升分包页面的启动速度
注意:一个小程序中可以有多个独立分包。

4. 独立分包的配置方法

在这里插入图片描述

5. 引用原则

独立分包和普通分包以及主包之间,是相互隔绝的,不能相互引用彼此的资源!例如:
① 主包无法引用独立分包内的私有资源
② 独立分包之间,不能相互引用私有资源
③ 独立分包和普通分包之间,不能相互引用私有资源
④ 特别注意:独立分包中不能引用主包内的公共资源

9.分包预下载

1. 什么是分包预下载

分包预下载指的是:在进入小程序的某个页面时,由框架自动预下载可能需要的分包,从而提升进入后续分包页面时的启动速度。

2. 配置分包的预下载

预下载分包的行为,会在进入指定的页面时触发。在 app.json 中,使用 preloadRule 节点定义分包的预下载规则
在这里插入图片描述

3. 分包预下载的限制

同一个分包中的页面享有共同的预下载大小限额 2M
在这里插入图片描述

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

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

相关文章

launchctl及其配置、使用、示例

文章目录 launchctl 是什么Unix / Linux类似的工具有什么哪个更常用配置使用常用子命令示例加载一个 launch agent:卸载一个 launch daemon:列出所有已加载的服务:启动一个服务:停止一个服务:禁用一个服务:启用一个服务: 附com.example.myagent.plist内容有趣的例子参考 launch…

ISIS接口MD5 算法认证实验简述

默认情况下,ISIS接口认证通过在ISIS协议数据单元(PDU)中添加认证字段,例如:MD5 算法,用于验证发送方的身份。 ISIS接口认证防止未经授权的设备加入到网络中,并确保邻居之间的通信是可信的。它可…

数据结构之顺序存储-顺序表的基本操作c/c++(创建、初始化、赋值、插入、删除、查询、替换、输出)

学习参考博文&#xff1a;http://t.csdnimg.cn/Qi8DD 学习总结&#xff0c;同时更正原博主在顺序表中插入元素的错误。 数据结构顺序表——基本代码实现&#xff08;使用工具&#xff1a;VS2022&#xff09;&#xff1a; #define _CRT_SECURE_NO_WARNINGS #include <stdi…

深度强化学习01

Random variable Probability Density Function 期望 Random Sampling 学习视频 这绝对是我看过最好的深度强化学习&#xff01;从入门到实战&#xff0c;7小时内干货不断&#xff01;_哔哩哔哩_bilibili

macOS Ventura 13.6.5 (22G621) Boot ISO 原版可引导镜像下载

macOS Ventura 13.6.5 (22G621) Boot ISO 原版可引导镜像下载 3 月 8 日凌晨&#xff0c;macOS Sonoma 14.4 发布&#xff0c;同时带来了 macOS Ventru 13.6.5 和 macOS Monterey 12.7.4 安全更新。 macOS Ventura 13.6 及更新版本&#xff0c;如无特殊说明皆为安全更新&…

学习笔记 | 微信小程序项目day02

今日学习内容 安装uni-ui跟uni-helper/uni-ui-types配置pinia持久化请求工具类的拦截器请求工具类的请求函数 安装uni-ui跟uni-helper/uni-ui-types npm install -g cnpm --registryhttps://registry.npmmirror.com npm set registry https://registry.npmmirror.com npm i …

怎么判断发票扫描OCR软件好用不好用?

发票扫描OCR&#xff08;Optical Character Recognition&#xff09;是一种将纸质发票上的文字、数字等信息转化为可编辑的文本格式的技术。在现代企业中&#xff0c;随着数字化转型的推进&#xff0c;发票扫描OCR技术变得越来越重要。然而&#xff0c;面对市场上众多的发票扫描…

ioDraw:与 GitHub、gitee、gitlab、OneDrive 无缝对接,绘图文件永不丢失!

&#x1f31f; 绘图神器 ioDraw 重磅更新&#xff0c;文件保存再无忧&#xff01;&#x1f389; 无需注册&#xff0c;即刻畅绘&#xff01;✨ ioDraw 让你告别繁琐注册&#xff0c;尽情挥洒灵感&#xff01; 新增文件在线实时保存功能&#xff0c;支持将绘图文件保存到 GitHu…

golang常用库之-golang常用库之-ladon包 | 基于策略的访问控制

文章目录 golang常用库之-ladon包 | 基于策略的访问控制概念使用策略 条件 Conditions自定义conditionLadon Condition使用示例 持久化访问控制(Warden) 结合 Gin 开发一个简易 ACL 接口参考 golang常用库之-ladon包 | 基于策略的访问控制 https://github.com/ory/ladon Lado…

【MySQL】 MySQL的内置函数——日期函数、字符串函数、数学函数、聚合函数、其他函数

文章目录 MySQL1. 日期函数1.1 查看时间1.2 对时间进行计算 2. 字符串函数2.1 字符串查找2.2 字符串修改显示 3. 数学函数4. 聚合函数5. 其他函数 MySQL 1. 日期函数 在MySQL中&#xff0c;提供了多种时间函数供我们使用&#xff0c;其中包括用于查看时间的函数和计算日期的函数…

Vue2 引入使用ElementUI详解

目录 1 安装2 引入2.1 全局引入2.1.1 引入2.1.2 使用 2.2 按需引入2.2.1 引入2.2.2 使用 3 总结 1 安装 推荐使用 npm 的方式安装&#xff0c;它能更好地和 webpack打包工具配合使用。&#xff08;本项目使用安装方式&#xff09; npm i element-ui -S也可以使用其他的包管理…

网络学习:邻居发现协议NDP

目录 前言&#xff1a; 一、报文内容 二、地址解析----NS/NA 目标的被请求组播IP地址 邻居不可达性检测&#xff1a; 重复地址检测 路由器发现 地址自动配置 默认路由器优先级和路由信息发现 重定向 前言&#xff1a; 邻居发现协议NDP&#xff08;Neighbor Discovery…

RequestResponse使用

文章目录 一、Request&Response介绍二、Request 继承体系三、Request 获取请求数据1、获取请求数据方法&#xff08;1&#xff09;、请求行&#xff08;2&#xff09;、请求头&#xff08;3&#xff09;、请求体 2、通过方式获取请求参数3、IDEA模板创建Servlet4、请求参数…

作品展示ETL

1、ETL 作业定义、作业导入、控件拖拽、执行、监控、稽核、告警、报告导出、定时设定 欧洲某国电信系统数据割接作业定义中文页面&#xff08;作业顶层&#xff0c;可切英文&#xff0c;按F1弹当前页面帮助&#xff09; 涉及文件拆分、文件到mysql、库到库、数据清洗、数据转…

verilog 从入门到看得懂---verilog 的基本语法数据和运算

笔者之前主要是使用c语言和matab 进行编程&#xff0c;从2024年年初开始接触verilog&#xff0c;通过了一周的学习&#xff0c;基本上对verilog 的语法有了基本认知。总统来说&#xff0c;verilog 的语法还是很简单的&#xff0c;主要难点是verilog是并行运行&#xff0c;并且强…

【LabVIEW FPGA入门】插值、输出线性波形

概述 NI 的可重配置 I/O (RIO) 硬件使开发人员能够创建自定义硬件&#xff0c;以在坚固耐用、高性能和模块化架构中执行许多任务&#xff0c;而无需了解低级 EDA 工具或硬件设计。使用 RIO 硬件轻松实现的此类任务之一是模拟波形生成。本教程介绍了使用 CompactRIO 硬件和 LabV…

旧华硕电脑开机非常慢 电脑开机黑屏很久才显示品牌logo导致整体开机速度非常的慢怎么办

前提条件 电池需要20&#xff05;&#xff08;就是电池没有报废&#xff09;且电脑接好电源&#xff0c;千万别断电&#xff0c;电脑会变成砖头的 解决办法 更新bios即可解决&#xff0c;去对应品牌官网下载最新的bios版本就行了 网上都是一些更新驱动啊

VS2019加QT5.14中Please assign a Qt installation in ‘Qt Project Settings‘.问题的解决

第一篇&#xff1a; 原文链接&#xff1a;https://blog.csdn.net/aoxuestudy/article/details/124312629 error:There’ no Qt version assigned to project mdi.vcxproj for configuration release/x64.Please assign a Qt installation in “Qt Project Settings”. 一、分…

数据分析 | Matplotlib

Matplotlib 是 Python 中常用的 2D 绘图库&#xff0c;它能轻松地将数据进行可视化&#xff0c;作出精美的图表。 绘制折线图&#xff1a; import matplotlib.pyplot as plt #时间 x[周一,周二,周三,周四,周五,周六,周日] #能量值 y[61,72,66,79,80,88,85] # 用来设置字体样式…

RunnerGo测试平台的安装和使用

文章适用于想RunnerGo入门的同学&#xff0c;本人主要是后端&#xff0c;这里做一个入门的学习记录。想深入适用RunnerGo的同学可以参考官网文档&#xff1a; https://wiki.runnergo.cn/docs/ 这里我测试的代码是之前搭建的一个前后端分离小demo&#xff0c;代码地址是https:/…