当前位置: 首页 > news >正文

微信小程序学习第11天——Vant Weapp组件库、API Promise化、全局数据共享Mobx、分包

目录

  • 一、小程序对npm 的限制
  • 二、使用Vant Weapp组件库
    • 1、安装组件
    • 2、使用组件
    • 3、定制全局样式
  • 三、API Promise化
    • 1、下载miniprogram-api-promise
    • 2、引入
    • 3、使用
  • 四、全局数据共享
  • 五、分包
    • 1、分包概念
    • 2、使用分包
    • 3、独立分包
    • 4、分包预下载

一、小程序对npm 的限制

在小程序中使用npm包有3个限制:① 不支持依赖于Node.js内置库的包 ② 不支持依赖于浏览器内置对象的包 ③ 不支持依赖于C++插件的包

二、使用Vant Weapp组件库

Vant Weapp 是有赞前端团队开源的一套小程序 UI 组件库,使用的是MIT 开源许可协议

1、安装组件

① 通过npm安装
② 构建npm包
③ 修改app.json
详细步骤:安装Vant组件库

2、使用组件

在app.json 的usingComponents节点中引入需要的组件,即可在wxml 中直接使用组件

// 通过 npm 安装
// app.json
"usingComponents": {"van-button": "@vant/weapp/button/index"
}

3、定制全局样式

Vant Weapp 使用 CSS 变量来实现定制主题。在app.wxss中写入全局css变量

Page{--button-danger-background-color:#efefef;
}

css变量的基本使用可以参考MDN文档:css自定义属性
所有可用的颜色变量可参考 Vant 官方文件:Vant官方提供的配置文件

三、API Promise化

小程序提供的异步API是基于回调函数实现的,容易造成回调地狱问题,并且代码可读性和维护性较差。
API Promise化,指的是通过额外的配置,将官方提供的、基于回调函数的异步 API,升级改造为基于Promise 的异步 API。

1、下载miniprogram-api-promise

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

npm i --save miniprogram-api-promise@1.0.4

2、引入

在小程序的入口文件app.js中,调用一次proimisifyAll()方法,即可实现异步API的Promise化

import { promisifyAll } from "miniprogram-api-promise";const wxp = wx.p = {};
// promisify all wx's appi
promisifyAll(wx,wxp)

3、使用

使用wx.p.request()方法

asyn addbtn() {await wx.p.request({method:'GET',url:"https://www.abc.com",data:{name:'憨瓜'}})
}

四、全局数据共享

开发中常用的全局数据共享方案有:Vuex、Redux、MobX 等。
在小程序中,可以使用mobx-miniprogrammobx-miniprogram-bindings实现全局数据共享
mobx-miniprogram是用来创建Store实例对象
mobx-miniprogram-bindings是用来把Store中的共享数据或方法,绑定到组件或页面中使用

《1》安装Mobx

npm i mobx-miniprogram  mobx-miniprogram-bindings --save

注意:Mobx相关的包安装完毕之后,必须删除miniprogram_npm目录后,重新构建npm

《2》创建Mobx的Store实例

// 引入
import { observable, action } from "mobx-miniprogram";// 创建Store实例
export const store = observable({// 数据字段numA:1,numB:2,// 计算属性get sum () {return this.numA + this.numB},// actions方法,用来修改 store 中的数据updateNum:action(function(step){this.numA += step})
})

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

// 页面.js文件
import { creatStoreBindings } from "mobx-miniprogram-bindings";
import {store} from "../../store/store";
Page({// 监听页面加载omLoad:function(){this.storeBindings = creatStoreBindings(this.{store,fields:["numA","numB","sum"],actions:["updateNum"]})},// 监听页面卸载onUnLoad:function(){this.storeBindings.destroyStoreBindings()}
})

《4》在页面中使用Store中的成员

