从0到一开发微信小程序（7）—小程序组件库(提高开发效率)

其他相关文章

从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