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

小程序-基础加强

news 文章来源：https://blog.csdn.net/2302_79981885/article/details/145400215 2025/4/9 6:40:48

前言

这一节把基础加强讲完

1. 导入需要用到的小程序项目

在这里插入图片描述
在这里插入图片描述

2. 初步安装和使用vant组件库

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这里还可以扫描二维码
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

其中步骤四没什么用
在这里插入图片描述

右键选择最后一个

在开始之前，我们的项目根目录得有package.json
没有的话，我们就初始化一个

在这里插入图片描述
但是我们没有npm这个命令，我们要先下载才行
https://nodejs.org/en/about/previous-releases
输入这个网址
在这里插入图片描述
https://nodejs.org/en/
或者这个网址
在这里插入图片描述

如果在浏览器上下载太慢的话，可以选择在迅雷上下载

这样就安装了

现在检验一下安装是否成功还是失败

查看node.js的版本号
终端输入node -v即可
cmd即可

在这里插入图片描述
这样就可以使用npm了

然后还要把这个nodejs的安装路径搞到环境变量中

在这里插入图片描述
这样查看安装路径

在这里插入图片描述
最后的安装路径就是那个exe文件，弄好了环境变量以后，就把电脑重启就可以了

在这里插入图片描述
这样就成功了，创建了一个包管理配置文件，名字叫做package.json

在这里插入图片描述
这时就可以把这个命令拿过去了

在这里插入图片描述
记得还要指定版本号
在这里插入图片描述

在这里插入图片描述
本地设置那里没有的话，可以不用勾

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
这样就把button的组件进行引入了
而且这时全局的引入

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

3. 使用css变量定制vant主题样式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这样就变了

第一使用page这个节点，因为要让自己变量全局生效，所以我们使用page这个根节点
每个页面的根节点都是page的在这里插入图片描述
所以用page，每个页面都可以访问了
第二就是为什么用这个名字–button-danger-background-color就可以改变了
因为这是官方文档告诉的
在这里插入图片描述
点一下配置文件
会进入github
在这里插入图片描述
在这里插入图片描述
这里就是和按钮相关的变量了

在这里插入图片描述
在这里插入图片描述
@要改为–

在这里插入图片描述
在这里插入图片描述

4. 小程序API的Promise化

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在小程序中每安装完一个包，都需要对这个包重新进行构建

在这里插入图片描述
每次安装一个包，都会把包安装到这里

我们要把包迁移到miniprogram_npm这个目录下才行

在这里插入图片描述
在这里插入图片描述
miniprogram_npm这个下面目前只有一个包
所以我们还要构建，每次构建都要删除miniprogram_npm这个目录
在这里插入图片描述
shift+delete强制删除

在这里插入图片描述
点击构建npm
在这里插入图片描述

这样就有了这个包了，现在就可以使用了这个包了

在这里插入图片描述
将wx promise化为wxp或者wx.p

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
然后继续优化方法

在这里插入图片描述
我不知道我这里为什么不行
在这里插入图片描述
这里打印出来的应该是Data

5.全局数据共享

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6. 全局数据共享-创建Store实例并定义计算属性与actions方法

在这里插入图片描述
创建一个文件夹store，专门用来存储mobx
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
get表示这个是只读的

在这里插入图片描述
在这里插入图片描述

7. 全局数据共享-在页面中使用store中的成员

在这里插入图片描述
我们在消息页面使用store里面的数据
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这是清理工作
在这里插入图片描述
这样就把成员绑定到页面上了

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
找寻原因
在这里插入图片描述
在这里插入图片描述

8. 全局数据共享-在组件中使用store中的成员

在这里插入图片描述

先创建一个组件

在这里插入图片描述
然后在app.json里面注册这个组件
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
而且页面里面的值也会跟着变化

9. 分包的基础概念

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

10. 分包的基本用法

在这里插入图片描述
pages页面下的就适合放在主包里面
在这里插入图片描述
这里写分包的目录，小程序会自动生成的

在这里插入图片描述
一保存就会自动生成了

在这里插入图片描述

在这里插入图片描述
root是分包的根目录
name是分包的别名
在这里插入图片描述
这样p1就是第一个分包
如何知道分包的体积呢

在这里插入图片描述
这样就可以查看了
在这里插入图片描述
在这里插入图片描述

