【愚公系列】《微信小程序与云开发从入门到实践》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="primary" style="margin-top: 20px; position: relative;">
  徽章示例
</button>
<mp-badge content="new" style="position: absolute; left: 70px; top: 10px;"></mp-badge>

确保在小程序的基础库版本为 2.19.6 或更高版本，以避免兼容性问题。可以在微信开发者工具中设置基础库版本。

🦋1.4 最终效果

运行代码后，效果如下图所示：

通过以上步骤，已经成功引入并使用了 WeUI 组件库中的 mp-badge 组件。使用 WeUI 组件库非常简单且方便，可以大大提升小程序的开发效率与页面美观度。

🔎2.关于 badge 组件

badge 被称为徽章组件，其在项目开发中使用的非常多。它表现为出现在按钮、文本或图标附近的数字或状态标记，在有产品功能上新提示、消息未读数提示等场景中经常使用。

badge 组件的引入路径如下：

"weui-miniprogram/badge/badge"

它有两个额外的属性可供开发者自定义，如表所示。

🔎3.体验 gallery 组件

你可以在页面的 JSON 文件中对其进行引入，如下所示：

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

在对应的 WXML 文件中编写如下示例代码：

<!-- pages/weuiDemo/weuiDemo.wxml -->
<mp-gallery showDelete="{{true}}" imgUrls="{{images}}"></mp-gallery>

其中，images 的配置如下：

data: {
  images: [
    "http://huishao.cc/img/head-img.png",
    "http://huishao.cc/img/head-img.png",
    "http://huishao.cc/img/head-img.png"
  ]
}

运行代码，效果如图所示。

gallery 组件的属性

通过这些属性和方法配置，可以灵活地管理和展示 gallery 组件中的图片，并处理用户的交互操作。

🔎4.体验 loading 组件

在加载过程中使用 loading 组件是优化用户体验的一种有效方式。loading 组件可以让用户明确地感知当前的加载状态，避免用户在使用过程中产生不确定感或假死的错觉。WeUI 库中也提供了 loading 组件，引入路径如下：

"weui-miniprogram/loading/loading"

其基本的使用也比较简单，示例如下：

<mp-loading show="{{true}}" animated="{{true}}" type="circle" tips="开始加载"></mp-loading>

运行代码，效果如图所示：

loading 组件的属性

🔎5.体验 icon 组件

icon 组件用来提供常用的简单图标。在小程序开发框架中默认也提供了 icon 组件，只是框架中自带的 icon 组件所支持的场景非常有限，WeUI 中提供了更全面的，适用于更多场景的图标库。

icon 组件的引入路径如下：

"weui-miniprogram/icon/icon"

WeUI icon 组件用于提供常用的简单图标。在使用时，我们可以通过不同的属性配置，来调整图标的外观和行为。

在页面中引入 icon 组件，并编写示例代码展示各种图标：

<mp-icon type="field" icon="add" color="black" size="{{55}}"></mp-icon>
<mp-icon type="outline" icon="at" color="red" size="{{55}}"></mp-icon>
<mp-icon type="field" icon="copy" color="blue" size="{{55}}"></mp-icon>
<mp-icon type="outline" icon="me" color="green" size="{{55}}"></mp-icon>
<mp-icon type="field" icon="share" color="gray" size="{{55}}"></mp-icon>
<mp-icon type="outline" icon="shop" color="orange" size="{{55}}"></mp-icon>
<mp-icon type="field" icon="time" color="purple" size="{{55}}"></mp-icon>

运行代码，效果如下图 6-4 所示：

icon 组件的属性

以下是 icon 组件支持的所有图标名称：

• add-friends
• add
• add2
• album
• arrow
• at
• clip
• close
• close2
• comment
• contacts
• copy
• download
• email
• error
• eyes-off
• eyes-on
• folder
• like
• link
• location
• lock
• max-window
• me
• music-off
• music
• note
• pad
• pause
• pencil
• refresh
• report-problem
• search
• sending
• setting
• share
• transfer-text
• transfer2
• translate
• tv
• video-call
• voice
• back
• back2
• bellring-off
• bellring-on
• camera
• cellphone
• delete-on
• delete
• discover
• display
• done
• done2
• group-detail
• help
• home
• imac
• info
• keyboard
• mike
• mike2
• mobile-contacts
• more
• more2
• mosaic
• photo-wall
• play
• play2
• previous
• previous2
• qr-code
• shop
• star
• sticker
• tag
• text
• time
• volume-down
• volume-off
• volume-up

通过这些属性和图标名称，你可以在小程序中灵活使用 WeUI icon 组件来增强用户界面。