BUI 5分钟入门

目录

一、简介

2018开发最快的webapp框架–BUI设计思路解析

BUI 是基于DOM的交互框架,拿来即用,专注于移动轻应用开发,着重交互,丰富的交互控件,最重要的是可以保持高保真还原设计稿,嵌入各种各样的应用平台中, 例如品高公司的Link,微信,QQ,淘宝,支付宝,钉钉,前海圆舟等等.

欢迎加入我们的QQ技术交流群:

BUI 移动开发交流群1: 691560280
BUI 移动开发-内部交流: 214895324 (非同事不加)

二、特色和优势

BUI思路脑图

  • 独创的设计稿移动端适配机制,跟原生DPI缩放保持一致;
  • 快速上手,学习几乎零成本;
  • 快速融入各种平台,保持原平台的交互操作;
  • 简单的路由,丰富的切换效果;
  • 模块化开发,按需加载;
  • 开发一次,多平台适用;
  • 轻松定制UI;
  • 兼容requirejs,seajs模块;

三、适用场景

  • 适合中小型应用开发;
  • 适合Link,微信,QQ,淘宝,支付宝等平台的webapp开发;
  • 适合基于Bingotouch,Cordova,Dcloud,APICloud,APPCan等的混合型应用;
  • 适合不同风格高定制需求;
  • 适合原生开发以后移植微信等其它平台;
  • 适合快速开发demo原型投标;

四、开发流程

4.1 开发环境下载

  1. 下载 SublimeText3 编辑器 ( 非必须, 但这是一个优秀的编辑器 );
  2. 下载 BUI Fast 插件包 (非必须, 配合sublimetext 可以让BUI开发更快,查看安装使用说明)

4.2 创建项目开发包

4.2.1 直接下载开发包使用

下载 BUI单页开发包 (下载解压以后,删除templates,platforms,dev目录,非必须)
目录的规范请仔细阅读 BUI 单页与模块化开发入门

注意:不使用命令行工具,你也依然可以使用bui,只需页面引用下载对应的脚本及样式库就行.

BUI多页开发标准页面

<!DOCTYPE HTML>
<html>
<head>
    <title>BUI开发工程页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link href="http://www.easybui.com/demo/css/bui.css" rel="stylesheet">
</head>
<body>
    <div class="bui-page">
        <header></header>
        <main>
            <!-- 正文内容 -->
        </main>
        <footer></footer>
    </div>

    <script src="http://www.easybui.com/demo/js/zepto.js"></script>
    <script src="http://www.easybui.com/demo/js/bui.js"></script>
</body>
</html>

在线体验BUI,自己动手DIY

4.2.2 使用NPM命令创建

buijsBUI Webapp交互框架 的cli命令工具, 用于快速生成模板必须的工程文件及不同平台的bui.js,bui.css文件. 需要先安装 node环境 才能使用npm命令.

非必须,但通过命令行构建,有以下好处:
1. 自动获取最新的BUI模板工程;
2. 可以指定bui对应的平台版本;
3. 可以指定bui的单页模板. BUI模板图片预览 ;
4. 拥有服务器并支持接口跨域调试;
5. 自动编译压缩混淆文件,便于打包部署的安全;

使用命令行构建工程, 查看buijs安装使用说明.
通过命令行构建工具,可以快速构建某个平台,某个模板下的工程文件, 模板可以继续新增.

4.2.1.1 全局安装 buijs cli构建工具

# 全局安装 buijs 
$ npm install -g buijs

4.2.1.2 创建默认Webapp工程 (demo 为工程名称)

BUI工程命令行构建


# * 创建webapp工程 (demo 为工程名称, 如果没有,则在当前目录)
$ buijs create demo 

# * 进入工程目录
$ cd demo

# * 安装依赖
$ npm install 

# * 自动打开浏览器并监听js,scss,html等文件的修改
$ npm run dev


# 非必须命令,编译工程,生成dist目录,压缩脚本,样式,图片,用于发布打包的安全
$ npm run build


注意: npm run dev使用这个命令样式的修改都需要在 /scss/style.scss 文件,可以分模块引入,如果直接修改css/style.css 会被覆盖掉.

如果不想使用自动编译, 请把npm run dev 命令换成 npm run server, 只是启动服务,不做编译,不做监听.

4.3 预览页面

4.3.1 使用NPM

npm run dev 会自动打开浏览器预览

默认模板预览 更多模板点击这里 [BUI模板图片预览]

4.3.2 不使用NPM

不使用NPM直接打开index.html 是打不开的,需要自己部署一个服务器, 或者开启跨域的谷歌.
当然,最傻瓜式的就是下载 [prepros] 软件,把工程文件夹拖进去就可以了.

4.4 页面跳转及传参

单页初始化的时候,会自动加载main模块, 一个模块包含 main.html,main.js. 在页面之间的跳转,使用 bui.load, 会自动选择合适的跳转方式.

