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

最新推荐文章于 2024-02-02 14:59:53 发布

owilson

最新推荐文章于 2024-02-02 14:59:53 发布

阅读量1.2k

点赞数

分类专栏： Webapp 文章标签： webapp app开发移动开发 hibridApp bui

本文链接：https://blog.csdn.net/owilson/article/details/96867429

版权

Webapp 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

前言

之前写过一篇 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 , 前海圆舟等), 最终可以全跨平台展示.

用途

快速开发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. ……
控件
- 控件基本用法：
- 控件分类：
- 扩展
方法
- 常用方法
- 混合方法