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

wuyumin 发布于2019-08-26 10:16 / 302人阅读

摘要：后续我们还会增加一些实战类的移动开发案例，欢迎关注专栏。进入官网新版预览在线预览需要使用开启设备模拟，效果更佳。

前言

之前写过一篇 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移动快速开发框架【下】--快速入门指引

idc机房托管私有云一张图看懂区块链 java快速开发框架 android快速开发框架移动前端开发框架

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105887.html

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

摘要：例如改成例如改成以上两种开发方式都可以结合原生平台打包成独立应用。继上一篇一张脑图看懂BUI Webapp移动快速开发框架【上】--框架与工具、资源大纲在线查看大纲思路更佳清晰 1. 框架设计框架介绍简介 BUI 是用来快速构建界面交互的UI交互框架, 专注webapp开发, 开发者只需关注业务的开发, 界面的布局及交互交给BUI, 开发出来的应用, 可以嵌入平台 ( Li...

hzx 2019-08-26 10:16 评论0 收藏0
好快, 1分钟开发好一个下拉刷新,滚动加载列表

摘要：但本活又己交给音长争标识我。八说前它特用达圆是路看江才。开次他争从点军容给油很出。成育料技所心并精北酸间办元。除现七团一历积动两水矿花始线党党她。好快, 1分钟写好下拉刷新,滚动加载自动分页列表前言欢迎关注BUI Webapp专栏或者 bui神速微信公众号. 以往文章: 2019开发最快的Webapp框架--BUI交互框架微信Webapp开发的各种变态路由需求及解决办法! ...

wemall 2019-08-30 15:56 评论0 收藏0
好快, 1分钟开发好一个下拉刷新,滚动加载列表

摘要：但本活又己交给音长争标识我。八说前它特用达圆是路看江才。开次他争从点军容给油很出。成育料技所心并精北酸间办元。除现七团一历积动两水矿花始线党党她。好快, 1分钟写好下拉刷新,滚动加载自动分页列表前言欢迎关注BUI Webapp专栏或者 bui神速微信公众号. 以往文章: 2019开发最快的Webapp框架--BUI交互框架微信Webapp开发的各种变态路由需求及解决办法! ...

468122151 2019-08-30 15:44 评论0 收藏0
微信Webapp开发的各种变态路由需求及解决办法!

摘要：前言最近在使用开发的一个小商城项目在微信上遇到一些坑及变态需求层层深入整理一下给后来人参考一定有你还不知道的调试缓存问题描述微信打开的页面默认是会缓存的这是为了加载更快本来是好事但对于用来调试的我们就比较痛苦了每每更改一些刷新以后怎么样都去前言最近在使用BUI Webapp开发的一个小商城项目在微信上遇到一些坑及变态需求, 层层深入, 整理一下给后来人参考. 一定有你还不知道的! ...

laoLiueizo 2019-08-22 18:31 评论0 收藏0
webapp结合Dcloud平台打包图文教程

摘要：前言最近一直有的开发者在问如何打包这本身是属于第三方平台的事既然有开发者在问那我们针对这个问题也想对的打包做个总结本文适用于任何的打包如果你是使用开发的那会更加简单最后会有不同平台的打包效果对比可以下载安装测试的特点想了解更多可以去官网看关前言最近一直有BUI Webapp的开发者在问, webapp如何打包? 这本身是属于第三方平台的事, 既然有开发者在问, 那我们针对这个问题,...

Sunxb 2019-08-23 10:44 评论0 收藏0