首页 > 极客资料博客日记

duxui：基于Taro，兼容React Native、小程序、H5的多端UI库

2024-10-09 09:00:03极客资料围观17次

本篇文章分享duxui：基于Taro，兼容React Native、小程序、H5的多端UI库，对你有帮助的话记得收藏一下，看极客之家收获更多编程知识

duxui是duxapp官方开发的一款兼容多端的UI组件库，兼容小程序、H5、React Native，库中提供了60+的组件，覆盖大部分使用场景

它能帮助你通过统一的组件样式，快速完成多端应用的开发，包括React Native端的APP开发

duxui已经被我用于很多项目中，其中包含APP的项目就开发了几十个了，你可以通过这个链接去查看或者体验这些APP，https://app.share.dux.plus/，这里只包含了其中一部分，其中一些APP可能因为停止运营，无法正常浏览

示例

如果你想看到这些组件的展示效果，请根据不同的端进行查看

小程序
APP https://app.share.dux.plus/cn.duxapp.duxui
H5 https://duxui.duxapp.cn

如果你想通过项目来查看这些组件的运行效果或者组件源码，使用下面这个命令创建一个UI库的示例代码

npx duxapp-cli create projectName duxuiExample

其中的 projectName 是要创建的项目名称，创建之后根命令行据提示进行下一步操作

使用

这是duxapp的一个模块，需要在duxapp中使用才能使用这个模块，UI库的文档请查看https://duxapp.cn/docs/duxui/start

如果你还没有这个模块，需要先安装duxui模块，如果你还不知道什么是duxapp框架，请先查看这篇文章了解

yarn duxapp app add duxui

安装之后在你的模块中导入即可使用，像下面这样

import { Column, Header, Image, px, Row, ScrollView, Tab, Text, TopView } from '@/duxui'
import { GridIcon } from '@/gridOperator'

export default function LedgerDetail() {
  return <TopView>
    <Header title='企业台账详情' />
    <ScrollView>
      <Row className='mt-3 mh-3 bg-white r-1 p-3 gap-3 items-start'>
        <Image style={{ width: px(80) }} square />
        <Column grow className='mt-1 gap-1'>
          <Text numberOfLines={1}>鄂尔多斯市九工建筑有限责任公司</Text>
          <Text className='mt-1' size={18} color={2}>联系人：小阿呆 | 联系电话：010-4521-8652</Text>
          <Text size={18} color={2}>所属网格片区：<Text type='primary'>轻纺织产业园</Text>    历史问题：<Text type='danger'>12个</Text></Text>
        </Column>
        <GridIcon className='self-center text-primary' size={56} name='biaoqianlanbodianhua' />
      </Row>
      <Column className='mt-3'>
        <Tab>
          {
            tabs.map(item => <Tab.Item key={item.value} title={item.name} paneKey={item.value} />)
          }
        </Tab>
      </Column>
      <Column className='mt-3 mh-3 bg-white r-1 p-3'>
        <Text size={1} style={{ lineHeight: px(42) }}>公司是适应市场经济社会化大生产的需要而形成的一种企业组织形式。中国的公司是指依照《中华人民共和国公司法》在中国境内设立的以营利为目的社团法人，包括有限责任公司和股份有限公司。 指企业的组织形式。以营利为目的的社团法人。在资本主义社会获得高度发展。我国在建国后对私营公司进行了社会主义改造。国营工、商、建筑、运输等部门中实行独立经济核算的经营管理组织和某些城市中按行业划分的专业管理机构，也通称公司。随着我国经济体制的改革，享有法人资格的各种公司纷纷设立，按章程从事自身的生产经营活动。 指企业的组织形式。以营利为目的的社团法人。在资本主义社会获得高度发展。我国在建国后对私营公司进行了社会主义改造。国营工、商、建筑、运输等部门中实行独立经济核算的经营管理组织和某些城市中按行业划分的专业管理机构，也通称公司。随着我国经济体制的改革，享有法人资格的各种公司纷纷设立，按章程从事自身的生产经营活动。 折叠</Text>
      </Column>
    </ScrollView>
  </TopView>
}

const tabs = [
  { name: '基本信息', value: 0 },
  { name: '上报工单', value: 1 },
  { name: '历史问题', value: 2 }
]

组件库

下面我来介绍一下这些组件和组件的功能

TopView 顶层容器

TopView是作为页面的根组件使用的，在duxapp中，每个页面都需要存在这个组件，他用来实现duxapp的多项功能

Header 头部导航

duxapp默认将头部设置为了自定义，每个页面面建议都使用一个头部组件作为标题的显示，且Header组件会控制状态栏颜色显示、H5页面标题显示

ScrollView 滚动容器

这是对Taro ScrollView的封装，实现了多个端的下拉刷新功能，ScrollView仅支持垂直滚动，需要横向滚动使用 ScrollView.Horizontal

PullView 弹窗

可以从上下左右4个方向弹出内容

Loading 加载动画

用于展示loading动画，类似于ios那样的菊花

Absolute 绝对定位

