文章目录
其他相关文章
从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 i tdesign-miniprogram -S --production
安装完之后,需要在微信开发者工具中对 npm 进行构建:工具 - 构建 npm
修改 app.json
将** app.json **中的 **“style”: “v2” **移除。
因为 该配置 表示启用新版组件样式,将会导致 TDesign 的组件样式错乱。
使用组件
以按钮组件为例,只需要在 JSON 文件中引入按钮对应的自定义组件即可index.json
{
"usingComponents": {
"t-button": "tdesign-miniprogram/button/button"
}
}
接着就可以在 wxml 中直接使用组件index.wxml
<t-button type="primary">按钮</t-button>
主要改的三大文件:
展示效果:
TDesign的应用
使用UI组件库,可以提升开发效率,有一些特效是小程序组件并没有提供的,可以在组件库中寻找
- Rate 评分
- Sticky 吸顶容器
- Toast 轻提示
- 等等。。。
Rate 评分
全局引入,在 miniprogram 根目录下的app.json中配置,局部引入,在需要引入的页面或组件的index.json中配置
{
"usingComponents": {
"t-rate": "tdesign-miniprogram/rate/rate"
}
}
主题定制:
CSS 变量名 | 说明 |
---|---|
–td-rate-selected-color | 选中态评分颜色 |
–td-rate-unselected-color | 未选中态评分颜色 |
–td-rate-text-color | 辅助文字颜色 |
–td-rate-disabled-color | 禁用评分颜色 |
测试用例:
<view class="demo-rate">
<view class="demo-rate__title">请点击评分</view>
<!-- 实心评分,设置属性:variant-->
<t-rate value="{{value}}" variant="filled" bind:change="onChange" />
</view>
Page({
data: {
value: 3,
},
onChange(e) {
const { value } = e.detail;
this.setData({
value,
});
},
});
{
"usingComponents": {
"t-rate": "tdesign-miniprogram/rate/rate"
}
}
.demo-rate {
background-color: #fff;
width: 100%;
height: 96rpx;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 32rpx;
border-bottom: solid 1rpx #f0f0f0;
border-top: solid 1rpx #f0f0f0;
margin-top: 32rpx;
margin-bottom: 32rpx;
}
.demo-rate__title {
width: 200rpx;
}
.demo-rate__transparent {
background-color: transparent;
padding-left: 32rpx;
border: 0;
}
展示效果:
Sticky 吸顶容器
全局引入,在 miniprogram 根目录下的app.json中配置,局部引入,在需要引入的页面或组件的index.json中配置
"usingComponents": {
"t-button": "tdesign-miniprogram/button/button",
"t-sticky": "tdesign-miniprogram/sticky/sticky"
}
<view class="top">
<t-sticky offset-top="{{0}}">
<t-button class="box2" theme="danger" t-class="inner-box" size="small">吸顶距离</t-button>
</t-sticky>
<view class="box"></view>
</view>
.top {
margin-top: 100px;
}
.box{
height: 1000px;
}
展示效果:
就是无论拉多下,吸顶距离都在最左上的那个。
Toast 轻提示
全局引入,在 miniprogram 根目录下的app.json中配置,局部引入,在需要引入的页面或组件的index.json中配置
"usingComponents": {
"t-toast": "tdesign-miniprogram/toast/toast"
}
import Toast from 'tdesign-miniprogram/toast/index';
Page({
onLoad() {
Toast({
context: this,
selector: '#t-toast',
message: '轻提示文字内容',
});
}
})
<t-toast id="t-toast" />
展示效果:
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 安装
# 通过 npm 安装 建议用这个
npm i @vant/weapp -S --production
# 通过 yarn 安装
yarn add @vant/weapp --production
# 安装 0.x 版本
npm i vant-weapp -S --production
步骤二 修改 app.json
将 app.json 中的 “style”: “v2” 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
步骤三 修改 project.config.json
开发者工具创建的项目,miniprogramRoot 默认为 miniprogram,package.json 在其外部,npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
}
}
温馨提示:
由于目前新版开发者工具创建的小程序目录文件结构问题,npm构建的文件目录为miniprogram_npm,并且开发工具会默认在当前目录下创建miniprogram_npm的文件名,所以**新版本的miniprogramNpmDistDir配置为’./'**即可
步骤四 构建 npm 包
打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件。
测试代码:
在app.json或index.json中引入组件
{
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
}
支持default、primary、info、warning、danger五种类型,默认为default。
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
展示效果:
Vant应用(以下列出四个常见的)
Overlay 遮罩层
创建一个遮罩层,用于强调特定的页面元素,并阻止用户进行其他操作
引入
在app.json或index.json中引入组件
"usingComponents": {
"van-overlay": "@vant/weapp/overlay/index"
}
测试代码:
<van-button type="primary" bind:click="onClickShow">显示遮罩层</van-button>
<van-overlay show="{{ show }}" bind:click="onClickHide" />
Page({
data: {
show: false
},
onClickShow() {
this.setData({ show: true });
},
onClickHide() {
this.setData({ show: false });
},
});
展示效果:
Grid 宫格
宫格可以在水平方向上把页面分隔成等宽度的区块,用于展示内容或进行页面导航
引入
在app.json或index.json中引入组件
"usingComponents": {
"van-grid": "@vant/weapp/grid/index",
"van-grid-item": "@vant/weapp/grid-item/index"
}
测试代码:
<van-grid>
<van-grid-item icon="photo-o" text="文字" />
<van-grid-item icon="photo-o" text="文字" />
<van-grid-item icon="photo-o" text="文字" />
<van-grid-item icon="photo-o" text="文字" />
</van-grid>
展示效果:
Card 商品卡片
商品卡片,用于展示商品的图片、价格等信息
引入
在app.json或index.json中引入组件
"usingComponents": {
"van-card": "@vant/weapp/card/index"
}
测试代码:
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
thumb="{{ imageURL }}"
/>
展示效果:
有兴趣可以加知识星球:(每日打卡,每日一题,Java,前端)
我是zhz小白,一个在互联网行业的小白,立志成为一名架构师
https://blog.csdn.net/zhouhengzhe?t=1