BUI

快速开发WebApp
简单上手, 快的不只一点点.
下载 快速入门
微信扫一扫
滑动类控件用手机体验

什么是BUI?

BUI 是一个开放式的UI交互框架, 用于快速定制开发WebApp,微信公众号,小程序(微信,支付宝)的webview适配,还可以开发混合移动应用 ( 例如: Bingotouch, Link, Cordova, DCloud, ApiCloud, Appcan ) , 钉钉的轻应用, 前海圆舟等第三方平台.
快速开发
结合BUI Fast插件,可以提高5倍以上的开发速度!
快速上手
一次学习,多平台适用,跟你刚学前端一样开发,只需要5分钟就能快速上手
轻松定制
控件接口开放,UI效果及交互都可以轻松定制
多终端适配
一次开发,多平台适配,完美还原设计稿,在微信,手机浏览器,安卓,IOS保持跟一致的效果.

让开发更快一些 BUI Fast

BUI Fast 是BUI提供的Sublime Text, ATOM,APICloud,Webstorm,Phpstorm 插件，在编辑器中集成BUI控件及方法的代码提示，为快速开发助力. 里面封装了控件的常用参数及常用方法的语法补全, 带你飞起来. 点击查看安装使用说明
输入: ui-html 按 Tab键
输入: ui-page 按 Tab键
输入: bui-slide-demo 按 Tab键
下载 BUI Fast 插件

灵活的UI交互控件

灵活的交互控件,一致的使用方式,学一个便会全部,并且还有插件中心精选的第三方插件供你选择. 鼠标移动到图片可以看到交互效果动画.
  • 列表下拉刷新
  • 焦点图
  • 选项卡
  • 侧滑列表
  • 侧边栏
  • 对话框
  • swipe滑动
  • 日期
  • 选择列表
  • 消息提醒
  • 菜单类
    列表下拉刷新预览动图
    列表下拉刷新--bui.list

    使用说明:

    你只需要一分钟,就可以创建一个列表页面. 传一个数据请求的地址及列表模板, 分页及交互都由控件完成. 模板的构建可以使用最简单的html字符串,也可以使用其它模板插件, 甚至目前比较流行的Vuejs 都可以很好的配合.

    使用文档: API

    预览地址: demo

    BUI Fast 简写代码:

    bui-list-demo + TAB按键

    bui-list + TAB按键

    ui-list + TAB按键

    焦点图预览动图
    焦点图--bui.slide

    使用说明:

    这个是最灵活的一个交互控件,它只管交互,里面什么内容不管,所以你可以基于它做很多定制,比如多个焦点图, 还有选项卡.

    使用文档: API

    预览地址: demo

    BUI Fast 简写代码:

    bui-slide-demo + TAB按键

    bui-slide + TAB按键

    ui-slide + TAB按键

    选项卡预览动图
    选项卡--bui.slide

    使用说明:

    这个是通过修改bui.slide控件的样式而来的选项卡, 你可以自由的定制你的菜单的样式, 选项卡有3种常用场景供你选择.选项卡在顶部 | 选项卡在中部 | 选项卡在底部.

    使用文档: API

    预览地址: demo

    BUI Fast 简写代码:

    bui-slide-tab-demo + TAB按键

    bui-slide-tab + TAB按键

    ui-slide-tab + TAB按键

    侧滑列表预览动图
    侧滑列表--bui.listview

    使用说明:

    支持动态渲染以及静态渲染, 两种的区别就在于,动态渲染初始化简单, 静态渲染灵活,支持自定义按钮样式,并且支持左右侧滑.

    使用文档: API

    预览地址: demo

    BUI Fast 简写代码:

    bui-listview-demo + TAB按键

    bui-listview + TAB按键

    ui-listview + TAB按键

    侧边栏预览动图
    侧边栏--bui.sidebar

    使用说明:

    侧边栏,也叫抽屉菜单, bui.sidebar滑动出来的内容是什么,完全由你自己自定义,你也可以控制菜单在左边还是右边,也可以同时左右都有. 双边栏侧滑.

    使用文档: API

    预览地址: demo

    BUI Fast 简写代码:

    bui-sidebar-demo + TAB按键

    bui-sidebar + TAB按键

    ui-sidebar + TAB按键

    对话框预览动图
    对话框--bui.dialog

    使用说明:

    对话框同样是一个只关注交互的一个控件,可以从不同方向弹出,并且支持全屏,交互里面的内容是什么,完全由你定义, 可以是文本,也可以是控件, 完全可以由你定义, 像 提醒框 | 确认框 | 上拉菜单 | 选择列表菜单 | 日期等,都是基于dialog.

    使用文档: API

    预览地址: demo

    BUI Fast 简写代码:

    bui-dialog-demo + TAB按键

    bui-dialog + TAB按键

    ui-dialog + TAB按键

    swipe预览动图
    swipe滑动控件--bui.swipe

    使用说明:

    sidebar,listview的原型是基于swipe控件的实例制作,如果sidebar无法满足你的要求,你也可以基于这个swipe去扩展自己的控件. 比如手机的日历控件,可以在插件中心找到. swipe控件还可以跟其它滑动控件配合,实现更复杂的交互. 多个控件组合的复杂交互

    使用文档: API

    预览地址: demo

    BUI Fast 简写代码:

    bui-swipe-demo + TAB按键

    bui-swipe + TAB按键

    ui-swipe + TAB按键

    日期预览动图
    日期--bui.pickerdate

    使用说明:

    日期控件,几乎每个应用都会用到,你可以自由定制显示的时间格式,以及展示的内容,一切都是那么的简单.

    使用文档: API

    预览地址: demo

    BUI Fast 简写代码:

    bui-pickerdate-demo + TAB按键

    bui-pickerdate + TAB按键

    ui-pickerdate + TAB按键

    选择列表预览动图
    选择列表--bui.select

    使用说明:

    选择列表同样也支持动态渲染,及静态渲染,一个是简单,一个是自由,支持单选和多选,可以自己定义checkbox的样式以及位置.

    使用文档: API

    预览地址: demo

    BUI Fast 简写代码:

    bui-select-demo + TAB按键

    bui-select + TAB按键

    ui-select + TAB按键

    提醒框预览动图
    确认框预览动图
    自动消失提醒预览动图
    折叠菜单预览动图
    上拉菜单预览动图
    下拉菜单预览动图

丰富的模板及案例库

BUI 提供一些常用的模板,布局,案例,帮你快速构建通用的页面. 你还可以通过BUI提供的控件自由定制场景, 像搭积木一样简单. ( 温馨提醒: PC打开预览,事件需要开启模拟才能正常操作,可以扫码在手机观看 ) 查看更多模板