跳到主要内容

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

· 阅读需 13 分钟
duxapp
duxapp
duxapp框架作者

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

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

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

示例​

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

如果你想通过项目来查看这些组件的运行效果或者组件源码，使用下面这个命令创建一个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 电梯楼层​

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

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

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 触摸反馈​

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

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

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

loading 显示加载动画​

显示加载中动画

message 消息通知​

显示一个消息通知

confirm 确认弹框​

异步调用一个确认弹框

Sign 签名​

手写签名组件

HorseLanternLottery 跑马灯抽奖​

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

总结​

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

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

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

GitHub：https://github.com/duxapp