微信小程序框架(五)-全面详解（学习总结---从入门到深化）

太过爱你忘了你带给我的痛 2023-09-23 18:26 102阅读 0赞

## **目录** ##

UI框架\_TDesign

引入TDesign

UI框架\_TDesign组件

Rate 评分

Toast 轻提示

UI框架\_Vant

使用方式

引入组件

UI框架\_Vant组件

Overlay 遮罩层

Grid 宫格

Card 商品卡片

--------------------

# UI框架\_TDesign #

![a4fa21dc1fbd414c8f64082892317a78.png][]

> TDesign 企业级设计体系（前端UI组件库）
> 
> 地址：https://tdesign.tencent.com

支持桌面端、移动端、小程序

![7b57ebcd2fe041338690411aa7f9f1ff.png][]

>  **温馨提示**
> 
> 目前组件库处于 Beta 阶段，快速迭代中，请留意版本变化

## 引入TDesign ##

**使用 NPM**

小程序已经支持使用 NPM 安装第三方包

> npm i tdesign-miniprogram -S --production
> 
> // 安装完之后，需要在微信开发者工具中对 npm 进行构 建：工具 - 构建 npm

**修改 app.json**

> 将 app.json 中的 "style": "v2" 移除
> 
> 因为该配置表示启用新版组件样式，将会导致 TDesign 的组件样式 错乱

**使用组件**

以按钮组件为例，只需要在 **JSON** 文件中引入按钮对应的自定义组件即可

>     {
>       "usingComponents": {
>         "t-button": "tdesign-miniprogram/button/button"
>      }
>     }

接着就可以在 wxml 中直接使用组件

<t-button type="primary">按钮</t-button>

> 1. 微信小程序引入UI框架 TDesign 是否可以与微信新版组件样式( v2 ) 共存：**否**

# UI框架\_TDesign组件 #

![d8f772be349e41d194e609f07c4b154c.png][]

![c0ea7541a6f24b23a5c938bdd3a62345.png][]

## Rate 评分 ##

> 全局引入，在 miniprogram 根目录下的 **app.json** 中配置，局部引入， 在需要引入的页面或组件的 **index.json** 中配置

{
      "usingComponents": {
        "t-rate": "tdesign-miniprogram/rate/rate"
     }
    }

**wxml实现**

<view class="demo-rate">
      <view class="demo-rate__title">请点击评分</view>
      
      <t-rate value="{
       { value }}" variant="filled" bind:change="onChange" />
    </view>

**逻辑实现**

Page({
      data: {
        value: 3
     },
      onChange(e) {
        const { value } = e.detail;
        this.setData({
          value
       });
     },
    });

**Sticky 吸顶容器**

> 全局引入，在 miniprogram 根目录下的 **app.json** 中配置，局部引入， 在需要引入的页面或组件的 **index.json** 中配置

"usingComponents": {
        "t-button": "tdesignminiprogram/button/button",
        "t-sticky": "tdesignminiprogram/sticky/sticky"
    }

**wxml实现**

**wxss实现**

.top {
        margin-top: 100px;
    }
    .box{
        height: 1000px;
    }

## Toast 轻提示 ##

> 全局引入，在 miniprogram 根目录下的 **app.json** 中配置，局部引入， 在需要引入的页面或组件的 **index.json** 中配置

"usingComponents": {
       "t-toast": "tdesign-miniprogram/toast/toast"
    }

**逻辑实现**

import Toast from 'tdesignminiprogram/toast/index';
    Page({
        onLoad() {
            Toast({
                context: this,
                selector: '#t-toast',
                message: '轻提示文字内容',
           });
       }
    })

<t-toast id="t-toast" />

# UI框架\_Vant #

![14f3942b12994f8998c47ad8c87dd8e7.png][]

> Vant 是一个轻量、可靠的移动端组件库
> 
> 地址：https://vant-contrib.gitee.io/vant/\#/zh-CN

![2ad7fb25eba54800a4498e9c36c35406.png][]

###  **使用方式** ###

**步骤一 通过 npm 安装**

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>

# UI框架\_Vant组件 #

![77cfa96ccd9a46dd8c274de6e40db7c8.png][]

> 使用UI组件库，可以提升开发效率，有一些特效是小程序组件并没有提供的，可以在组件库中寻找
> 
> ![50b40f1fd9f6441b88388e5d1c7c4139.png][]

### **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 }}"
    />

[a4fa21dc1fbd414c8f64082892317a78.png]: https://img-blog.csdnimg.cn/a4fa21dc1fbd414c8f64082892317a78.png
[7b57ebcd2fe041338690411aa7f9f1ff.png]: https://img-blog.csdnimg.cn/7b57ebcd2fe041338690411aa7f9f1ff.png
[d8f772be349e41d194e609f07c4b154c.png]: https://img-blog.csdnimg.cn/d8f772be349e41d194e609f07c4b154c.png
[c0ea7541a6f24b23a5c938bdd3a62345.png]: https://img-blog.csdnimg.cn/c0ea7541a6f24b23a5c938bdd3a62345.png
[14f3942b12994f8998c47ad8c87dd8e7.png]: https://img-blog.csdnimg.cn/14f3942b12994f8998c47ad8c87dd8e7.png
[2ad7fb25eba54800a4498e9c36c35406.png]: https://img-blog.csdnimg.cn/2ad7fb25eba54800a4498e9c36c35406.png
[77cfa96ccd9a46dd8c274de6e40db7c8.png]: https://img-blog.csdnimg.cn/77cfa96ccd9a46dd8c274de6e40db7c8.png
[50b40f1fd9f6441b88388e5d1c7c4139.png]: https://img-blog.csdnimg.cn/50b40f1fd9f6441b88388e5d1c7c4139.png