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

已于 2024-11-19 00:20:29 修改
阅读量4.7w 收藏 21
点赞数 29
分类专栏： 愚公系列-书籍专栏 文章标签： 微信小程序 小程序
于 2024-09-08 23:59:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aa2528877987/article/details/142035689
版权
标题 详情
作者简介 愚公搬代码
头衔 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉 2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
博客内容 .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎 👍点赞、✍评论、⭐收藏

文章目录

🚀前言

随着微信小程序的普及，越来越多的开发者希望借助其强大的功能和便捷的用户体验，打造出更具吸引力的应用。而在小程序的开发过程中，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
最低0.47元/天 解锁文章
winform自定义控件（gdi+）（11）——绘制文本（DrawString）
qq_34059233的博客
08-25 1600
fffff
【愚公系列】《微信小程序与云开发从入门到实践》026-WeUl表单类组件介绍
热门推荐
时光隧道
09-09 4万+
在现代应用开发中，表单是用户与系统交互的重要桥梁。无论是注册、登录、反馈，还是信息收集，表单的设计和实现直接影响到用户的体验和操作的顺畅度。WeUI 作为一套专为微信生态设计的用户界面框架，提供了一系列精美且功能强大的表单类组件，使开发者能够快速构建出符合用户期待的交互界面。本篇文章将重点介绍 WeUI 的表单类组件，包括输入框、选择器、滑动条、开关等。我们将详细解析每个组件的功能、使用方法以及在实际开发中的最佳实践，帮助你深入理解如何利用这些组件提升小程序的用户体验。
Gdi+ drawstring
hgy413的专栏
09-08 1万+
1.犯了一个错误: Brush(RGB(255,0,0));这样写程序不会报错，然后很悲剧的怎么也显示不出文字，记录下，以后不要再犯了。     自己写的示例代码： CPaintDC dc(this); Graphics g(dc.GetSafeHdc());
GDI+ DrawString 对齐方式 [StringFormat]
遥远的心
04-28 5245
GDI+在DrawString的时候可以设置水平和垂直对其方式 需要制定一个StringFormat对象，设置Alignment（水平对齐）和LineAlignment（垂直对齐） 记得调用Graphic.DrawString()函数时，需要使用指定Rectangle的重构函数，或者同时制定X,Y,Width, Height的重构函数。如果调用只指定X,Y的重构函数，对齐方式会错乱的。 S...
vb.net GDI+入门——使用DrawString显示文本
wyhappy612的专栏
11-21 6931
在GDI+ 中，我们是使用Graphics 的 DrawString 方法来在对象的表面绘制文本，其它还需要用到FontFamliy、Font、StringFormat等类来控制文本的特征。在前面我们已经了解过Font类，这里我们通过本文重点来了解DrawString方法以及StringFormat类。 一、用GDI+ 绘制文本需要经过下面步骤： 1、在窗体代码前面引入Drawing2D 命名
【愚公系列】《微信小程序与云开发从入门到实践》028-WeUl库中的导航栏与搜索栏组件
最新发布
时光隧道
09-15 4万+
在当今移动互联网时代，用户体验至关重要，而一个简洁高效的UI界面是提升用户满意度的重要因素之一。作为开发者，我们总是在寻求更便捷、更灵活的解决方案，以便快速构建出优质的应用界面。WeUl库正是这样一个强大的工具，它提供了一系列丰富的UI组件，让开发过程更加轻松便捷。本篇文章将聚焦于WeUl库中的两个核心组件——导航栏和搜索栏。导航栏作为应用界面的骨架，负责引导用户在各个页面之间快速切换，而搜索栏则是提升信息检索效率的利器。通过合理运用这两个组件，我们可以显著改善用户的交互体验。
【愚公系列】《微信小程序与云开发从入门到实践》027-WeUl库中的弹窗和提示类组件
时光隧道
09-09 4万+
在现代应用中，弹窗和提示框是与用户沟通的重要工具。它们不仅可以传达关键信息、确认用户操作，还能有效地引导用户完成特定的任务。WeUI 作为专为微信生态设计的用户界面框架，提供了多种灵活的弹窗和提示类组件，使开发者能够轻松实现丰富的交互体验。本篇文章将深入探讨 WeUI 库中的弹窗和提示类组件，包括模态弹窗、消息提示框、加载提示等。我们将详细介绍每个组件的功能特性、使用场景以及实现方法，帮助你在小程序中高效地应用这些组件。
GDI+的DrawString多行、换行，自动换行
weixin_45935855的博客
01-17 1927
代码来自GDIPlus::DrawString计算一定区域显示字符个数的问题-CSDN社区 直接复制到初始化GDI+代码后面就行，这是个内嵌的方法： 直接代码： auto fun_tradeno = [](wstring tmp) { Gdiplus::Bitmap* img; tmp = L"订单号：" + tmp; //设置字体大小， int fontsize = 20; Fo...
再学 GDI+[38]: 文本输出 - DrawString、TGPFont
weixin_34034670的博客
06-16 264
本例效果图: 代码文件: unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs, StdCtrls; type TForm1 = class(TForm) Button1:...
VC GDI+绘制渐灭的文字
04-14
GDI+绘制文字使用Graphics::DrawString函数，其中的brush参数可以使用透明度，通过控制该透明度（逐渐减少从而增加透明度），实现文字的透明度逐渐增加，最终融入到背景中，达到渐变消失的效果。具体实现上，设置计数器，每50ms触发一次，使用逐渐增强的透明度重新绘制相同的文本。为了减少闪烁，采用双缓冲绘制，即将文字在后台先绘制好，然后整体拷贝到屏幕（前台）上。程序示例在VC2010下编译通过。
C++ GDI+ DrawString 保存字符串文字为透明图片
郎涯技术
07-30 7462
实现通过GDI+将输入的字符串保存为背景透明的图片的示例代码
GDI+开发教程 五 绘制线条及文本
u010001070的博客
08-20 310
最主要的是采用矩阵变换。矩阵类Matrix,Invert(转置)、Multiply(矩阵相乘)、Rotate(旋转)等平移 TranslateTransform比例 ScaleTransform旋转 RotateTransform。
GDI+ 文本测量方法
编程猿来如此
05-17 571
GDI+ 文本测量方法
微信小程序日期时间组件的封装
02-16
微信小程序提供了日期时间选择器组件`picker`和日历组件`calendar`，但如果需要自定义样式或者功能，可以考虑封装一个日期时间组件。 以下是一个简单的日期时间组件的封装示例： 1. 在`/components`目录下创建一个`datetime-picker`文件夹，创建`datetime-picker.wxml`、`datetime-picker.wxss`、`datetime-picker.js`和`datetime-picker.json`四个文件。 2. 在`datetime-picker.json`中定义组件的属性： ```json { "component": true, "usingComponents": {}, "properties": { "startDate": { "type": String, "value": "2023-02-15", }, "endDate": { "type": String, "value": "2023-02-20", }, "startTime": { "type": String, "value": "00:00", }, "endTime": { "type": String, "value": "23:59", }, "defaultDate": { "type": String, "value": "", }, "defaultTime": { "type": String, "value": "", }, "format": { "type": String, "value": "datetime", }, "showTime": { "type": Boolean, "value": true, }, "showDate": { "type": Boolean, "value": true, }, "startPlaceholder": { "type": String, "value": "开始时间", }, "endPlaceholder": { "type": String, "value": "结束时间", }, "bind:change": { "type": Function, "value": "", } }, "options": { "styleIsolation": "apply-shared" } } ``` 上述属性中： - `startDate`和`endDate`为日期范围，用于限制可选日期的范围； - `startTime`和`endTime`为时间范围，用于限制可选时间的范围； - `defaultDate`和`defaultTime`为默认值； - `format`为显示格式，支持`datetime`、`date`和`time`三种格式； - `showTime`和`showDate`分别控制是否显示时间和日期选择器； - `startPlaceholder`和`endPlaceholder`为开始时间和结束时间的占位符； - `bind:change`为选择器值变化时的回调函数。 3. 在`datetime-picker.wxml`中定义选择器组件： ```html <view class="datetime-picker"> <view wx:if="{{showDate}}" class="datetime-picker-item"> <picker mode="date" start="{{startDate}}" end="{{endDate}}" value="{{selectedDate}}" bindchange="onDateChange"> <view class="datetime-picker-value"> <text wx:if="{{selectedDate}}">{{selectedDate}}</text> <text wx:else>{{startPlaceholder}}</text> </view> </picker> </view> <view wx:if="{{showTime}}" class="datetime-picker-item"> <picker mode="time" start="{{startTime}}" end="{{endTime}}" value="{{selectedTime}}" bindchange="onTimeChange"> <view class="datetime-picker-value"> <text wx
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

愚公搬代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值