4.4.1 页面跳转及传参:

绑定Dom跳转: bui.load API

$("#id").on("click",function(e){
    bui.load({ url: "pages/page2/page2.html", param: {} });
})

注意: 单页面在跳转链接的时候,会自动加载模块,我们只需要定义好模块,就可以了. 更多单页的开发知识,请仔细阅读 BUI 单页与模块化开发入门

4.4.2 页面接收参数: bui.getPageParams API

var getParams = bui.getPageParams();
    getParams.done(function(result){
        console.log(result);
    })

4.4.3 页面后退: 单页支持后退多层,并且回调 bui.back API

bui.back();

4.5 使用控件

一个控件包含两部分, html结构,及js控件初始化.
以 bui.slide 焦点图控件为例:

焦点图 html:

<div id="uiSlide" class="bui-slide">
    <div class="bui-slide-main">
        <ul>
            <li>
                <!--第1屏-->
                <img src="" alt="">
                <div class="bui-slide-title">图片标题</div>
            </li>
        </ul>
    </div>
    <!-- 分屏菜单 -->
    <div class="bui-slide-head">
        <ul >
            <li>1</li>
        </ul>
    </div>
</div>

焦点图 js:
// 焦点图 js 初始化:
var uiSlide = bui.slide({
    id:"#uiSlide",
    height:200,
    zoom: true
})

亲自在线试试

使用 bui fast 插件的快速书写 如何安装使用 BUI Fast
1. 在 js文件里面, 输入 bui-slide-demo + <kbd>Tab</kbd> 生成脚本及对应的结构
2. 把生成的 html 结构,复制到 main 标签下的某个位置

bui.slide 预览图

4.6 初始化事件

打开编辑 index.html, bui.js 依赖于 zepto 或者 jquery, fastclick 是在移动端快速点击的插件.

<script src="js/zepto.js"></script>
<script src="js/plugins/fastclick.js"></script>
<script src="js/bui.js"></script>
<script src="index.js"></script>

打开刚刚创建的工程demo/index.js 文件, bui.on(“pageinit”) 其实相当于$(document).ready(); 主要用于UI控件的初始化, 比如 bui.slide, bui.accordion 等交互控件, bui.router也属于UI类的;

bui.on("pageinit",function(){}) (用于UI控件初始化,单页路由只要index.js初始化一次)

index.js

// 路由初始化
window.router = bui.router();

// 页面DOM准备完毕
bui.on("pageinit",function(){
    router.init({
        id: "#bui-router"
    })
})

bui.ready (用于Native模块切换使用)

bui.ready 事件主要用于Native模块在不同平台转换( webapp | app ), 比方 bui.load 底层,
bui.isWebapp = true; 时 用 window.location.href,
bui.isWebapp = false; 时,用 app.load 方法. 这类native模块是需要在bui.ready里面才会正常, 不同平台的事件初始化是不同的, 这个就是bui.ready所做的.

bui.ready(function(){
    // 这里执行
})

注意: 使用单页开发以后,可以在 loader.define模块里面,直接调用native模块的方法, 多页开发Native模块的方法,需要 bui.ready 统一初始化.

4.7 与后台接口数据交互

开发必须使用并且理解的就是 bui.ajax, 跟后端的数据交互都由这个方法完成,属于 native模块, 受 bui.isWebapp 影响
bui.isWebapp = true 时, bui.ajax = $.ajax web请求,调试时有跨域问题,
bui.isWebapp = false 时, bui.ajax = bui.native.ajax 原生请求,调试时无跨域问题. 调试指,在原生的调试app容器里面. 使用bui.ajax可以保持一致的开发,以便在不同的平台间切换.

// 更多参数请参考 bui.ajax api
bui.ajax({
    url: "http://", // 接口地址,返回json
    data: {},       // 接口请求的参数
    method: "GET",  // 默认为 GET
}).done(function(result){
    // result 请求成功返回的对象
}).fail(function(result,status){
    // 请求失败处理
});

4.8 BUI Native模块原理图:

bui思路

五、切图制作流程

开发者可以跳过 切图制作流程.

BUI有独特的自适应规范,这个规范跟正常的web切图流程一致, 唯一需要注意的就是单位的转换, BUI的制作是基于rem缩放, 无需关注viewport或scale, 在bui里面, 基于540px设计稿量取大小, 1rem = 100px; 这样做出来的应用,能保持在各种系统,各种浏览器,保持跟设计稿一致的效果.

5.1 按源稿大小切图

  1. 打开PSD源稿
  2. 选中图片,导出为PNG格式, ( 这里用到一个 cutterman PS插件;
  3. 把图片放到BUI开发包的 images 目录下;

    images目录里面可以自行规划,例如:icons,banner等;

演示:
切图

5.2 转换设计稿大小

BUI独创的基于REM适配手机,保持跟原生DPI一致的缩放效果, 需要把设计稿转换为540的设计稿,这样量取到的值,直接除以100,便是rem值.

5.2.1. 把设计稿更改为540px宽度,高度等比缩放的设计稿

修改设计稿为540宽度

5.2.2. 量取设计稿内容的大小/100, 转成rem单位
转换尺寸为rem单位

说明:
如果希望slide的高度随着移动设备的不同比例缩放,需要转换成rem单位, 比方,你量取到的宽度是540px,高度是270px的焦点图, 那么写成 2.7rem = 270px/100 ; 这样页面的slide,就会根据手机的分辨率不同,自动更改为等比的焦点图.

.slide { width:100%;height:2.7rem; } 


如果写成270px 会有什么问题呢?
答: 如果是写成270px 那么页面的高度就剩下不多(iphone4 高度480px,iphone5 高度568px),最终做出来的页面,跟设计稿会有比较大的误差.而设置成2.7rem以后,就会随着不同DPI而转换成等比的高度; 换句话说,设计搞放到手机上是什么样子,做出来就是什么样子, 精确还原.


那么是不是所有的 px 都需要这样转换呢?
答: 1px 不需要转换,直接就写1px;

5.3 编写结构

BUI 标准的页面结构

<div class="bui-page">
    <header>
        <!-- 头部内容 -->
    </header>
    <main>
        <!-- 正文内容 -->
    </main>
    <footer>
        <!-- 底部内容 -->
    </footer>
</div>

标准结构说明: BUI的页面分为上中下结构,中间main是主要内容的容器(唯一).BUI会去计算main的容器高度,除去header,footer以后的高度,所以如果你有内容要放底部,就放footer里面.

5.4 布局

BUI的布局简单强大,学会则没有布不了的局.

  1. 弹性布局 (点击看更多示例)
    // 弹性等分布局: span1容器放内容或控件,如果还有span1 则是1/3 大小...
    <div class="bui-box">
        <div class="span1">
            1/2大小
        </div>
        <div class="span1">
            1/2大小
        </div>
    </div>
    
    // 弹性自适应布局: span1容器的宽度 = 页面宽度 - 100 
    <div class="bui-box">
        <div style="width:100px;"></div>
        <div class="span1">
            // 自适应内容
        </div>
    </div>
    
  2. 流式布局 (点击看更多示例)
    // 流式等分布局: 6+6 = 12 = 一行, 最大也就span12
    <div class="bui-fluid">
        <div class="span6">
            1/2大小
        </div>
        <div class="span6">
            1/2大小
        </div>
    </div>
    // 自由比例: 3+3+4+2 = 12 = 一行, 最大也就span12
    <div class="bui-fluid">
        <div class="span3"></div>
        <div class="span3"></div>
        <div class="span4"></div>
        <div class="span2"></div>
    </div>
    
  3. 流式等列布局 (点击看更多示例)
    // 流式等列布局:
    <ul class="bui-fluid-2">
        <li>
            1/2大小
        </li>
        <li>
            1/2大小
        </li>
    </ul>
    

六、调试

6.1 Chrome调试

6.1.1 输入地址

Chrome 输入 http://localhost:8000

默认端口号:8000, 一个端口对应一个工程, 如需更改同样是在package.json 配置.

6.1.2 模拟手机效果

打开chrome 开发者工具, 开启模拟手机效果, 这样才能模拟手机的滑动拖拽事件.

chrome 预览图

如果开启了跨域的谷歌,可以直接打开 index.html

6.2 手机调试

手机端预览,请更改成您的 http://IP+端口号.

# mac 查看ip 查看 inet 的信息就是ip
$ ifconfig

# windows 查看ip
$ ipconfig

6.3 接口如何跨域

打开根目录下的 package.json ,里面有个 proxy 的对象, key值为接口的目录名, target 为域名的host.

假设请求的接口地址为: http://www.easybui.com/api/getDetail/id/123

需要这样配置 proxy :

{
...
"proxy": {
    "/api": {
      "target": "http://www.easybui.com",  
      "changeOrigin":true  
    }
  }
...
}

js: 脚本请求使用相对路径, 为了后面更改为正式地址, 建议可以把url部分作为配置项.

var apiUrl = "";

bui.ajax({
    url: apiUrl+ "api/getDetail/id/123"
}).then(function(res){

})

七、系统要求

  • iOS
  • Android 4.3+

可以下载BUI体验包, 用不同平台打包以后的效果. 进入下载中心

八、浏览器支持

  • 系统自带webkit浏览器
  • 魅族浏览器
  • 微信
  • QQ
  • 淘宝
  • 支付宝
  • UC浏览器

部分浏览器如果默认开启了手势,会影响操作体验, UC已屏蔽

九、谁在使用

品高内部上百个移动终端项目,客户有移动,电信,地铁,政府等行业.

十、常用链接