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

2025-06-27 16:59:31 6704

前言

之前写过一篇

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移动快速开发框架【下】--快速入门指引

Copyright © 2022 世界杯积分_上一届世界杯冠军 - f0cai.com All Rights Reserved.