小程序-基础加强

小程序-基础加强

article2025/2/7 16:43:16/文章来源:https://blog.csdn.net/2302_79981885/article/details/145400215

前言

这一节把基础加强讲完

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就可以设置了

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

总结

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Spring @PropertySource：让你的应用配置更加模块化和可维护

Spring @PropertySource：让你的应用配置更加模块化和可维护

PropertySource注解在Spring中的作用，就像是给Spring应用配了一个“外部配置箱”。想象一下，你在开发一个Spring应用时，有很多配置信息需要设置，比如数据库的连接信息、应用的某些功能开关等。如果这些信息都硬编码在代码中&…

阅读更多...

尝试在Excel里调用硅基流动上的免费大语言模型

尝试在Excel里调用硅基流动上的免费大语言模型

我个人觉得通过api而不是直接浏览器客户端聊天调用大语言模型是使用人工智能大模型的一个相对进阶的阶段。于是就尝试了一下。我用的是老师木袁进辉博士新创的硅基流动云上的免费的大模型。——虽然自己获赠了不少免费token，但测试阶段用不上。具体步骤如下&am…

阅读更多...

问卷数据分析|SPSS之分类变量描述性统计

问卷数据分析|SPSS之分类变量描述性统计

1.点击分析--描述统计--频率 2. 选中分类变量，点击中间箭头 3.图表选中条形图，图表值选择百分比，选择确定 4.这里显示出了描述性统计的结果 5.下面就是图形，但SPSS画的图形都不是很好啊看，建议用其他软件画图&#xff…

阅读更多...

生成式AI安全最佳实践 - 抵御OWASP Top 10攻击 (上)

生成式AI安全最佳实践 - 抵御OWASP Top 10攻击 (上)

今天小李哥将开启全新的技术分享系列，为大家介绍生成式AI的安全解决方案设计方法和最佳实践。近年来，生成式 AI 安全市场正迅速发展。据 IDC 预测，到 2025 年全球 AI 安全解决方案市场规模将突破 200 亿美元，年复合增长率超过 30%…

阅读更多...

LQB（0）-python-基础知识

LQB（0）-python-基础知识

一、Python开发环境与基础知识 python解释器：用于解释python代码方式： 1.直接安装python解释器 2.安装Anaconda管理python环境 python开发环境：用于编写python代码 1.vscode 2.pycharm # 3.安装Anaconda后可以使用网页版的jupyter n…

阅读更多...

SQL Server 数据库备份指南

SQL Server 数据库备份指南

SQL Server备份是数据库维护的日常工作。备份的目的是在发生数据丢失、损坏甚至硬件故障时将数据库和事务日志恢复到最近的时间点。您可以借助专业的SQL Server备份软件，操作起来更方便。前提需要安装SQL Server Management Studio (SSMS)工具。对于 SQL 数据库备份，有多种…

阅读更多...

常见Linux命令的复习

常见Linux命令的复习

常见命令 ls 列出工作目录 ls -l：以长格式显示目录下的文件和子目录信息。ls -a：显示所有文件和子目录，包括隐藏文件 ll 列出该目录下的详细信息看到该目录下的所有目录和文件的详细信息 cd 切换当前工作目录里 cd /path/to/directory&…

阅读更多...

spring aop失效场景

spring aop失效场景

aop基于代理（jdk动态代理 / cglib代理）实现，即new了新的类实例，代理了原来的定义的类实例。目录 1. final修饰的方法无法被代理2. 静态方法无法被代理3. 内部方法调用，即this.method()无法被代理4. 私有方法不能代理5…

阅读更多...

PostgreSQL函数自动Commit/Rollback所带来的问题

PostgreSQL函数自动Commit/Rollback所带来的问题

一、综述今天在PostgreSQL遇到一个奇怪的现象，简而言之，是想用函数（存储过程）实现插入记录，整个过程没报错但事后却没找到记录！忙活半天，才发现原因是PostgreSQL函数（存储过程&…

阅读更多...

Ollama+deepseek+Docker+Open WebUI实现与AI聊天

Ollama+deepseek+Docker+Open WebUI实现与AI聊天

1、下载并安装Ollama 官方网址：Ollama 安装好后，在命令行输入， ollama --version 返回以下信息，则表明安装成功， 2、下载AI大模型这里以deepseek-r1:1.5b模型为例， 在命令行中，执行&…

