文章目录
- 引入
- 引入
- 引入
其他相关文章
从0到一开发微信小程序(1)——申请账号并安装开发环境从0到一开发微信小程序(2)——开发第一个小程序从0到一开发微信小程序(3)—小程序框架配置从0到一开发微信小程序(4)—小程序组件从0到一开发微信小程序(5)—小程序WXML从0到一开发微信小程序(6)—小程序常用API ——正在书写中
从0到一开发微信小程序(7)—小程序组件库(提高开发效率)从0到一开发微信小程序(8)—实战一个商城项目——正在书写中
1、组件库
1.1、TDesign
- 企业级设计体系
- 前端UI组件库
特点:
- 开放:开源开放,持续迭代,采用 MIT 许可协议,始终保持开放的心态,期待各方一起共建开源生态。
- 多技术栈版本实现,支持业界主流的 React/Vue/Angular/微信小程序/Flutter 开发技术栈
- 多端适配,提供桌面端和移动端两套风格统一的组件资源
- 丰富的行业组件,由腾讯多个业务团队,基于统一的设计体系提供多个垂直领域的行业组件库产品
- **普适,包容多元,灵活易用,**保持设计敏锐感,在繁杂的业务中寻找共性,提供通用的设计解决方案。
- 可扩展的设计风格,将设计样式抽离为 Design Token ,满足不同产品的品牌定制需求
- **丰富的设计资源,**提供桌面和移动端 Sketch/Figma 等多种格式的设计资源
- **专业的设计指南,**将设计经验提炼总结为指南,帮助使用者正确使用组件
注意:
- 目前组件库处于 Beta 阶段,快速迭代中,请留意版本变化
引入TDesign
使用 NPM
安装完之后,需要在微信开发者工具中对 npm 进行构建:工具 - 构建 npm
修改 app.json
将** app.json **中的 **“style”: “v2” **移除。
因为 该配置 表示启用新版组件样式,将会导致 TDesign 的组件样式错乱。
使用组件
以按钮组件为例,只需要在 JSON 文件中引入按钮对应的自定义组件即可index.json
接着就可以在 wxml 中直接使用组件index.wxml
主要改的三大文件:
展示效果:
TDesign的应用
使用UI组件库,可以提升开发效率,有一些特效是小程序组件并没有提供的,可以在组件库中寻找
- Rate 评分
- Sticky 吸顶容器
- Toast 轻提示
- 等等。。。
Rate 评分
全局引入,在 miniprogram 根目录下的app.json中配置,局部引入,在需要引入的页面或组件的index.json中配置
主题定制:
CSS 变量名 | 说明 |
–td-rate-selected-color | 选中态评分颜色 |
–td-rate-unselected-color | 未选中态评分颜色 |
–td-rate-text-color | 辅助文字颜色 |
–td-rate-disabled-color | 禁用评分颜色 |
测试用例:
展示效果:
Sticky 吸顶容器
全局引入,在 miniprogram 根目录下的app.json中配置,局部引入,在需要引入的页面或组件的index.json中配置
展示效果:
就是无论拉多下,吸顶距离都在最左上的那个。
Toast 轻提示
全局引入,在 miniprogram 根目录下的app.json中配置,局部引入,在需要引入的页面或组件的index.json中配置
展示效果:
1.2、Vant(记得刚开始的时候清缓存)
官网地址:https://vant-contrib.gitee.io/vant-weapp/#/home
介绍
Vant 是一个轻量、可靠的移动端组件库,于 2017 年开源。
目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。
特性
- 🚀 性能极佳,组件平均体积小于 1KB(min+gzip)
- 🚀 70+ 个高质量组件,覆盖移动端主流场景
- 🚀 零外部依赖,不依赖三方 npm 包
- 💪 使用 TypeScript 编写,提供完整的类型定义
- 💪 单元测试覆盖率超过 90%,提供稳定性保障
- 📖 提供丰富的中英文文档和组件示例
- 📖 提供 Sketch 和 Axure 设计资源
- 🍭 支持 Vue 2、Vue 3 和微信小程序
- 🍭 支持主题定制,内置 700+ 个主题变量
- 🍭 支持按需引入和 Tree Shaking
- 🍭 支持无障碍访问(持续改进中)
- 🍭 支持深色模式(从Vant 4 开始支持)
- 🍭 支持服务器端渲染
- 🌍 支持国际化,内置 20+ 种语言包
浏览器支持
Vant 2 支持现代浏览器以及 Android >= 4.0、iOS >= 8.0。
Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一致)。
安装
步骤一 通过 npm 安装
步骤二 修改 app.json
将 app.json 中的 “style”: “v2” 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
步骤三 修改 project.config.json
开发者工具创建的项目,miniprogramRoot 默认为 miniprogram,package.json 在其外部,npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。
温馨提示:
由于目前新版开发者工具创建的小程序目录文件结构问题,npm构建的文件目录为miniprogram_npm,并且开发工具会默认在当前目录下创建miniprogram_npm的文件名,所以**新版本的miniprogramNpmDistDir配置为’./'**即可
步骤四 构建 npm 包
打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件。
测试代码:
在app.json或index.json中引入组件
支持default、primary、info、warning、danger五种类型,默认为default。
展示效果:
Vant应用(以下列出四个常见的)
Overlay 遮罩层
创建一个遮罩层,用于强调特定的页面元素,并阻止用户进行其他操作
引入
在app.json或index.json中引入组件
测试代码:
展示效果:
Grid 宫格
宫格可以在水平方向上把页面分隔成等宽度的区块,用于展示内容或进行页面导航
引入
在app.json或index.json中引入组件
测试代码:
展示效果:
Card 商品卡片
商品卡片,用于展示商品的图片、价格等信息
引入
在app.json或index.json中引入组件
测试代码:
展示效果: