First UI 移动端框架优质选择

FirstUI 将出品多种框架下组件库供开发者使用，其中包含uni-app、微信小程序、支付宝小程序、Taro等，后期将会陆续上线，目前上线的版本有uni-app版本与微信小程序版本！

FirstUI UNI版

First UI UNI版是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。全面兼容App-Nvue、App-vue、小程序（微信、支付宝、百度、字节、QQ）、H5。

官网地址：https://www.firstui.cn

文档地址：https://doc.firstui.cn

FirstUI 微信小程序版

FirstUI-weixin 是一套基于微信小程序开发的组件化、可复用、易扩展、低耦合的原生微信小程序UI组件库。

官网地址：https://www.firstui.cn

文档地址：https://wxdoc.firstui.cn

==============================================================

FirstUI UNI版快速上手

使用 First UI 前，请确保你已经学习并熟练使用过 uni-app 。

安装

方式一：通过 npm 安装

使通过 npm 安装，需要先通过 vue-cli 创建 uni-app 项目，详见。

// # Using npm
npm install firstui-uni

方式二：通过下载代码

通过 GitHub 或者 FirstUI官网(VIP) 下载 First UI 的代码，然后将 components/firstui/ 目录拷贝到自己的项目中。

// # GitHub
git clone https://github.com/FirstUI/FirstUI.git

方式三：选择需要的模块引入

下载 First UI 的代码，在 components/firstui/ 目录下找到需要的组件拷贝到自己的项目中。

如何使用

按照以下的方式使用组件，以 Button 为例，其它组件在对应的文档页查看。

第一种：在页面中引用、注册

import fuiButton from "@/components/firstui/fui-button/fui-button"
export default {
	components:{
		fuiButton
	}
}

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步，如果不了解easycom，可先查看官网文档。

在 pages.json 中添加配置：

// 下载安装时配置
"easycom": {
		"autoscan": true,
		"custom": {
			"fui-(.*)": "@/components/firstui/fui-$1/fui-$1.vue"
		}
	}

// 使用npm安装时配置（配置完成后重新编译运行）
"easycom": {
		"autoscan": true,
		"custom": {
			"fui-(.*)": "firstui-uni/firstui/fui-$1/fui-$1.vue"
		}
	}

使用组件

引入组件后，可以在页面中直接使用组件

<fui-button text="默认按钮"></fui-button>

其他说明

First UI分为 开源版 和 商业版，所有示例或文档中加 V 的表示需要开通会员才可获取源码使用，会员内容不会发布到任何公开渠道。

开通会员、版权约束说明以及详细介绍请参考 FAQ中会员介绍。

更新日志

V1.7.0（2022-09-28）

新增 WATERFALL 瀑布流加载布局内容。
新增 TOP TAB 顶部选项卡布局内容。
新增 NEWS LIST 新闻列表布局内容。
新增 PRODUCT LIST 商品列表布局内容。
新增 MAP 地图布局内容-线路规划。
新增 ROLL HORIZONTAL 横向滚动布局内容。
新增 UploadVideo 视频上传组件（VIP组件）。
新增 FormItem 表单项组件（VIP组件）。
Label 标签组件优化。
Card 卡片组件优化，新增footerLine属性。
InputNumber 数字输入框组件优化，修复最小值设为负数不生效的问题，新增type属性当设值为text则可输入负号小数点等。
Panel 面板组件优化，新增属性配置数据源键值（key）。
Preview 表单预览组件优化，新增属性配置数据源键值（key），修复部分兼容问题。
Input 输入框组件优化，新增min和max属性，当type=number、type=digit、number属性为true时生效。
LicensePlate 车牌号键盘组件优化，新增方法 changeKeyboard 切换键盘显示。
ImageCropper 图片裁剪组件优化，修复已知bug。
Grid 宫格组件优化。
Textarea 多行输入框组件已知问题优化。
Input 输入框组件已知问题优化。
Text 文本组件优化，新增部分属性（props）。
Button 按钮组件优化，修复nvue端样式background加!important报错的问题。
Waterfall 瀑布流组件优化，请参考【布局-瀑布流】示例做加载刷新操作。
DatePicker 日期时间选择器组件优化，修复type=1时设置默认值失效的问题，修复区间选择设置起始日期文本出错的问题。
Landscape 压屏窗组件优化，新增属性支持absolute定位，以便用于其他组件内。
Validator 表单验证（JS）组件优化，支持校验所有元素并返回所有错误信息。
Form 表单校验组件优化，支持校验所有元素并返回所有错误信息。
Radio 单选框组件优化，修复Nvue端vue3下可能显示不正确的问题。
Checkbox 复选框组件优化，修复Nvue端vue3下可能显示不正确的问题。
Switch 开关组件优化，修复Nvue端vue3下可能显示不正确的问题。
OverflowHidden 内容超出隐藏组件优化，新增部分属性。
Lazyload 图片懒加载组件优化，新增部分属性。
修复部分已知问题。

V1.6.0（2022-06-26）

新增组件全局配置，目前仅针对部分常用组件处理，详见文档 [全局配置]。
新增 Text 文本组件。
新增 spin 旋转动画组件（VIP组件）。
新增 SafeArea 底部安全区域组件（VIP组件）。
新增 DataTag 标签选择组件（VIP组件）。
新增 SubmitBar 提交订单栏布局内容（VIP）。
新增 GoodsBar 商品导航栏布局内容（VIP）。
新增 ChatBar 聊天栏布局内容（VIP）。
新增 RollNews 滚动消息布局内容（VIP）。
新增 CardSwiper 卡片轮播布局内容（VIP）。
BubbleBox 气泡框组件优化，新增内容插槽（content），可自定义气泡框内容；新增属性 padding，用于调整气泡框内置内容item项padding值。
LoadMore 加载更多组件优化，新增属性 state 控制组件显示状态。
Backdrop 遮罩层组件优化，Nvue端去除v-if使用，修复fixed定位时遮挡位置靠后的fixed元素问题；Nvue端新增属性full，当组件放置根元素下且为absolute定位时可设置遮罩铺满屏幕。
Poster 绘制分享海报组件优化，修复编译到微信小程序功能失效的问题。
Qrcode 二维码组件优化，修复编译到微信小程序功能失效的问题。
Barcode 条形码组件优化，修复编译到微信小程序功能失效的问题。
Autograph 手写签名组件优化，修复编译到微信小程序功能失效的问题。
Table 表格组件优化，修复设置图片类型显示错误的问题。
Textarea 多行输入框组件优化，调整maxlength设为-1时，双向绑定不生效的问题。
Button 按钮组件优化，默认调整为细边框（0.5px）。
Picker 选择器组件优化，修复已知问题。
DatePicker 日期时间选择器组件优化，修复已知问题。
Badge 徽章组件优化，修复Nvue端可能出现文本被截断的情况。
优化若干已知问题。

V1.5.0（2022-05-18）

新增 Vtabs 纵向选项卡组件（VIP组件）。
新增 PuzzleVerify 滑块拼图验证组件（VIP组件），此组件为 SliderCaptcha 滑块拼图验证组件的功能补充。详见
新增 Drag 拖拽排序组件（VIP组件）。
新增 ImageCropper 图片裁剪组件（VIP组件）。
新增 Table 表格组件（VIP组件）。
Utils 工具类组件新增函数节流方法使用案例。
Badge 徽章组件优化，新增max属性，当值超过max时使用+号代替，仅为数字时有效。
SingleInput 单输入框组件优化，新增清空方法重置输入值（结合原生键盘时使用）。
Button 按钮组件优化，修复微信小程序端@click事件中调用wx.getUserProfile无效的问题以及在subNVue中点击事件失效的问题。
Form 表单校验示例新增其他表单元素，满足更多表单需求。
Icon 图标组件优化，新增支持自定义图标，详见文档说明。
DropdownMenu 下拉菜单组件优化，支持nvue。
Input 输入框组件优化，新增 number 属性，修复v-model.number在小程序平台值未转化为Number类型问题。
修复 Grid 宫格组件 ref 被误删除导致报错的问题。
修复并优化 Circle 圆形进度条组件在nvue端出错的问题。
修复vue2下使用wxs初始化时可能报错的问题。
ActionSheet 上拉菜单组件优化，新增属性 safeArea 控制是否需要适配底部安全区域。
BottomNavbar 底部导航栏组件优化，新增属性 safeArea 控制是否需要适配底部安全区域。
BottomPopup 底部弹出层组件优化，新增属性 safeArea 控制是否需要适配底部安全区域。
DigitalKeyboard 数字键盘组件优化，新增属性 safeArea 控制是否需要适配底部安全区域。
Footer 页脚组件优化，新增属性 safeArea 控制是否需要适配底部安全区域。
Gallery 画廊组件优化，新增属性 safeArea 控制是否需要适配底部安全区域。
LicensePlate 车牌号键盘组件优化，新增属性 safeArea 控制是否需要适配底部安全区域。
Select 选择器组件优化，新增属性 safeArea 控制是否需要适配底部安全区域。
ShareSheet 分享面板组件优化，新增属性 safeArea 控制是否需要适配底部安全区域。
Tabbar 标签栏组件优化，新增属性 safeArea 控制是否需要适配底部安全区域。
BottomPopup 底部弹出层组件优化，优化Nvue下设置顶部圆角值时IOS底部偶尔出现圆角的问题。
优化若干已知问题。

