005微信小程序npm包_全局数据共享和分包

npm包_全局数据共享和分包

  • 1. 使用npm包
    • 1.1 Vant Weapp
    • 1.2 API Promise化
  • 2. 全局数据共享
  • 3. 分包
    • 3.1 分包的加载规则
    • 3.2 分包的体积限制
    • 3.3 使用分包
    • 3.3 独立分包
    • 3.4 分包预下载

1. 使用npm包

小程序对npm进行了支持与限制，限制如下：

  • 不支持依赖于 Node.js 内置库的包
  • 不支持依赖与 浏览器内置对象的包
  • 不支持依赖与 C++插件的包

1.1 Vant Weapp

​ Vant Weapp 是有赞前端团队开源的一条小程序 UI 组件库,官方文档,它使用MIT开源许可协议。

安装 Vant 组件库

  • 通过 npm 安装

    • 在当前项目路径的命令行中输入:

      # 通过 npm 安装
npm i @vant/weapp -S --production

  • 构建 npm 包

在这里插入图片描述

  • 修改 app.json

    • 将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

    • 在 app.json的 usingComponents节点中引入需要的组件

      //例 引入按钮组件
"usingComponents": {"van-button": "@vant/weapp/button/index"
}

      <!-- wxml 结构 -->
<van-button type="primary">主要按钮</van-button>

    定制全局主题样式：​		Vant Weapp 使用 CSS变量来实现定制主题。​		[所有可用的颜色变量](https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less)- 在 app.wxss 中，写入 CSS 变量 ，对全局生效：	​```css
page{--button-danger-background-color: #C00000;--button-danger-border-color: #D60000;--button-primary-background-color: #001dc0;--button-primary-border-color: #D60000;
}

1.2 API Promise化

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

  • 实现 API Promise：在小程序中，实现API Promise化主要依赖与 miniprogram-api-Promise这个第三方 npm 包。

    • 安装：

      npm install --save  miniprogram-api-Promise

    • 在小程序入口文件中 app.js，只需要调用一次 promisifyAll() 方法

      //引入 promisifyAll 方法，用于将小程序的API转换为支持 Promise的形式
import {promisifyAll} from 'miniprogram-api-promise'//创建一个对象 wx.p，并赋值给常量 wxp
const wxp = wx.p = {}//使用 promisifyAll方法将 wx（微信小程序原生API）中的所有方法转换为同时支持回调和 Promise的形式
promisifyAll(wx,wxp)

  • 调用 Promise化之后的异步 API

    <!-- .wxml页面 -->
<van-button  type="primary" bind:tap="getInfo">按钮</van-button>

    // 定义一个异步函数 getInfo
async getInfo(){//使用 wx,p,request，通过 promisifyAll 转换后支持 async/await的版本const {data: res} = await wx.p.request({method: 'GET',url: 'https://applet-base-api-t.itheima.net/api/get',data: {name: 'zs',age: 20}})console.log(res)}

2. 全局数据共享

​ 全局数据共享（又称：状态管理）：是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有：Vuex、ReduX、MobX等。

在这里插入图片描述

  • 小程序中的全局数据共享方案：小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。

    • mobx-miniprogram 用来创建 Store 实例对象
    • mobx-miniprogram-bindings用来把 Store 中的共享数据或方法，绑定到组件或页面中使用

    在这里插入图片描述

  • MobX

    • 安装 MobX相关包

      npm install --save mobx-miniprogram mobx-miniprogram-bindings

      //专门创建 Store 的实例对象
import {observable, action} from 'mobx-miniprogram'//export 是 JavaScript（包括微信小程序开发中）用于导出模块内容的关键字，它的作用是将变量、函数、对象等从一个文件中“暴露出去”，以便其他文件可以通过 import 来引入和使用。
export const store = observable({//数据字段numA: 1,numB: 2,activeTabBarIndex: 0,//计算属性get sum(){return this.numA +this.numB},//action 函数，专门来修改 store 中数据的值updateNum1: action(function(step){this.numA += step}),updateNum2: action(function(step){this.numB += step})})

  • 将Store中的成员绑定到页面中

    // 页面 .js 文件// 从 mobx-miniprogram-bindings 导入 createStoreBindings
// 这个工具用于将 MobX Store 和小程序页面进行绑定
import { createStoreBindings } from 'mobx-miniprogram-bindings'// 从 store.js 中导入之前创建的全局 store 实例
import { store } from '../../store/store'Page({/*** 生命周期函数 -- 页面加载时触发*/onLoad: function (options) {// 创建 Store 绑定对象// 将 store 中的数据和方法绑定到当前页面（this），实现响应式更新this.storeBindings = createStoreBindings(this, {store,        // 使用的 store 实例fields: ['numA', 'numB', 'sum'], // 需要绑定的响应式字段actions: ['updateNum1'] // 需要绑定的 action 方法})},/*** 生命周期函数 -- 页面卸载时触发（页面关闭或跳转）*/onUnload: function () {// 销毁 Store 绑定，防止内存泄漏this.storeBindings.destroyStoreBindings()}
})

  • 在页面上使用 Store 中的成员

    <!-- .wxml -->
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bind:tap="btnHandler1" data-step="{{1}}">numA +1</van-button>
<van-button type="danger" bind:tap="btnHandler1"  data-step="{{-1}}">numA -1</van-button>

      btnHandler1(e){// console.log(e)this.updateNum1(e.target.dataset.step)}

  • 将Store 中的成员绑定到组件中

    import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'Component({behaviors:[storeBindingsBehavior],storeBindings: {//数据源store,fields: { //指定要绑定的数据numA: ()=>store.numA,//绑定字段的第1种方法numB: (store) => store.numB,//绑定字段的第2种方法sum: 'sum'//绑定字段的第3种方法},actions: {//指定要绑定的方法updateNum2: 'updateNum2'}}
})

  • 在组件中使用 Store 中的成员

    <view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bind:tap="btnHandler2" data-step="{{1}}">numB +1</van-button>
<van-button type="danger" bind:tap="btnHandler2"  data-step="{{-1}}">numB -1</van-button>

      /*** 组件的方法列表*/methods: {btnHandler2(e){this.updateNum2(e.target.dataset.step)}}

3. 分包

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

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

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

在这里插入图片描述

分包后项目的构成，小程序项目由1个主包 + 多个分包组成：

  • 主包：一般只包含项目的启动页面或TabBar页面、以及所有分包都需要用到的一些公共资源
  • 分包：只包含和当前分包有关的页面和私有资源

在这里插入图片描述

3.1 分包的加载规则

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

3.2 分包的体积限制

  • 整个小程序所有分包大小不超过 16M（主包+所有分包）
  • 单个分包/主包大小不能超过 2M

3.3 使用分包

配置方法

|———— app.js
|———— app.json
|———— app.wxss
|———— pages //主包的所有页面
|	  |———— index
|	  |____ logs
|———— packageA //第一个分包
|	  |____ pages
|			|---- cat
|			|____ dog
|———— packageB //第二个分包
|	  |____ pages
|			|---- apple
|			|____ banana
|____ utils

//在 app.json 的 subpackages 节点中声明分包的结构
{"pages": ["pages/home/home", "pages/message/message","pages/contact/contact"],"subPackages": [{"root": "pkgA","name": "p1","pages": ["pages/cat/cat","pages/dog/dog"]},{"root": "pkgB","name": "p2","pages": ["pages/apple/apple"]}]
}

打包原则：

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

引用原则：

  • 主包无法引用分包内的私有资源
  • 分包之间不能相互引用私有资源
  • 分包可以引用主包内的公共资源

在这里插入图片描述

3.3 独立分包

​ 独立分包本质上也是分包，但可以独立于主包和其它分包而单独运行。

在这里插入图片描述

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

  • 普通分包必须依赖于主包才能运行
  • 独立分包可以在不下载主包的情况下，独立运行

独立分包的配置方法：设置 independent 为true

{"pages": ["pages/home/home", "pages/message/message","pages/contact/contact"],"subPackages": [{"root": "pkgB","name": "p2","pages": ["pages/apple/apple"],"independent": true //通过此节点，声明当前 moduleB 分包为 "独立分包"}]
}

引用规则：

  • 主包无法引用独立分包的私有资源
  • 独立分包之间，不能相互引用私有资源
  • 独立分包和普通分包之间，不能相互引用私有资源

3.4 分包预下载

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

​ 预下载分包的行为，会在进入指定的页面时触发。在app.json中，使用 preloadRule节点定义分包的预下载规则：

  "preloadRule": {"pages/contact/contact": { //触发分包预下载的页面路径"packages": ["p1"], //通过 root或 name指定预下载哪些分包"network": "wifi" //指定网络模式下进行预下载，默认值：wifi，可选值为：all（不限网络）和 wifi（仅 wifi模式下进行预下载）}}

​ 同一个分包中的页面享有共同的预下载大小限额 2M

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/pingmian/85674.shtml
繁体地址，请注明出处：http://hk.pswp.cn/pingmian/85674.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

DPO直接偏好函数的学习解读

DPO直接偏好函数的学习解读

DPO, Direct Preference Optimization&#xff0c;采用直接优化策略满足人类偏好&#xff0c;使得LLM对于给定输入&#xff0c;生成能用输出的概率高于生成不能用输出的概率。 1&#xff09;DPO优化目标 在DPO训练过程中&#xff0c;模型通过最大化可用回答相对于不可用回答的…
阅读更多...
【开源初探】基于 Qwen2.5VL的文档解析工具：docext

【开源初探】基于 Qwen2.5VL的文档解析工具：docext

源码地址&#xff1a; https://github.com/NanoNets/docext 概述 docext 是一个由视觉语言模型&#xff08;vlm&#xff09;提供支持的全面的本地文档智能工具包。vlm 使用的是基于 Qwen2.5VL-3B 的模型&#xff0c;应该是在此模型基础上进行的微调。 它提供了三个核心功能&…
阅读更多...
Python 正确重载运算符(增量赋值运算符)

Python 正确重载运算符(增量赋值运算符)

增量赋值运算符 Vector 类已经支持增量赋值运算符 和 * 了&#xff0c;如示例 13-15 所示。 示例 13-15　增量赋值不会修改不可变目标&#xff0c;而是新建实例&#xff0c;然后 重新绑定 >>> v1 Vector([1, 2, 3]) >>> v1_alias v1 # ➊ >>> …
阅读更多...
XCUITest + Objective-C 详细示例

XCUITest + Objective-C 详细示例

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】
阅读更多...
redis分布式锁 Redisson在电商平台开发中的实际应用

redis分布式锁 Redisson在电商平台开发中的实际应用

目录 概述 Redis分布式锁的实现方式 1. 基于SETNX命令&#xff08;String类型&#xff09; 2. 使用SET命令的NX和EX参数&#xff08;推荐方式&#xff09; 3. 基于Lua脚本实现复杂逻辑 4. RedLock算法&#xff08;多节点Redis实现&#xff09; Redisson的分布式锁 Redis…
阅读更多...
joomla 使用nginx服务器只能打开首页，其他页面404的解决方案

joomla 使用nginx服务器只能打开首页，其他页面404的解决方案

最近一个客户将Joomla4网站从原先的Apache服务器改为Nginx服务器&#xff0c;整个过程一切顺利&#xff0c;但还原网站后发现只能打开首页&#xff0c;其他页面都是404。这个问题需要修改nginx的配置文件来解决。 伪静态 在Apache中使用.htaccess来完成伪静态路由的转发&…
阅读更多...
湖北理元理律师事务所企业债务纾困路径：司法重整中的再生之道

湖北理元理律师事务所企业债务纾困路径：司法重整中的再生之道

中小企业债务危机常呈现“担保链扩散”特征&#xff0c;单一债务可能引发企业崩盘。湖北理元理律师事务所通过预重整制度与企业债务重组技术&#xff0c;探索出“司法保护商业谈判”的纾困模式。 一、企业债务风险处置四步法 紧急止血 申请司法保护&#xff1a;通过诉前调解…
阅读更多...
利用DeepWiki高效阅读项目源码

利用DeepWiki高效阅读项目源码

想获取更多高质量的Java技术文章&#xff1f;欢迎访问Java技术小馆官网&#xff0c;持续更新优质内容&#xff0c;助力技术成长 技术小馆官网 DeepWiki 是一个强大的工具&#xff0c;专为程序员提供开源项目源码的结构化文档和 AI 驱动的问答功能&#xff0c;帮助快速理解复杂…
阅读更多...
django rest_framework 前端网页实现Token认证

django rest_framework 前端网页实现Token认证

rest_framework提供了几种认证方式&#xff1a;Session、Token等。Session是最简单的&#xff0c;几乎不用写任何代码就可以是实现&#xff0c;Token方式其实也不复杂&#xff0c;网上的教程一大把&#xff0c;但是最后都是用Postman这类工具来实现API调用的&#xff0c;通过这…
阅读更多...
面试题-函数类型的重载是啥意思

面试题-函数类型的重载是啥意思

在 TypeScript 中&#xff0c;函数重载&#xff08;Function Overload&#xff09; 是指为同一个函数提供多个不同的调用签名&#xff08;参数类型和返回值类型的组合&#xff09;&#xff0c;但函数体只有一个实现。这样可以让函数在不同的输入下表现出不同的行为&#xff0c;…
阅读更多...
磐基PaaS平台MongoDB组件SSPL许可证风险与合规性分析（上）

磐基PaaS平台MongoDB组件SSPL许可证风险与合规性分析（上）

#作者&#xff1a;任少近 文章目录 1.背景与问题1.1.背景1.2.问题 3.SSPL条款解读分析3.1.条款0&#xff1a;定义条款3.2.条款一&#xff1a;源代码条款3.3.条款二&#xff1a;基本授权条款3.4.条款三&#xff1a;反规避保护条款3.5.条款四&#xff1a;逐字传播条款3.6.条款五…
阅读更多...
「Linux文件及目录管理」输入输出重定向与管道

「Linux文件及目录管理」输入输出重定向与管道

知识点解析 输入/输出重定向 标准输入（stdin）：默认从键盘读取，文件描述符为0。标准输出（stdout）：默认输出到终端，文件描述符为1。标准错误（stderr）：默认输出到终端，文件描述符为2。重定向符号： >：覆盖输出到文件（如command > file）。>>：追加输出…
阅读更多...
【Node】最佳Node.js后端开发模板推荐

【Node】最佳Node.js后端开发模板推荐

Node.js 后端开发模板推荐 以下是几个优秀的Node.js后端模板&#xff0c;它们都适合二次开发&#xff0c;各自有不同的特点和适用场景&#xff1a; 1. Express基础模板 Express Generator (官方工具) 官方提供的快速搭建工具基础MVC结构简单易上手 npm install express-ge…
阅读更多...
HALCON相机标定

HALCON相机标定

相机标定简介&#xff1a; 首先&#xff0c;相机会产生畸变&#xff0c;即实际图像和拍摄图像不一致&#xff0c;可以是凸性也可以是凹性形变&#xff0c;相机标定的过程就是将畸变图像还原为原始图像&#xff0c;并将图像中的像素坐标转换为世界坐标。 形如&#xff1a;相机内…
阅读更多...
Solidity 入门教程（二）：值类型全解 —— 布尔、整数、地址与字节数组

Solidity 入门教程（二）：值类型全解 —— 布尔、整数、地址与字节数组

在上一章中&#xff0c;我们写下了第一个 Solidity 合约并在 Remix 中成功运行。本章我们将深入了解 Solidity 中的几种常用值类型&#xff08;Value Types&#xff09;&#xff0c;并通过示例代码在 Remix 进行验证。 一、Solidity 中的三种数据类型 在 Solidity 中&#xf…
阅读更多...
16.大数据监控

16.大数据监控

0.说明 监控主要构成。 软件版本。 1.exporter监控配置 1.1 node_exporter 启动命令 nohup ./node_exporter &服务 创建文件 /etc/systemd/system/node_exporter.service&#xff1a; [Unit] DescriptionPrometheus Node Exporter Wantsnetwork-online.target Aft…
阅读更多...
Tomcat项目本地部署（Servlet为例）

Tomcat项目本地部署（Servlet为例）

在Windows上部署 在idea中打开项目 首先我们需要准备一个Servlet项目&#xff0c;我之前的Servlet项目是用eclipse写的&#xff0c;这种情况下如果用idea直接打开的话会出现左侧目录无法显示的情况&#xff0c;这个时候我们就需要用别的方法打开 打开项目管理 如下图&#…
阅读更多...
安装MySQL 5.7导入数据，修改密码，创建账号并授权

安装MySQL 5.7导入数据，修改密码，创建账号并授权

1. 准备工作 sudo yum update -y sudo yum install -y wget libaio numactl 2. 下载 MySQL 5.7 二进制包 wget https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.44-linux-glibc2.12-x86_64.tar.gz 3. 创建 MySQL 用户和组 sudo groupadd mysql sudo useradd -r -g m…
阅读更多...
基础RAG实现，最佳入门选择（八）

基础RAG实现，最佳入门选择（八）

RAG重排序 RAG重排序技术以提高RAG系统中的检索质量。重新排序充当初始检索后的第二个过滤步骤&#xff0c;以确保最相关的内容用于响应生成。 重排序的关键概念 1.初始检索&#xff1a;使用基本相似度搜索的第一遍&#xff08;准确度较低但速度更快&#xff09; 2.文档评分…
阅读更多...
Spring Boot 常用注解整理

Spring Boot 常用注解整理

Spring & Spring Boot 常用注解整理 现代的 Spring 与 Spring Boot 应用大量使用注解来简化配置、管理组件和实现各种框架功能。本文系统整理了常用的 Spring/Spring Boot 注解&#xff0c;按照功能分类进行介绍。每个注解都会涵盖其含义、提供来源、应用场景以及代码示例…
阅读更多...
最新文章

Copyright @ 2022~2023