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

小程序-基础加强

article 2026/5/7 16:49:37

前言

这一节把基础加强讲完

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这个…...

编程日记 2026/4/29 19:39:59

【CSS】谈谈你对BFC的理解

理解 CSS 中的 BFC（块格式化上下文） 在 CSS 中，BFC（Block Formatting Context） 是一个非常重要的概念，它决定了元素如何对其子元素进行定位，以及与其他元素的关系。理解 BFC 对于解决常见的布局…...

编程日记 2026/5/6 19:41:30

kubernetes-部署性能监控平台

在当今快速发展的云计算时代，Kubernetes 已成为容器编排的事实标准。随着越来越多的应用迁移到 Kubernetes 平台上，如何有效地监控集群的健康状态、资源使用情况以及应用性能变得尤为重要。一个完善的监控系统可以帮助我们及时发现问题、优化资源配置&am…...

编程日记 2026/3/4 1:15:27

【Uniapp-Vue3】iconfont图标库的使用

先在iconfont图标库中将需要的图标加入购物车 点击右侧购物车的图标 点击添加至项目，可以选中项目进行加入，也可以点击文件加号创建一个新的项目并添加 加入以后会来到如下界面，点击下载至本地 双击打开下载的.zip文件 将.css和.ttf文件进…...

编程日记 2026/4/29 17:43:04

Linux find 命令 | grep 命令 | 查找 / 列出文件或目录路径 | 示例

注：本文为 “Linux find 命令 | grep 命令使用” 相关文章合辑。 未整理去重。 如何在 Linux 中查找文件 作者： Lewis Cowles 译者： LCTT geekpi | 2018-04-28 07:09 使用简单的命令在 Linux 下基于类型、内容等快速查找文件。 如果你是 W…...

编程日记 2026/5/7 4:39:58

Day 28 卡玛笔记

这是基于代码随想录的每日打卡 77. 组合 给定两个整数 n 和 k，返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 示例 1： 输入：n 4, k 2 输出： [[2,4],[3,4],[2,3],[1,2],[1,3],[1,4], ]示例 2…...

编程日记 2026/5/5 11:35:33

1.PPT：天河二号介绍【12】

目录 NO1 NO2.3.4.5 NO6.7.8.9​ NO1 PPT：新建一个空白演示文档→保存到考生文件夹下：天河二号超级计算机.pptx幻灯片必须选择一种设计主题：设计→主题（随便选中一种）幻灯片的版式：开始→版式&#x…...

编程日记 2026/5/5 14:01:56

AI大模型开发原理篇-4：神经概率语言模型NPLM

神经概率语言模型（NPLM）概述 神经概率语言模型（Neural Probabilistic Language Model, NPLM） 是一种基于神经网络的语言建模方法，它将传统的语言模型和神经网络结合在一起，能够更好地捕捉语言中的复杂规律…...

编程日记 2026/3/22 1:06:01

物联网领域的MQTT协议，优势和应用场景

MQTT（Message Queuing Telemetry Transport）作为轻量级发布/订阅协议，凭借其低带宽消耗、低功耗与高扩展性，已成为物联网通信的事实标准。其核心优势包括：基于TCP/IP的异步通信机制、支持QoS（服务质量&…...

编程日记 2026/5/7 5:50:41

电控---中断

中断 1.处理器系统在执行代码的时候，会从存储器依次取出指令和数据，这种能力需要在处理器里保存一个存储器地址，就是所谓的程序计数器（Program Counter,PC），也叫程序指针 2.当外部中断（Extern …...

编程日记 2026/5/5 18:18:41

动态规划DP 背包问题 多重背包问题（朴素版+二进制优化+单调队列）

概览检索 动态规划DP 概览（点击链接跳转） 动态规划DP 背包问题 概览（点击链接跳转） 多重背包问题1 原题链接 AcWiing 4. 多重背包问题1 题目描述 有 N种物品和一个容量是 V的背包。 第 i 种物品最多有 si件，每件体…...

编程日记 2026/5/7 12:38:19

