5

前言

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

进入官网

BUI 新版预览

BUI Webapp移动开发框架演示

在线预览

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

在线脑图查看

BUI Webapp移动开发框架脑图

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

大纲

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

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.提高效率工具

4.免费模板案例资源

5.文档

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

6.入门视频

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

7.帮助中心

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

下一篇

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


王小o
312 声望61 粉丝

BUI专注webapp快速开发