11. 独立分包

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
这样pkgB就是独立分包了

在这里插入图片描述

12. 分包预下载

在这里插入图片描述
在这里插入图片描述
现在我们希望在进入contact页面的时候，自动下载pkgA页面
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这里可以切换网络

在这里插入图片描述
我们这个改为4G就失败了

在这里插入图片描述

13. 在app.json中定义tabBar的配置信息

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
只需要在app.json声明custom就可以了

在这里插入图片描述
然后就是list数组还要保留
在这里插入图片描述
所以list节点还要保留，第一是兼容低版本，第二就是区分哪些页面是tab页面

14. 初步实现自定义的tabBar效果

在这里插入图片描述

在根目录新建文件夹
在这里插入图片描述
然后就是在里面创建index组件
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
然后就变成这样了

最下面的那串数据来自index.html
在这里插入图片描述
我们可以用vant
在这里插入图片描述
这个就很好了

在这里插入图片描述
这就是引入

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
active就是每个索引的值
然后我们开始结合list里面的图标
在这里插入图片描述
这里就可以自定义图标了
在这里插入图片描述
在这里插入图片描述
右上角的数字就是info的值

icon-active就是未选中的图标
icon就是选中时候的图标

在这里插入图片描述
在这里插入图片描述
我们把list弄到index.js中的Data里面
然后我们就可以用for来搞出对应的tabBar图标了

在这里插入图片描述
在这里插入图片描述
然后在改一下大小

在这里插入图片描述

15. 渲染tabBar上的数字徽标

在这里插入图片描述
在这里插入图片描述
可以看出这个2超出了灰线，所以美化
把图标与字体之间的间隙弄为0就可以了
在这里插入图片描述
这里的空隙就是这里来的，我们在点一下就可以了
在这里插入图片描述
就是要干掉这个黄色的部分
在这里插入图片描述
把这个margin-bottom值设置为0就可以了

在这里插入图片描述
它的父的类名是van-tabbar-item可以来操作

在这里插入图片描述
但是好像没有生效
在这里插入图片描述
所以我们要覆盖vant的样式得开启styleIsolation: ‘shared’
在这里插入图片描述
在这里插入图片描述
这个距离就变小了

现在我们只给消息页面搞上徽标

在这里插入图片描述
我们先给消息页面加上一个属性info
在这里插入图片描述
在这里插入图片描述
info="{{item.info?item.info:‘’}}这是一个三元的判断
在这里插入图片描述
info为0就不会有徽标
但是info写死了
现在我们的info就写成sum的值
sum的值是store里面的，所以要数据绑定到组件中
我们可以查看官方文档

在这里插入图片描述
在这里插入图片描述
或者我们前面讲过的
在这里插入图片描述
第一步

在这里插入图片描述
这是第二步
在这里插入图片描述
这是第三步

这就把store里面的sum映射过来了

我们可以用数据监听器监听sum的变化
在这里插入图片描述
这里更改一下

在这里插入图片描述
这样就可以了

在这里插入图片描述

16. 实现tabBar页面的切换效果

在这里插入图片描述
先补全一下根路径

在这里插入图片描述
这样就可以了

在这里插入图片描述

但是底部的选中效果有点问题，不是对应的

在这里插入图片描述
我们最好把这个active定义在store里面
因为每次点击active都变成0了

把active先干掉
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
然后就是映射到index.js中

在这里插入图片描述

在这里插入图片描述
然后点击产生change事件，要更新active的索引

先把对应更改store里面的active的方法映射过来

在这里插入图片描述
在这里插入图片描述
这样就可以了

在这里插入图片描述
这样就成功了

17. 修改tabBar选中项文本的颜色值

在这里插入图片描述
active-color就可以设置了
在这里插入图片描述

其中颜色我们可以用取色器来设置
在这里插入图片描述
这样就变颜色了

总结

下一节开始讲对应的项目了

相关文章：

小程序-基础加强

前言 这一节把基础加强讲完 1. 导入需要用到的小程序项目 2. 初步安装和使用vant组件库 这里还可以扫描二维码 其中步骤四没什么用 右键选择最后一个 在开始之前，我们的项目根目录得有package.json 没有的话，我们就初始化一个 但是我们没有npm这个…...

编程日记 2025/2/3 19:39:18