调试与错误修复：Cursor 如何成为你的编程助手

引言 调试是软件开发过程中最耗时且最具挑战性的环节之一。据统计，开发者平均将 50% 以上的编码时间 用于定位和修复错误。传统调试工具（如断点调试器、日志分析）虽能解决问题，但往往需要开发者手动追溯代码执行流程，…...

编程日记 2026/2/22 1:19:15

PHP 常用函数2025.02

PHP implode() 函数 语法 implode(separator,array) 参数描述separator可选。规定数组元素之间放置的内容。默认是 ""（空字符串）。array必需。要组合为字符串的数组。 技术细节 返回值：返回一个由数组元素组合成的字符串。PHP 版…...

编程日记 2026/5/7 13:35:56

浏览器查询所有的存储信息，以及清除的语法

要在浏览器的控制台中查看所有的存储（例如 localStorage、sessionStorage 和 cookies），你可以使用浏览器开发者工具的 "Application" 标签页。以下是操作步骤： 1. 打开开发者工具 在 Chrome 或 Edge 浏览器中&#xf…...

编程日记 2026/2/14 4:34:18

Paimon写入性能

写入性能 Paimon的写入性能与检查点密切相关，因此需要更大的写入吞吐量： 增加检查点间隔，或者仅使用批处理模式。增加写入缓冲区大小。启用写缓冲区溢出。如果您使用固定存储桶模式，请重新调整存储桶数量。 1 并行度 建议sink…...

编程日记 2026/3/2 5:29:51

Golang 并发机制-5：详解syn包同步原语

并发性是现代软件开发的一个基本方面，Go（也称为Golang）为并发编程提供了一组健壮的工具。Go语言中用于管理并发性的重要包之一是“sync”包。在本文中，我们将概述“sync”包，并深入研究其最重要的同步原语之一&#xf…...

编程日记 2026/5/7 15:44:17

排序算法与查找算法

1.十大经典排序算法 我们希望数据以一种有序的形式组织起来&#xff0c;无序的数据我们要尽量将其变得有序 一般说来有10种比较经典的排序算法 简单记忆为Miss D----D小姐 时间复杂度 &#xff1a;红色<绿色<蓝色 空间复杂度&#xff1a;圆越大越占空间 稳定性&…...

编程日记 2026/5/1 17:30:11

如何构建ObjC语言编译环境?构建无比简洁的clang编译ObjC环境？Windows搭建Swift语言编译环境？

如何构建ObjC语言编译环境? 除了在线ObjC编译器&#xff0c;本地环境Windows/Mac/Linux均可以搭建ObjC编译环境。 Mac自然不用多说&#xff0c;ObjC是亲儿子。(WSL Ubuntu 22.04) Ubuntu可以安装gobjc/gnustep和gnustep-devel构建编译环境。 sudo apt-get install gobjc gnus…...

编程日记 2026/2/27 15:32:16

数据结构课程设计（三）构建决策树

3 决策树 3.1 需求规格说明 【问题描述】 ID3算法是一种贪心算法&#xff0c;用来构造决策树。ID3算法起源于概念学习系统&#xff08;CLS&#xff09;&#xff0c;以信息熵的下降速度为选取测试属性的标准&#xff0c;即在每个节点选取还尚未被用来划分的具有最高信息增益的…...

编程日记 2026/4/30 14:46:06

深度剖析八大排序算法

欢迎并且感谢大家指出我的问题&#xff0c;由于本人水平有限&#xff0c;有些内容写的不是很全面&#xff0c;只是把比较实用的东西给写下来&#xff0c;如果有写的不对的地方&#xff0c;还希望各路大牛多多指教&#xff01;谢谢大家&#xff01;&#x1f970; 在计算机科学领…...

编程日记 2026/3/10 3:25:00

python-leetcode-二叉树的层序遍历

102. 二叉树的层序遍历 - 力扣&#xff08;LeetCode&#xff09; # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.right right from coll…...

编程日记 2026/5/6 18:05:31

毕业设计：基于深度学习的高压线周边障碍物自动识别与监测系统

