一张脑图看懂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特点：
兼容 requirejs,seajs 模块
每个模块都是一个闭包，默认不允许外部访问
可以抛出指定方法，用来操作当前模块，给外部调用衰ꟐߐĀ臨
默认是整个回调执行，执行 router.refresh(); 时，要注意事件的处理，容易造成重复绑定；尽量不使用这个方式；
支持自定义模块名，正常不需要，路径是最好的模块名；
支持创建页面模块的生命周期；
支持模块缓存
……
单页路由：bui.router特点
支持交互动画
支持预加载
支持模板缓存
支持路由劫持
支持路由后退多层及后退指定模块
支持局部加载及传参
支持页面生命周期
支持页面传参，保持多页单页一致接口
支持以模块跳转
支持移动端物理后退按键
……
数据驱动：bui.store特点
基于Dom的数据驱动，常用于表单
参考vue的接口设计，上手无难度
支持公共数据贯穿整个应用所有页面
支持私有数据，别的页面无法操控
结合模块可以实现数据互通，无需像vue一样的组件树，页面跟模块直接都是并行的
……
控件
控件基本用法：
控件分类：
扩展
方法
常用方法
混合方法
bui.css样式库
全局样式
排版样式
布局样式
定位样式
常见样式
2.框架演示
在线演示
控件演示
常用UI演示
3.提高效率工具
BUIFast 编辑器插件
buijs cli工程构建工具
Demo源码查看器
4.免费模板案例资源
免费案例
免费模板
免费插件
下载中心
5.文档
API 文档查阅每个控件只保留了最基本的用法书写，更多需求需要查看对应的参数
入门文档从环境搭建开始一步步学习，入门很简单
组件文档每个控件的示例源码及说明
BUI 专栏项目案例经验与技巧类的文章，欢迎投稿
6.入门视频
基于较早期的版本录制的视频，控件的用法，布局等，适用于多页开发
7.帮助中心
搜索问题关键字，在官方文档有常见问题的处理
搜索已解决的问题有没有一样的
整理自己的问题结合代码配图反馈
加入Q群与开发者一起交流，只能加1个1群：691560280【满】2群：4170980
下一篇
一张脑图看懂BUI Webapp移动快速开发框架【下】--快速入门指引