pytorch实现基于Word2Vec的词嵌入

PyTorch 实现 Word2Vec（Skip-gram 模型） 的完整代码，使用 中文语料 进行训练，包括数据预处理、模型定义、训练和测试。 1. 主要特点 支持中文数据，基于 jieba 进行分词 使用 Skip-gram 进行训练，适用于小数…...

编程日记 2025/2/3 19:37:12

流媒体娱乐服务平台在AWS上使用Presto作为大数据的交互式查询引擎的具体流程和代码

一家流媒体娱乐服务平台拥有庞大的用户群体和海量的数据。为了高效处理和分析这些数据，它选择了Presto作为其在AWS EMR上的大数据查询引擎。在AWS EMR上使用Presto取得了显著的成果和收获。这些成果不仅提升了数据查询效率，降低了运维成本，还…...

编程日记 2025/2/3 19:34:08

鸿蒙 循环控制 简单用法

效果 简单使用如下： class Item {id: numbername: stringprice: numberimg: stringdiscount: numberconstructor(id: number, name: string, price: number, img: string, discount: number) {this.id idthis.name namethis.price pricethis.img imgthis.discou…...

编程日记 2025/2/3 19:33:06

四、GPIO中断实现按键功能

4.1 GPIO简介 输入输出（I/O）是一个非常重要的概念。I/O泛指所有类型的输入输出端口，包括单向的端口如逻辑门电路的输入输出管脚和双向的GPIO端口。而GPIO（General-Purpose Input/Output）则是一个常见的术语&#xff0c…...

编程日记 2025/2/3 19:28:54

Linux安装zookeeper

1, 下载 Apache ZooKeeperhttps://zookeeper.apache.org/releases.htmlhttps://zookeeper.apache.org/releases.htmlhttps://zookeeper.apache.org/releases.htmlhttps://zookeeper.apache.org/releases.htmlhttps://zookeeper.apache.org/releases.htmlhttps://zookeeper.apa…...

编程日记 2025/2/3 19:10:25

【贪心算法篇】：“贪心”之旅--算法练习题中的智慧与策略（二）

✨感谢您阅读本篇文章，文章内容是个人学习笔记的整理，如果哪里有误的话还请您指正噢✨ ✨ 个人主页：余辉zmh–CSDN博客 ✨ 文章所属专栏：贪心算法篇–CSDN博客 文章目录 前言例题1.买卖股票的最佳时机2.买卖股票的最佳时机23.k次取…...

编程日记 2025/2/3 19:08:23

007 JSON Web Token

文章目录 https://doc.hutool.cn/pages/jwt/#jwt%E4%BB%8B%E7%BB%8D JWT是一种用于双方之间安全传输信息的简洁的、URL安全的令牌标准。这个标准由互联网工程任务组(IETF)发表，定义了一种紧凑且自包含的方式，用于在各方之间作为JSON对象安全地传输信息。…...

编程日记 2025/2/3 19:04:18

Windsurf cursor vscode+cline 与Python快速开发指南

Windsurf简介 Windsurf是由Codeium推出的全球首个基于AI Flow范式的智能IDE，它通过强大的AI助手功能，显著提升开发效率。Windsurf集成了先进的代码补全、智能重构、代码生成等功能，特别适合Python开发者使用。 Python环境配置 1. Conda安装…...

编程日记 2025/2/3 19:01:12

将markdown文件和LaTex公式转为word

通义千问等大模型生成的回答多数是markdown类型的，需要将他们转为Word文件 一 pypandoc 介绍 1. 项目介绍 pypandoc 是一个用于 pandoc 的轻量级 Python 包装器。pandoc 是一个通用的文档转换工具，支持多种格式的文档转换，如 Markdown、HTM…...

编程日记 2025/2/3 18:57:08

grpc 和 http 的区别---二进制vsJSON编码

gRPC 和 HTTP 是两种广泛使用的通信协议，各自适用于不同的场景。以下是它们的详细对比与优势分析： 一、核心特性对比 特性gRPCHTTP协议基础基于 HTTP/2基于 HTTP/1.1 或 HTTP/2数据格式默认使用 Protobuf（二进制）通常使用 JSON/…...

编程日记 2025/2/3 18:55:04

C#面向对象(封装)

1.什么是封装? C# 封装 封装 被定义为“把一个或多个项目封闭在一个物理的或者逻辑的包中”。 在面向对象程序设计方法论中，封装是为了防止对实现细节的访问。 抽象和封装是面向对象程序设计的相关特性。 抽象允许相关信息可视化，封装则使开发者实现所…...

编程日记 2025/2/3 18:53:02

kamailio-kamctl monitor解释

这段输出是 Kamailio 服务器的运行时信息和统计数据的摘要。以下是对每个部分的详细解释： 1. Kamailio Runtime Details cycle #: 3: 表示 Kamailio 的主循环已经运行了 3 个周期。Kamailio 是一个事件驱动的服务器，主循环用于处理事件和请求。if const…...

编程日记 2025/2/3 18:51:00

39. I2C实验

一、IIC协议详解 1、ALPHA开发板上有个AP3216C，这是一个IIC接口的器件，这是一个环境光传感器。AP3216C连接到了I2C1上: I2C1_SCL: 使用的是UART4_TXD这个IO，复用位ALT2 I2C1_SDA: 使用的是UART4_RXD这个IO。复用为ALT2 2、I2C分为SCL和SDA&…...

编程日记 2025/2/3 18:49:57

GPIO配置通用输出，推挽输出，开漏输出的作用，以及输出上下拉起到的作用

通用输出说明： ①输出原理： 对输出数据寄存器的对应位写0 或 1，就可以控制对应编号的IO口输出低/高电平 ②输出类型 推挽输出：IO口可以输出高电平，也可以输出低电平 开漏输出：IO口只能输出低电平 所以…...

编程日记 2025/2/3 18:46:54

Spring AOP 入门教程：基础概念与实现

目录 第一章：AOP概念的引入 第二章：AOP相关的概念 1. AOP概述 2. AOP的优势 3. AOP的底层原理 第三章：Spring的AOP技术 - 配置文件方式 1. AOP相关的术语 2. AOP配置文件方式入门 3. 切入点的表达式 4. AOP的通知类型 第四章&#x…...

编程日记 2025/2/3 18:43:49

DeepSeek 核心技术全景解析

DeepSeek 核心技术全景解析：突破性创新背后的设计哲学 DeepSeek的创新不仅仅是对AI基础架构的改进，更是一场范式革命。本文将深入剖析其核心技术，探讨 如何突破 Transformer 计算瓶颈、如何在 MoE（Mixture of Experts&#xff09…...

编程日记 2025/2/3 18:42:47

90，【6】攻防世界 WEB Web_php_unserialize

进入靶场 进入靶场 <?php // 定义一个名为 Demo 的类 class Demo { // 定义一个私有属性 $file&#xff0c;默认值为 index.phpprivate $file index.php;// 构造函数&#xff0c;当创建类的实例时会自动调用// 接收一个参数 $file&#xff0c;用于初始化对象的 $file 属…...

编程日记 2025/2/3 18:39:39

实现网站内容快速被搜索引擎收录的方法

本文转自&#xff1a;百万收录网 原文链接&#xff1a;https://www.baiwanshoulu.com/6.html 实现网站内容快速被搜索引擎收录&#xff0c;是网站运营和推广的重要目标之一。以下是一些有效的方法&#xff0c;可以帮助网站内容更快地被搜索引擎发现和收录&#xff1a; 一、确…...

编程日记 2025/2/3 18:35:33

WSL2中安装的ubuntu搭建tftp服务器uboot通过tftp下载

Windows中安装wsl2&#xff0c;wsl2里安装ubuntu。 1. Wsl启动后 1&#xff09;Windows下ip ipconfig 以太网适配器 vEthernet (WSL (Hyper-V firewall)): 连接特定的 DNS 后缀 . . . . . . . : IPv4 地址 . . . . . . . . . . . . : 172.19.32.1 子网掩码 . . . . . . . .…...

编程日记 2025/2/3 18:33:31

机器学习优化算法：从梯度下降到Adam及其变种

机器学习优化算法&#xff1a;从梯度下降到Adam及其变种 引言 最近deepseek的爆火已然说明&#xff0c;在机器学习领域&#xff0c;优化算法是模型训练的核心驱动力。无论是简单的线性回归还是复杂的深度神经网络&#xff0c;优化算法的选择直接影响模型的收敛速度、泛化性能…...

编程日记 2025/2/3 18:31:27

[SAP ABAP] 静态断点的使用

在 ABAP 编程环境中&#xff0c;静态断点通过关键字BREAK-POINT实现&#xff0c;当程序执行到这一语句时&#xff0c;会触发调试器中断程序的运行&#xff0c;允许开发人员检查当前状态并逐步跟踪后续代码逻辑 通常情况下&#xff0c;在代码的关键位置插入静态断点可以帮助开发…...

编程日记 2025/2/3 18:29:24

129.求根节点到叶节点数字之和（遍历思想）

Problem: 129.求根节点到叶节点数字之和 文章目录 题目描述思路复杂度Code 题目描述 思路 遍历思想(利用二叉树的先序遍历) 直接利用二叉树的先序遍历&#xff0c;将遍历过程中的节点值先利用字符串拼接起来遇到根节点时再转为数字并累加起来&#xff0c;在归的过程中&#xf…...

编程日记 2025/2/3 18:26:20

NCCL、HCCL、通信、优化

文章目录 从硬件PCIE、NVLINK、RDMA原理到通信NCCL、MPI原理&#xff01;通信实现方式&#xff1a;机器内通信、机器间通信通信实现方式&#xff1a;通讯协调通信实现方式&#xff1a;机器内通信&#xff1a;PCIe通信实现方式&#xff1a;机器内通信&#xff1a;NVLink通信实现…...

编程日记 2025/2/3 18:23:17

unity学习21：Application类与文件存储的位置

目录 1 unity是一个跨平台的引擎 1.1 使用 Application类&#xff0c;去读写文件 1.2 路径特点 1.2.1 相对位置/相对路径&#xff1a; 1.2.2 固定位置/绝对路径&#xff1a; 1.3 测试方法&#xff0c;仍然挂一个C#脚本在gb上 2 游戏数据文件夹路径&#xff08;只读&…...

编程日记 2025/2/3 18:22:14

17 一个高并发的系统架构如何设计

高并发系统的理解 第一:我们设计高并发系统的前提是该系统要高可用&#xff0c;起码整体上的高可用。 第二:高并发系统需要面对很大的流量冲击&#xff0c;包括瞬时的流量和黑客攻击等 第三:高并发系统常见的需要考虑的问题&#xff0c;如内存不足的问题&#xff0c;服务抖动的…...

编程日记 2025/2/3 18:21:13

Spring Boot 实例解析：配置文件

SpringBoot 的热部署&#xff1a; Spring 为开发者提供了一个名为 spring-boot-devtools 的模块来使用 SpringBoot 应用支持热部署&#xff0c;提高开发者的效率&#xff0c;无需手动重启 SpringBoot 应用引入依赖&#xff1a; <dependency> <groupId>org.springfr…...

编程日记 2025/2/3 18:16:05

pytorch图神经网络处理图结构数据

人工智能例子汇总&#xff1a;AI常见的算法和例子-CSDN博客 图神经网络&#xff08;Graph Neural Networks&#xff0c;GNNs&#xff09;是一类能够处理图结构数据的深度学习模型。图结构数据由节点&#xff08;vertices&#xff09;和边&#xff08;edges&#xff09;组成&a…...

编程日记 2025/2/3 18:09:54

计算机网络一点事（23）

传输层 端口作用&#xff1a;标识主机特定进程&#xff0c;TCP&#xff0c;UDP协议 端口号分类&#xff1a;服务器&#xff1a;0-1023&#xff0c;熟知 1024-49151 登记 客户端&#xff1a;49152-65535 功能&#xff1a;实现端到端&#xff0c;进程到进程的通信&#xff0c…...

编程日记 2025/2/3 18:08:53

（9）下：学习与验证 linux 里的 epoll 对象里的 EPOLLIN、 EPOLLHUP 与 EPOLLRDHUP 的不同。小例子的实验

&#xff08;4&#xff09;本实验代码的蓝本&#xff0c;是伊圣雨老师里的课本里的代码&#xff0c;略加改动而来的。 以下是 服务器端的代码&#xff1a; 每当收到客户端的报文时&#xff0c;就测试一下对应的 epoll 事件里的事件标志&#xff0c;不读取报文内容&#xff0c;…...

编程日记 2025/2/3 18:01:46