一张脑图看懂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 , 前海圆舟 等), 最终可以全跨平台展示.

用途

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

……

特点

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

9. 支持不同平台打包

   Cordova
   DCloud
   APICloud
   AppCan
   前海圆舟

10. 开发运行效率快

……

适合

前端开发者
后端开发者
安卓开发者
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.帮助中心

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

下一篇

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