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

小程序-基础加强

article 2025/3/10 6:08:14

前言

这一节把基础加强讲完

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就可以设置了
在这里插入图片描述

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

总结

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


http://www.kler.cn/a/527575.html

相关文章：

  • 最新Java开发进阶！Java进阶面试资料无偿分享_java面试最新资料
  • SpringBoot入门：快速构建第一个Web应用
  • 需求分析应该从哪些方面来着手做？
  • 高低频混合组网系统中基于地理位置信息的信道测量算法matlab仿真
  • 手摸手系列之 DeepSeek-R1 开源大模型私有化部署解决方案
  • Linux_线程同步生产者消费者模型
  • 适合超多氛围灯节点应用的新选择
  • springboot 2.7.6 security mysql redis jwt配置例子
  • 【股票数据API接口36】如何获取股票当天逐笔大单交易数据之Python、Java等多种主流语言实例代码演示通过股票数据接口获取数据
  • 仿真设计|基于51单片机的温室环境监测调节系统
  • C++实现状态模式
  • 如何选择Spring AOP的动态代理？JDK与CGLIB的适用场景
  • python 语音识别
  • 如何在 Kafka 中实现自定义分区器
  • 27.Word：财务软件应用的书稿【10】
  • 数据结构与算法之二叉树: LeetCode LCP 10. 二叉树任务调度 (Ts版)
  • 记忆化搜索（5题）
  • 因果推断与机器学习—用机器学习解决因果推断问题
  • 为AI聊天工具添加一个知识系统 之80 详细设计之21 符号逻辑 之1
  • Contrastive Imitation Learning