V1.4.0（2022-03-16）

新增 Circle 圆形进度条组件（VIP组件）。
新增 Skeleton 骨架屏组件（VIP组件）。
新增 CubicBezier 贝塞尔曲线组件（VIP组件）。
新增 SlideVerify 滑动验证组件（VIP组件）。
新增 RotateVerify 旋转验证组件（VIP组件）。
新增 SliderCaptcha 滑块拼图验证组件（VIP组件）。
新增 OverflowHidden 内容超出隐藏组件（VIP组件）。
新增 Backtop 回到顶部组件（VIP组件）。
新增 Lazyload 图片懒加载组件（VIP组件）。
新增 Waterfall 瀑布流组件（VIP组件）。
优化部分组件在vue3下显示异常，控制台报出警告的问题。
优化 Upload 图片上传组件。新增属性设置删除图片时是否弹框确认；图片上传数到达限制数max时隐藏选择框。
修复 Preview 表单预览组件改变数据页面不更新的bug。
优化 Button 按钮组件在Nvue以及PC中的点击效果。
优化 Card 卡片组件在Nvue中样式显示不正确的问题。
优化 Message 消息提示组件，部分props属性可在show方法中传值覆盖。
优化 Select 选择器组件，修复单选时设置默认选中项无效的问题。
优化 CountDown 倒计时组件，修复初始化传0触发倒计时结束事件的问题。
修复 Layout 栅格布局组件属性gutter不生效的bug。
修复 InputNumber 数字输入框组件在vue3下 blur 事件未在emits中申明的问题。
优化若干已知问题。

V1.3.0（2021-12-31）

新增 Calendar 日历组件（VIP组件）。
新增 Cascader 级联选择器组件（VIP组件）。
新增 Slider 滑块组件（VIP组件）。
新增 Rate 评分组件（VIP组件）。
新增 Select 选择器组件（VIP组件）。
新增 Upload 图片上传组件（VIP组件）。
新增 Gallery 画廊组件（VIP组件）。
新增 BubbleBox 气泡框组件（VIP组件）。
新增 BottomNavbar 底部导航栏组件（VIP组件）。
新增 CountDown 倒计时组件（VIP组件）。
新增 CopyText 长按复制组件（VIP组件）。
新增 Timer 计时器组件（VIP组件）。
新增 Qrcode 二维码组件（VIP组件）。
新增 Barcode 条形码组件（VIP组件）。
新增 Autograph 手写签名组件（VIP组件）。
修复 Textarea 多行输入框组件回车无法换行的问题。
优化 Request 网络请求组件，新增加载中提示信息配置项。
优化 Icon 图标组件，新增部分图标。
优化若干已知问题。

V1.2.0（2021-11-22）

