一张脑图看懂BUI Webapp移动快速开发框架【上】--框架与工具、资源

前言

之前写过一篇 2018开发最快的Webapp框架--BUI交互框架，如果你还没看过，可以简单看一下，主要介绍了BUI的基本功能，有多少控件，以及实现的思路，BUI 1.5版本以后变化很大，统一新的风格，新的规范750，新增基于Dom的数据驱动，完善了页面的生命周期等等，当你真正理解了BUI的模块，路由，数据驱动，工具之间的关系，没有什么需求是你实现不了的。后续我们还会增加一些实战类的移动开发案例，欢迎关注BUI Webapp专栏。

进入官网

BUI 新版预览

在线预览

需要使用Chrome开启设备模拟，效果更佳。

在线脑图查看

图片无法看完，请查看在线脑图

大纲

大纲在线预览思路更佳清晰，文字版有删减

1.框架设计

框架介绍

简介

BUI 是用来快速构建界面交互的UI交互框架, 专注webapp开发, 开发者只需关注业务的开发, 界面的布局及交互交给BUI, 开发出来的应用, 可以嵌入平台 ( Link, 微信, 小程序, 钉钉, 淘宝, 支付宝等 ), 亦可以跟其它第三方平台打包成独立应用( Bingotouch , Cordova , Dcloud , APICloud , Appcan , 前海圆舟等), 最终可以全跨平台展示.

用途

快速开发webapp应用
结合原生平台打包独立安装应用
快速开发微信公众号的应用
推广类的制作

……

特点

UI设计稿还原定制能力，移动端适配机制, 跟原生DPI缩放保持一致;
快速上手，学习几乎零成本;
快速融入各种平台，保持原平台的交互操作;
简单的路由，丰富的切换效果;
模块化开发，多人协作，按需加载;
开发一次，安卓IOS适用;
兼容requirejs，seajs模块;
可以结合数据驱动

支持不同平台打包

Cordova
DCloud
APICloud
AppCan
前海圆舟

开发运行效率快

……

适合

前端开发者
后端开发者
安卓开发者
IOS开发者

bui.js脚本库

全局属性

切换原生：bui.isWebapp;
查看当前版本： bui.version
查看当前版本更新时间：bui.versionCode
查看当前bui.js 的平台：bui.currentPlatform
更改控件的全局配置：bui.config.xxx = {}; xxx为控件名

核心
- 模块化：bui.loader
  特点：
  1. 兼容 requirejs,seajs 模块
  2. 每个模块都是一个闭包，默认不允许外部访问
  3. 可以抛出指定方法，用来操作当前模块，给外部调用衰ꟐߐĀ臨
  4. 默认是整个回调执行，执行 router.refresh(); 时，要注意事件的处理，容易造成重复绑定；尽量不使用这个方式；
  5. 支持自定义模块名，正常不需要，路径是最好的模块名；
  6. 支持创建页面模块的生命周期；
  7. 支持模块缓存
  8. ……
- 单页路由：bui.router
  特点
  1. 支持交互动画
  2. 支持预加载
  3. 支持模板缓存
  4. 支持路由劫持
  5. 支持路由后退多层及后退指定模块
  6. 支持局部加载及传参
  7. 支持页面生命周期
  8. 支持页面传参，保持多页单页一致接口
  9. 支持以模块跳转
  10. 支持移动端物理后退按键
  11. ……
- 数据驱动：bui.store
  特点
  1. 基于Dom的数据驱动，常用于表单
  2. 参考vue的接口设计，上手无难度
  3. 支持公共数据贯穿整个应用所有页面
  4. 支持私有数据，别的页面无法操控
  5. 结合模块可以实现数据互通，无需像vue一样的组件树，页面跟模块直接都是并行的
  6. ……
控件
- 控件基本用法：
- 控件分类：
- 扩展
方法
- 常用方法
- 混合方法

bui.css样式库

全局样式
排版样式
布局样式
定位样式
常见样式

2.框架演示

在线演示

控件演示
常用UI演示

3.提高效率工具

BUIFast 编辑器插件
buijs cli工程构建工具
Demo源码查看器

4.免费模板案例资源

免费案例
免费模板
免费插件
下载中心

5.文档

API 文档查阅
每个控件只保留了最基本的用法书写，更多需求需要查看对应的参数
入门文档
从环境搭建开始一步步学习，入门很简单
组件文档
每个控件的示例源码及说明
BUI 专栏
项目案例经验与技巧类的文章，欢迎投稿

6.入门视频

基于较早期的版本录制的视频，控件的用法，布局等，适用于多页开发

7.帮助中心

搜索问题关键字，在官方文档有常见问题的处理
搜索已解决的问题有没有一样的
整理自己的问题结合代码配图反馈
加入Q群与开发者一起交流，只能加1个
1群：691560280【满】
2群：4170980

一张脑图看懂BUI Webapp移动快速开发框架【下】--快速入门指引

一张脑图看懂BUI Webapp移动快速开发框架【上】--框架与工具、资源相关推荐

一张“神图”看懂单机/集群/热备/磁盘阵列（RAID）
一张"神图"看懂单机/集群/热备/磁盘阵列(RAID) 单机部署(stand-alone):只有一个饮水机提供服务,服务只部署一份集群部署(cluster):有多个饮水机同时提供 ...
bmp180气压传感器工作原理_40张动图看懂各种传感器工作原理
传感器(英文名称:transducer/sensor)是一种检测装置,能感受到被测量的信息,并能将感受到的信息,按一定规律变换成为电信号或其他所需形式的信息输出,以满足信息的传输.处理.存储.显示.记 ...
【物理动图】物理老师一针见血：50张动图看懂高中物理
全世界只有3.14 % 的人关注了青少年数学之旅相互作用作用力与反作用力的特点是什么? 摩擦力的大小跟什么有关系? 图中两个弹簧的弹力大小是否一样?若一样,为什么? 自行车前后轮所受力的方向是什 ...
一张动图看懂常用的通信协议
这些显示电子系统中信号波形的动图,有助于帮助我们理解传输的机理. 1 SPI传输 ▲ 图1 SPI 数据传输 ▲ 图1.2 SPI数据传输(2) ▲ 图1.3 SPI时序信号 2 I²C传输 ▲ ...
surface 安卓双系统_一张图看懂微软Surface发布会：史上最大惊喜
10月2日晚,微软在纽约举行新品发布会,一口气带来了Surface Neo双屏电脑.Surface Duo折叠屏手机.Surface Pro X.Surface Laptop 3. Surface P ...
鸿蒙手机内存,一图看懂鸿蒙2.0：终于上手机、128KB内存就能跑！
在9月10日的开发者大会上,华为不仅带来了EMUI 11,还发布了万众期待的鸿蒙OS 2.0,信息量巨大,官方亲密地做了一个信息图. 鸿蒙OS 2.0的口号是:连接的无限可能性:,致力于打造一个超级终 ...
鸿蒙运行内存4G手机,一图看懂鸿蒙2.0：终于上手机、128KB内存就能跑！
9月10日的开发者大会上,华为不但带来了EMUI 11,还发布了备受期待的鸿蒙OS 2.0,信息量相当庞大,官方也贴心制作了信息图解. 鸿蒙OS 2.0的口号是"连接无限可能",致 ...
一篇文章一张思维导图看懂Android学习最佳路线
一篇文章一张思维导图看懂Android学习最佳路线先上一张android开发知识点学习路线图思维导图 Android学习路线从4个阶段来对Android的学习过程做一个全面的分析:Android初级 ...
一张图看懂图像识别算法发展历史
一张图看懂图像识别算法发展历史