目录 前言 课题背景和意义 实现技术思路 一、算法理论基础 1.1 卷积神经网络 1.2 目标检测算法 1.3 注意力机制 二、 数据集 2.1 数据采集 2.2 数据标注 三、实验及结果分析 3.1 实验环境搭建 3.2 模型训练 3.2 结果分析 最后 前言 &#x1f4c5;大四是整个大学…...

编程日记 2026/5/7 9:45:20

顺序表（ArrayList）

1、简介 顺序表是用一段物理地址连续 的存储单元依次存储数据元素的线性结构&#xff0c;一般情况下 采用数组存储 。在 数组 上完成数据的增删查改。&#xff08; 顺序表的底层结构是一个数组 &#xff09; 2、顺序表的实现 下面是顺序表的一些基本成员和方法&#xff0c;能够…...

编程日记 2026/3/12 0:59:18

【Hadoop】Hadoop的HDFS

这里写目录标题 HDFS概述HDFS产出背景及定义HDFS产生背景HDFS定义 HDFS优缺点HDFS优点HDFS缺点 HDFS组成架构HDFS文件块大小 HDFS的Shell操作常用命令实操准备工作上传下载HDFS直接操作 HDFS的API操作客户端环境准备HDFS的API案例实操HDFS文件上传HDFS文件下载HDFS文件更名和移…...

编程日记 2026/5/7 15:29:56

C++ Primer 迭代器

欢迎阅读我的 【CPrimer】专栏 专栏简介&#xff1a;本专栏主要面向C初学者&#xff0c;解释C的一些基本概念和基础语言特性&#xff0c;涉及C标准库的用法&#xff0c;面向对象特性&#xff0c;泛型特性高级用法。通过使用标准库中定义的抽象设施&#xff0c;使你更加适应高级…...

编程日记 2026/5/6 13:35:45

使用 Postman 进行 API 测试：从入门到精通

使用 Postman 进行 API 测试&#xff1a;从入门到精通 使用 Postman 进行 API 测试&#xff1a;从入门到精通一、什么是 API 测试&#xff1f;二、Postman 简介三、环境搭建四、API 测试流程1. 收集 API 文档2. 发送基本请求示例&#xff1a;发送 GET 请求示例代码&#xff08;…...

编程日记 2026/2/17 0:06:25

Leetcode面试高频题分类刷题总结

https://zhuanlan.zhihu.com/p/349940945 以下8个门类是面试中最常考的算法与数据结构知识点。 排序类&#xff08;Sort&#xff09;&#xff1a; 基础知识&#xff1a;快速排序&#xff08;Quick Sort&#xff09;&#xff0c; 归并排序&#xff08;Merge Sort&#xff09;的…...

编程日记 2025/5/27 14:53:35

8.原型模式(Prototype)

动机 在软件系统中&#xff0c;经常面临着某些结构复杂的对象的创建工作&#xff1b;由于需求的变化&#xff0c;这些对象经常面临着剧烈的变化&#xff0c;但是它们却拥有比较稳定一致的接口。 之前的工厂方法和抽象工厂将抽象基类和具体的实现分开。原型模式也差不多&#…...

编程日记 2026/2/17 1:14:34

简单介绍一下什么是OpenFeign

OpenFeign是什么&#xff1f; OpenFeign是一个声明式的Http客户端&#xff0c;它可以用来发起Http请求 它主要用于SpringCloud微服务之间的通讯&#xff0c;让调用另一个服务的Java方法和调用本地方法一样快速和便捷 之前我们是用RestTemplate写一大堆东西发起Http请求远程调…...

编程日记 2026/4/30 7:29:05

力扣动态规划-20【算法学习day.114】

前言 ###我做这类文章一个重要的目的还是记录自己的学习过程&#xff0c;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关键点&#xff0c;力扣上的大佬们的题解质量是非常非常高滴&#xff01;&#xff01;&#xff01; 习题 1.网格中的最小路径代价 题目链接…...

编程日记 2026/5/1 12:34:00