【愚公系列】《微信小程序与云开发从入门到实践》025-体验WeUl基础组件

🚀前言

随着微信小程序的普及，越来越多的开发者希望借助其强大的功能和便捷的用户体验，打造出更具吸引力的应用。而在小程序的开发过程中，UI设计则是提升用户体验的关键所在。WeUI，作为一套为微信场景设计的基础组件库，提供了丰富的UI组件和设计规范，帮助开发者快速构建符合微信风格的优雅界面。

本篇文章将带你深入体验 WeUI 基础组件，介绍其核心功能和使用方法。我们将从 WeUI 的基本概念入手，逐步展示如何在微信小程序中集成和使用这些组件，包括按钮、表单、对话框、列表等常用元素。通过实例演示和实用技巧，我们旨在帮助你提升小程序的界面美观性和用户交互体验。

无论你是刚进入小程序开发世界的新手，还是希望提升应用界面的资深开发者，这篇文章都将为你提供实用的指导和灵感。让我们一起探索 WeUI 基础组件，打造出更具吸引力和用户友好的微信小程序吧！

🚀一、体验WeUl基础组件

微信开发团队在HS版本的 WeU库的基础上，开发了小程序版本的 WeUI库，并且开放源代码，供外部开发者使用。WeUI组件库为微信小程序量身设计，统一用户的使用感知，并可以非常快速方便地集成使用。

WeUI库并非将所有的组件都进行了封装，对于基础类的组件，其只封装了徽章、图标等这类常用的且通常需要自定义的组件。

🔎1.使用WeUl组件库

🦋1.1 在 app.json 中引入 WeUI 扩展库

首先，在小程序项目的全局配置文件 app.json 中添加 useExtendedLib 配置项，以便引入 WeUI 扩展库。代码如下：

{
   
  "pages": [
    "pages/index/index",
    "pages/weuiDemo/weuiDemo"
  ],
  "window": {
   
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "WeUI Demo",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  },
  "useExtendedLib": {
   
    "weui": true
  }
}

🦋1.2 在 weuiDemo.json 文件中引入 WeUI 组件

在 pages 文件夹下新建一个名为 weuiDemo 的页面文件夹，并在其中创建 weuiDemo.json 文件，用于配置页面所需的组件。代码如下：

{
   
  "usingComponents": {
   
    "mp-badge": "weui-miniprogram/badge/badge"
  }
}

🦋1.3 在 weuiDemo.wxml 中使用 WeUI 组件

在 weuiDemo.wxml 文件中编写页面的布局和组件使用代码。例如，使用 mp-badge 组件显示徽章。代码如下：

<button size="mini" type