【微信小程序】使用 npm 包 - Vant Weapp --定制主题

小程序对 npm 的支持与限制

1. 什么是 Vant Weapp

官方文档地址 :https://youzan.github.io/vant-weapp

2. 安装 Vant 组件库

详细的操作步骤,大家可以参考 Vant 官方提供的快速上手教程:
https://youzan.github.io/vant-weapp/#/quickstart#an-zhuang

3. 使用 Vant 组件


4. 定制全局主题样式


https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

基本用法:

  • 1.声明一个自定义属性,属性名需要以两个减号(- -)开始,属性值则可以是任何有效的 CSS 值。
  • 2.和其他属性一样,自定义属性也是写在规则集之内的。规则集所指定的选择器定义了自定义属性的可见作用域。
    通常的最佳实践是定义在根伪类 :root 下,这样就可以在 HTML 文档的任何地方访问到它了
  • 3.由 var() 函数来获取值

5. 定制Vant Weapp全局主题样式

在 app.wxss 中,写入 CSS 变量,即可对全局生效:

所有可用的颜色变量,请参考 Vant 官方提供的配置文件:
https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less

问题一:为何定义在Page节点下?

解答:微信小程序wxml根节点为page,类似于根节点html, 注册全局变量

定义在page下就可在所有节点内使用CSS变量

问题二:如何知道要定制的组件的CSS变量名是啥呢?

  • 1.首先,css变量与less变量名字相同,官方给出了所有less变量名字的文件
  • 2.打开【配置文件】,找到你要修改的是那个组件,比如button
相关推荐
李纲明15 小时前
微信小程序次卡跨店对不上账或前台随手改余次:先核流水只增不改与统一日切,再查冲正权限与总部只读
微信小程序·devdiy·核销流水·跨店次卡·日切对账·冲正权限·总部只读
李纲明18 小时前
微信小程序维修拆机后口头加价或未确认就开工:先核验机快照与报价确认,再查补充报价与取机核验
微信小程序·devdiy·维修验机·报价确认·报价快照·补充报价·取机核验
wx1qq1com19 小时前
一桩带几台车:共享租赁桩位配比、取电与结算闭环设计
物联网·微信小程序·小程序
李纲明20 小时前
微信小程序场地长租月底对不上或口头占场撞场:先核合约预约与核销流水出账,再查附加费与转租归属
微信小程序·devdiy·场地长租·月结账单·核销流水·附加费·转租归属
2401_8796925121 小时前
微信小程序照相与摄像功能实现——chooseImage 与 chooseVideo 详解
微信小程序·小程序·notepad++
律宏阔2 天前
微信小程序 + Taro + TDesign 去掉 [&&&],让普通 Tailwind 类接管局部样式
前端·微信小程序·taro
律宏阔2 天前
微信小程序 + Taro + 多语言实现与国际化检查实录
前端·微信小程序·taro
李纲明3 天前
微信小程序 getSystemInfo 提示已废弃、屏幕高度算错胶囊还对不齐?getWindowInfo 和 getDeviceInfo 怎么接才稳
javascript·微信小程序·小程序·小程序开发·devdiy
dreams_dream3 天前
微信小程序-使用npm包
微信小程序·小程序·npm
L1mbo3 天前
Lite模式 缓解微信开发者工具卡顿,附 uni-app 实践方案
前端·微信小程序