新增 Tabbar 标签栏组件（VIP组件）。
新增 ActionSheet 上拉菜单组件。
新增 Toast 轻提示组件。
新增 Dialog 对话框组件。
新增 DropdownMenu 下拉菜单组件。
新增 DropdownList 下拉菜单组件。
新增 Modal 模态框组件（VIP组件）。
新增 Landscape 压屏窗组件（VIP组件）。
新增 Message 消息提示组件（VIP组件）。
新增 BottomPopup 底部弹出层组件。
新增 TopPopup 顶部弹出层组件。
新增 Drawer 抽屉组件。
新增 NoticeBar 通告栏组件（VIP组件）。
新增 TimeAxis 时间轴组件（VIP组件）。
新增 Steps 步骤条组件（VIP组件）。
新增 Progress 进度条组件（VIP组件）。
新增 Collapse 折叠面板组件。
新增 SwiperDot 轮播图指示点组件（VIP组件）。
新增 DigitalRoller 数字滚轮组件（VIP组件）。
新增 DigitalKeyboard 数字键盘组件（VIP组件）。
新增 LicensePlate 车牌号键盘组件（VIP组件）。
新增 CountdownVerify 验证码倒计时组件（VIP组件）。
新增 Sticky 吸顶容器组件（VIP组件）。
新增 Fab 浮动按钮组件（VIP组件）。
新增 ShareSheet 分享面板组件（VIP组件）。
新增 FilterBar 筛选栏组件（VIP组件）。
新增 SwipeAction 滑动菜单组件。
新增 Picker 选择器组件（VIP组件）。
新增 DatePicker 日期时间选择器组件（VIP组件）。
新增门户模板（物料）。
优化掉部分组件中对头条小程序做兼容的冗余代码。
优化若干已知问题。

V1.1.0（2021-09-07）

调整组件对vue3支持与uni-app官方一致。
新增 Panel 面板组件（VIP组件）。
新增 Preview 表单预览组件（VIP组件）。
新增 Empty 缺省页组件。
新增 SegmentedControl 分段器组件。
新增 Pagination 分页器组件。
新增 NavBar 导航栏组件（VIP组件）。
新增 Tabs 标签页组件。
新增 Tag 标签组件。
新增 Backdrop 遮罩层组件。
新增 Result 结果页组件（VIP组件）。
新增 Avatar 头像组件。
新增 Form 表单校验组件（VIP组件）。
新增 Validator 表单验证（JS）组件（VIP组件）。
新增 SingleInput 单输入框组件（VIP组件）。
新增 IndexList 索引列表组件（VIP组件）。
新增 SearchBar 搜索栏组件（VIP组件）。
新增登录（A）模板（物料）。
新增登录（B）模板（物料）。
新增登录（C）模板（物料）。
新增登录（D）模板（物料）。
优化若干已知问题。

V1.0.0（2021-08-02）

新增 Color 色彩，First UI用色指南。
新增 Icon 图标组件，First UI字体图标库。
新增 Button 按钮组件。
新增 Footer 页脚组件。
新增 Animation 动画组件。
新增 StatusBar 状态栏组件。
新增 Layout 栅格布局组件（fui-row和fui-col）。
新增 Grid 宫格组件（fui-grid和fui-grid-item）。
新增 List 列表组件（fui-list和fui-list-cell）。
新增 Card 卡片组件。
新增 Input 输入框组件。
新增 InputNumber 数字输入框组件。
新增 Label 标签组件。
新增 FormField 表单数据传递组件（微信/百度/QQ小程序）。
新增 Radio 单选框组件。
新增 Checkbox 复选框组件。
新增 Switch 开关组件。
新增 Textarea 多行输入框组件。
新增 Loading 加载组件。
新增 LoadAni 加载动画组件（VIP组件）。
新增 Badge 徽章组件。
新增 Alert 警告框组件。
新增 Divider 分割线组件。
新增 LoadMore 加载更多组件。
新增 Clipboard 复制文本组件（VIP组件）。
新增 Request 网络请求组件（VIP组件）。
新增 Utils 工具类组件。
新增 Poster 绘制分享海报组件（VIP组件）。

ll6074729 / firstui Goto Github PK

firstui's Introduction

First UI 移动端框架优质选择

FirstUI UNI版

FirstUI 微信小程序版

FirstUI UNI版 快速上手

安装

方式一 ：通过 npm 安装

方式二 ：通过下载代码

方式三 ：选择需要的模块引入