放在这个组件内的子元素，会被渲染在最外层，这是用TopView.add方法实现的

List 分页列表

当你的列表接口采用 page 进行分页时，可以用这个组件快速实现列表页面，这个组件有用以下特性

下拉刷新
自动分页
空组件展示
自定义头部底部渲染
RN端使用 @shopify/flash-list 实现，拥有更好的性能
多列支持

Layout 布局计算

用来计算Layout所在的组件的位置、尺寸信息

ActionSheet 弹出菜单

封装弹出菜单功能

Button 按钮

按钮组件

Cell 单元格

单元格组件用来展示竖向的菜单列表，默认拥有阴影属性

LinearGradient 线性渐变

因为RN不支持通过css编写渐变，所以写了这个组件用于实现渐变功能

BoxShadow 阴影

由于RN 安卓端对阴影的支持不太完善，使用这个组件可以实现阴影效果

Column flex竖向

这是用于快速竖向布局的组件

Row flex横向

这是用于快速横向布局的组件

Space 间距

用于控制子元素的间距，通过 gap 实现，建议直接使用全局样式的 gap

Divider 分割线

使用边框实现的分割线

Grid 宫格

用于实现9宫格这样的布局方式

Card 卡片

卡片布局，带有外边距，内边距、圆角、阴影的组件

Tab 选项卡

选项卡切换，也可以用于表单项使用

TabBar 底部导航

通常用于app首页的底部导航，要使用这个组件需要通过创建函数创建

Elevator 电梯楼层

例如城市选择，可以通过城市名称首字母进行导航，快速选择到需要的城市，就可以用这个组件

Menu 下拉菜单

下拉菜单，常见用于一些表单的筛选

Form 表单

封装了表单组件，能快速完成表单的布局、表单验证、复杂对象表单

表单包含了一系列的组件或者方法，包括下面这些

Form 表单
Form.Item 表单项
Form.Submit 表单提交
Form.Reset 表单重置
Form.Object 对象表单
Form.Array 数组表单
Form.ArrayAction 数组表单操作管理
Form.useFormContext 获取表单上下文
Form.useFormItemProxy 给表单代理值和事件

Input 输入框

对Taro Input的封装，新增了一些属性，基本不带样式，需要自行编写样式

Textarea 多行文本

对Taro Textarea的封装，新增了一些属性

Picker 选择器

选择器包含了单列选择器和多列选择器

PickerDate 日期选择

用于日期时间的选择

Radio 单选

单选组件

Checkbox 多选

多选组件

Switch 开关

开关组件

Calendar 日历

为兼容多端，所以编写的日历组件，支持日、周、范围选择，支持多种自定义日历的方式

Grade 评分

评分组件

Cascade 级联选择

一个功能丰富的级联选择器，支持单选、多选，支持多级选择、单级选择，等更多功能

CardSelect 卡片选择

一个丰富样式的卡片类型的选择器，同时支持单选和多选模式

Upload 上传

用于上传图片或者视频的组件

ModalForm 弹出表单

用于将其他表单封装为一个弹出表单，例如单列选择器、日期选择器都是由这个组件封装的

这里包含了

ModalForm 单出单个表单，作为一个表单使用，放在 Form.Item 中
ModalForms 弹出多个表单，独立内容，放在Form内任何位置

NumberKeyboard 数字键盘

用于数字的输入，例如输入验证码，支付密码、电话号码、身份证等

InputCode 验证码密码输入

通常需要配合 NumberKeyboard 组件来实现验证码的输入功能

LicensePlate 车牌号输入

车牌号输入组件

Text 文本

对Text的封装，对主题色、字号等进行了主题配置，对常用css的快捷属性封装

Image 图片

对图片的封装，实现了预览，多图预览，在RN端使用 expo-image 实现，提供更好的性能

Badge 徽标

用于展示未读消息数量，红点

Tag 标签

标签展示

Avatar 头像

显示一个头像或者头像组

HtmlView 富文本显示

用于显示富文本

Step 步骤条

例如快递更新日志，就可以用这个组件来实现

Empty 空数据

某些列表数据为空时可以用这个组件显示

Status 角标状态

显示在卡片四个角的状态

LongPress 长按

长按事件封装

TouchableOpacity 触摸反馈

点击具有不透明效果的组件

Modal 弹框

将内容弹出，显示在屏幕中间

DropDown 下拉菜单

在元素做所在位置弹出一个菜单

loading 显示加载动画

显示加载中动画

message 消息通知

显示一个消息通知

confirm 确认弹框

异步调用一个确认弹框

Sign 签名

手写签名组件

HorseLanternLottery 跑马灯抽奖

抽奖组件，可以随机结果，也可以异步指定抽奖结果

总结

可以看到，组件库很丰富，覆盖的使用场景很多

详细的使用方法，请前往开发文档查看

开发文档：http://duxapp.cn

GitHub：https://github.com/duxapp

标签：

上一篇：ASP.NET Core OData 9的发布，放弃 .NET Framework
下一篇：【解决方案】基于数据库驱动的自定义 TypeHandler 处理器

首页 > 极客资料 博客日记