// 页面的.wxml结构
<view>{{numA}} + {{numB}} = {{sum}}</view>
<button bindtap="btnHandle" data-step="{{1}}">numA + 1</button>// 按钮tap 事件的处理函数
btnHandle(e) {this.updatedNum(e.target.dataset.step),
}

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

import { storeBindingBehavior } from "mobx-miniprogram-bindings";
import {store} from "../../store/store";
Component({// 通过 storeBindingBehavior 来实现自动绑定behaviors:[storeBindingBehavior],storeBindings:{store,fields:{numA:()=>store.numA, // 绑定字段的方法一numB:(store)=>store.numB, // 绑定字段的方法二sum:"sum" // 绑定字段的方法三} },// 指定要绑定的方法actions:{updatedNum:'updateNum'}
})

《6》在组件中使用Store中的成员

// 组件的.wxml结构
<view>{{numA}} + {{numB}} = {{sum}}</view>
<button bindtap="btnHandle" data-step="{{1}}">numA + 1</button>// 按钮tap 事件的处理函数
methods:{btnHandle(e) {this.updatedNum(e.target.dataset.step),}
}

五、分包

1、分包概念

分包是指将一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载
在这里插入图片描述

分包前,整个项目体积过大,影响首次启动的下载时间
分包后,项目由1个主包+多个分包组成
主包:包含项目的启动页或TabBar页面、以及所有分包都需要用到的一些公共资源
分包:只包含当前分包有关的页面和私有资源

《1》分包加载机制
小程序启动时,默认会下载主包并启动主包内页面,tabBar页面需要放到主包内
当用户进入分包内某个页面时,客户端会吧对应的分包下载下来,非tabBar页面可以按照功能的不同,划分为不同的分包之后,进行按需下载

《2》分包的体积限制
整个小程序所有分包大小不超过 16M(主包 + 所有分包)
单个分包/主包大小不能超过 2M

2、使用分包

《1》配置方法
app.jsonsubpackages 节点中声明分包的结构