阅读更多...

Immutable设计 SimpleDateFormat DateTimeFormatter

Immutable设计 SimpleDateFormat DateTimeFormatter

专栏系列文章地址：https://blog.csdn.net/qq_26437925/article/details/145290162 本文目标： 理解不可变设计模式，时间format有线程安全要求的注意使用DateTimeFormatter 目录 ImmutableSimpleDateFormat 非线程安全可以synchronized解决&a…

阅读更多...

基于Hexo实现一个静态的博客网站

基于Hexo实现一个静态的博客网站

原文首发：https://blog.liuzijian.com/post/8iu7g5e3r6y.html 目录引言1.初始化Hexo2.整合主题Fluid3.部署评论系统Waline4.采用Nginx部署引言 Hexo是中国台湾开发者Charlie在2012年创建的一个开源项目，旨在提供一个简单、快速且易于扩展的静态博客生…

阅读更多...

Diskgenius系统迁移之后无法使用USB启动

Diskgenius系统迁移之后无法使用USB启动

前言本文用于记录系统迁移中遇到的问题及解决方法，如有不对请指出，谢谢！ 现象使用DiskGenius进行系统迁移后，使用USB启动失败，反复在品牌logo和黑屏之间切换，期间还会在左上角显示”reset system“报错…

阅读更多...

数据库系统概论的第六版与第五版的区别，附pdf

数据库系统概论的第六版与第五版的区别，附pdf

我用夸克网盘分享了「数据库系统概论第五六版资源」，点击链接即可保存。链接：https://pan.quark.cn/s/21a278378dee 第6版教材修订的主要内容为了保持科学性、先进性和实用性，在第5版教材基础上对全书内容进行了修改、更新和充实。在科…

阅读更多...

简单说一下CAP理论和Base理论

简单说一下CAP理论和Base理论

CAP理论什么是CAP 一致性可用性分区容错性：系统如果不能再时限内达成数据一致性，就说明发生了分区的情况然后当前操作在C和A之间做出选择例如我的网络出现问题了，但是我们的系统不能因为网络问题就直接崩溃只要我们的分布式系统没…

阅读更多...

网络工程师（22）网络协议

网络工程师（22）网络协议

前言网络协议是计算机网络中进行数据交换而建立的规则、标准或约定的集合，它规定了通信时信息必须采用的格式和这些格式的意义。一、基本要素语法：规定信息格式，包括数据及控制信息的格式、编码及信号电平等。这是协议的基础，确…

阅读更多...

Linux网络 | 理解NATPT，数据链路层Done

Linux网络 | 理解NATPT，数据链路层Done

前言：本节内容结束数据链路层， 本节的重要内容有两个：一个是见一个综合性面试题，另一个就是NAT技术NATPT。那么废话不多说， 开始我们的学习吧！！！ ps：最好先看一下上一篇…

阅读更多...

Linux/C高级（精讲）----shell结构语句、shell数组

Linux/C高级（精讲）----shell结构语句、shell数组

shell脚本功能性语句 test 可测试对象三种：字符串整数文件属性每种测试对象都有若干测试操作符 1）字符串的测试： s1 s2 测试两个字符串的内容是否完全一样 s1 ! s2 测试两个字符串的内容是否有差异 -z s1 测试s1 字符串的长度是…

阅读更多...

DeepSeek本地部署并提供远程连接(小白教程)

DeepSeek本地部署并提供远程连接(小白教程)

文章目录一、DeepSeek介绍二、为什么要本地部署三、本地部署教程1.安装Ollama2.下载部署DeepSeek模型3.安装Chatbox可视化工具4.非局域网远程连接四、DeepSeek官方开放平台API对接参考资料：DeepSeek本地搭建部署详细图文教程 - 搬主题一、DeepSeek介绍 DeepSeek…

阅读更多...

足球俱乐部管理系统的设计与实现

足球俱乐部管理系统的设计与实现

🍅点赞收藏关注 → 添加文档最下方联系方式咨询本源代码、数据库🍅 本人在Java毕业设计领域有多年的经验，陆续会更新更多优质的Java实战项目希望你能有所收获，少走一些弯路。🍅关注我不迷路🍅 项目视频足…

阅读更多...

最新文章