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

时间 2019-11-29

标签一张看懂 bui webapp 移动快速开发框架工具资源栏目无线繁體版

原文原文链接

前言

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

BUI 新版预览

在线预览html

在线脑图查看

图片没法看完，请查看在线脑图前端

大纲

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

1.框架设计

框架介绍

简介

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

用途

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

特色

UI设计稿还原定制能力，移动端适配机制, 跟原生DPI缩放保持一致;小程序
快速上手，学习几乎零成本;segmentfault
快速融入各类平台，保持原平台的交互操做;后端
简单的路由，丰富的切换效果;api
模块化开发，多人协做，按需加载;缓存
开发一次，安卓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. ……
控件
- 控件基本用法：
- 控件分类：
- 扩展
方法
- 经常使用方法
- 混合方法