{"pages": ["pages/index/index"],"subpackages": [ // 通过 subpackages 节点,声明分包的结构{ "root": "/package1",  // 分包的根路径"pages": ["pages/cat/cat","pages/dog/dog"],// 当前分包下所有的页面相对存放路径"name": "pg1" // 分包的别名  },{"root": "/package2","pages": ["pages/man/man","pages/woman/woman"]}]
}

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

《3》引用原则
① 主包无法引用分包内的私有资源
② 分包之间不能相互引用私有资源
③ 分包可以引用主包内的公共资源

3、独立分包

独立分包可以独立于主包和其他分包而单独运行
优点:不依赖于主包运行,可以提升分包页面的启动速度,一个小程序可以有多个独立分包
《1》配置方法
通过 independent 节点 声明独立分包

"subpackages": [{"root": "/package1","pages": ["pages/cat/cat","pages/dog/dog"],"independent": true  // 通过independent节点声明当前 package1分包为独立分包
},

《2》引用原则
独立分包和普通分包以及主包之间,是相互隔绝的,不能相互引用彼此的资源(独立分包不能引用主包的公共资源)

4、分包预下载

在进入小程序的某个页面时,由框架自动预下载可能需要的分包,从而提升进入后续分包页面时的启动速度。
《1》定义预下载规则
在app.json中通过 preloadRule 节点定义分包的预下载规则,预下载分包的行为,会在进入指定的页面时触发

"preloadRule": { // 分包预下载规则"pages/home/home":{ // 触发分包预下载规则的页面路径"network": "all", // 在指定的网络模式下进行预下载,默认值为wifi,可选值all/wifi"packages": ["package1"] // 进入页面后,预下载哪些分包,可以通过root/name指定预下载哪些分包}
},

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

相关文章:

微信小程序学习第11天——Vant Weapp组件库、API Promise化、全局数据共享Mobx、分包

目录一、小程序对npm 的限制二、使用Vant Weapp组件库1、安装组件2、使用组件3、定制全局样式三、API Promise化1、下载miniprogram-api-promise2、引入3、使用四、全局数据共享五、分包1、分包概念2、使用分包3、独立分包4、分包预下载一、小程序对npm 的限制 在小程序中使用…...

Python3-基本数据类型

Python3 基本数据类型 Python 中的变量不需要声明。每个变量在使用前都必须赋值&#xff0c;变量赋值以后该变量才会被创建。 在 Python 中&#xff0c;变量就是变量&#xff0c;它没有类型&#xff0c;我们所说的"类型"是变量所指的内存中对象的类型。 等号&…...

RPA落地指南:什么是RPA

什么是RPA RPA在企业中起什么作用并扮演什么角色呢&#xff1f;想要充分了解RPA&#xff0c;我们需要知道RPA的相关概念、特点、功能以及能解决的问题。接下来对这些内容进行详细介绍。 1.1 RPA的3个核心概念 RPA的中文译名是“机器人流程自动化”&#xff0c;顾名思义&…...

跨域问题的三种解决办法

我们平时对于前后端联调的项目&#xff0c;以下的错误是经常常见的&#xff0c;我们查看浏览器报错&#xff1a; Access to XMLHttpRequest at http://localhost:63110/system/dictionary/all fromorigin http://localhost:8601 has been blocked by CORS policy: No Access…...

c++提高篇——string容器

一、string基本概念 string是C风格的字符串&#xff0c;而string本质上是一个类。 与c语言不同&#xff0c;string是一个类&#xff0c;类内部封装了char*&#xff0c;管理这个字符串&#xff0c;是一个char型的容器。在根本上与c语言字符串是一致的。 在string类内部封装了很…...

[软件工程导论(第六版)]第6章 详细设计(复习笔记)

文章目录6.1 结构程序设计6.2 人机界面设计6.3 过程设计的工具6.3.1 程序流程图&#xff08;程序框图&#xff09;6.3.2 盒图&#xff08;N-S图&#xff09;6.3.3 PAD图&#xff08;问题分析图&#xff09;6.3.4 判定表6.3.5 判断树6.3.6 过程设计语言6.4 面向数据结构的设计方…...

RabbitMQ核心内容:实战教程(java)

文章目录一、安装二、入门1.分类2.核心概念3.工作原理4.六大模式三、模式一&#xff1a;"Hello World!"1.依赖2.生产者代码3.消费者代码四、模式二&#xff1a;Work Queues1.工作原理2.工具类代码&#xff1a;连接工厂3.消费者代码4.生产者代码5.分发策略不公平分发预…...

RK356x U-Boot研究所(命令篇)3.7 pci与nvme命令的用法

平台U-Boot 版本Linux SDK 版本RK356x2017.09v1.2.3文章目录 一、设备树与config配置二、pci命令的定义三、nvme命令的定义四、pci与nvme命令的用法3.1 pci总线扫描3.2 nvme设备信息3.3 nvme设备读写一、设备树与config配置 RK3568支持PCIe接口,例如ROC-RK3568-PC: 原理图如…...

微信头像昵称获取能力的变化导致了我半年没更新小程序

背景 2022年9月份&#xff0c;微信更改了获取头像昵称的规则&#xff0c;回收了原有 wx.getUserProfile 中的部分能力&#xff0c;为了减小对【微点记账】小程序的影响&#xff0c;长达半年未做任何更新&#xff0c;今天为了增加这个聊天机器人的功能&#xff0c;不得不重新查…...

【深度学习编译器系列】1. 为什么需要深度学习编译器?

本系列是自学深度学习编译器过程中的一些笔记和总结&#xff0c;参考文献在文末。 1. 概述 深度学习&#xff08;DL&#xff09;编译器的产生有两方面的因素&#xff1a;深度学习模型的广泛应用&#xff0c;以及深度学习芯片的层出不穷。 一方面&#xff0c;我们现在有非常多…...

数据结构与算法总结整理(超级全的哦!)

数据结构与算法基础大O表示法时间复杂度大O表示法时间复杂度排序&#xff1a;最坏时间复杂度时间复杂度的几条基本计算规则内存工作原理什么是内存内存主要分为三种存储器随机存储器&#xff08;RAM&#xff09;只读存储器&#xff08;ROM&#xff09;高速缓存&#xff08;Cach…...

DPDK — MALLOC 堆内存管理组件

目录 文章目录 目录MALLOC 堆内存管理组件rte_malloc() 接口malloc_heap 结构体malloc_elem 结构体内存初始化流程内存申请流程内存释放流程MALLOC 堆内存管理组件 MALLOC(堆内存管理组件)基于 hugetlbfs 内核文件系统来实现,能够从 HugePage 中分配一块连续的物理大页内存…...

分享113个HTML艺术时尚模板,总有一款适合您

分享113个HTML艺术时尚模板&#xff0c;总有一款适合您 113个HTML艺术时尚模板下载链接&#xff1a;https://pan.baidu.com/s/1ReoPNIRjkYov-SjsPo0vhg?pwdjk4a 提取码&#xff1a;jk4a Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 女性化妆用品网页模板 粉…...

2023年美赛C题Wordle预测问题一建模及Python代码详细讲解

相关链接 &#xff08;1&#xff09;2023年美赛C题Wordle预测问题一建模及Python代码详细讲解 &#xff08;2&#xff09;2023年美赛C题Wordle预测问题二建模及Python代码详细讲解 &#xff08;3&#xff09;2023年美赛C题Wordle预测问题三、四建模及Python代码详细讲解 &…...

小米12s ultra,索尼xperia1 iv,数码相机 拍照对比

首先说明所有的测试结果和拍摄数据我放到百度网盘了(地址在结尾) 为什么做这个测试 我一直想知道现在的手机和相机差距有多大,到底差在哪儿? 先说结论: 1.1英寸的手机cmos(2022年) 6年前(2016)的入门款相机(m43画幅) 2.手机 不能换镜头,只能在特定的拍摄距离才能发挥出全…...

C++笔记 模板的进阶知识

目录 1. 非类型模板参数 2.模板的特化 2.1 函数模板的特化 2.2 类模板的特化 2.2.1 全特化 2.2.2 偏特化 3.模板的分离编译 3.1 什么是分离编译&#xff1f; 3.2 模板的分离编译 4.模板的总结 模板的初阶内容&#xff1a;(594条消息) C模板的原理和使用_全貌的博客-CSD…...

基于 Debain11 构建 asp.net core 6.x 的基础运行时镜像

基于 Debain11 构建 asp.net core 6.x 的基础运行时镜像Linux 环境说明Debian 简介Debian 发行版本关于 Debian 11Linux 常用基础工具Dockerfile 中 RUN 指令RUN 语法格式RUN 语义说明编写 Dockerfile 构建 Runtime 基础镜像ASP.NET Core Runtime 基础镜像Dockerfile 编写Windo…...

【无人机路径规划】基于IRM和RRTstar进行无人机路径规划(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

Spring Boot中使用@Autowire装配接口是怎么回事?

在学习使用Spring Boot框架时候&#xff0c;发现了一个特别的现象UserMapper是一个接口&#xff0c;在另一个类中好像直接使用Autowired装配了一个UserMapper对象&#xff1f;&#xff1f;&#xff1f;我纳闷了一会儿&#xff0c;接口居然可以直接实例对象吗&#xff1f;根据我…...

23种设计模式介绍(Python示例讲解)

文章目录一、概述二、设计模式七种原则三、设计模式示例讲解1&#xff09;创建型模式1、工厂模式&#xff08;Factory Method&#xff09;【1】简单工厂模式&#xff08;不属于GOF设计模式之一&#xff09;【2】工厂方法模式2、抽象工厂模式&#xff08;AbstractFactory&#x…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...