快速入门
一、安装方式
1. npm 创建开发工程
推荐node环境16.x，复制命令自动安装构建
npx buijs@latest create bui-app
效果预览
2. 下载工程方式
修改解压的目录名为 demo， 打开终端命令行。
- npm 安装依赖即可预览
# 进入工程目录 cd demo # 安装依赖,加上淘宝源会速度快一点，或使用cnpm npm install --registry=https://registry.npm.taobao.org # 运行预览 npm run dev
3. 使用CDN版本
引入cdn依赖即可，CDN可能会不稳定，仅供示例说明。
- unpkg.com buijs
<link rel="stylesheet" href="https://unpkg.com/buijs/lib/latest/bui.css" /> <script src="https://unpkg.com/buijs/lib/zepto.js"></script> <script src="https://unpkg.com/buijs/lib/latest/bui.js"></script>
1. 新建 index.html 页面
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>BUI</title>
<link rel="stylesheet" href="https://unpkg.com/buijs/lib/latest/bui.css" />
</head>
<body>
<!-- 结构内容位置 -->
<script src="https://unpkg.com/buijs/lib/zepto.js"></script>
<script src="https://unpkg.com/buijs/lib/latest/bui.js"></script>
<script>
// 多页开发: 一个页面必须要有一个 bui.ready, 且只能有一个
bui.ready(function(global){
// init
bui.alert("done")
})
</script>
</body>
</html>
二、开发示例
接着以CDN的开发方式，多页开发，简单说明结构与控件，组件的基本使用，与传统开发保持一致。
新增BUI页面
放在body结构里面。
<!-- BUI标准结构 -->
<div class="bui-page bui-box-vertical">
<header>
<!-- 顶部固定内容 -->
<div class="bui-bar">
<div class="bui-bar-left">
<div class="bui-btn"><i class="icon-back"></i></div>
</div>
<div class="bui-bar-main">BUI首页</div>
<div class="bui-bar-right"></div>
</div>
</header>
<main>
<!-- 中间滚动内容 -->
</main>
<footer>
<!-- 底部固定内容 -->
</footer>
</div>
使用BUI控件
一个控件包含结构与初始化脚本，分别增加到main内容里面，以及bui.ready的初始化里面。
<!-- 轮播图结构 -->
<div id="uiSlide" class="bui-slide"></div>
// 轮播图控件初始化
var uiSlide = bui.slide({
id: "#uiSlide",
height: 380,
autopage: true,
data: [{
image: "http://easybui.com/demo/images/banner01.png",
},{
image: "http://easybui.com/demo/images/banner02.png",
}]
})
完整代码
<!DOCTYPE HTML>
<html>
<head>
<title>BUI</title>
<link rel="stylesheet" href="https://unpkg.com/buijs/lib/latest/bui.css" />
</head>
<body>
<!-- BUI标准结构 -->
<div class="bui-page bui-box-vertical">
<header>
<!-- 顶部固定内容 -->
<div class="bui-bar">
<div class="bui-bar-left">
<div class="bui-btn"><i class="icon-back"></i></div>
</div>
<div class="bui-bar-main">BUI首页</div>
<div class="bui-bar-right"></div>
</div>
</header>
<main>
<!-- 中间滚动内容 -->
<div id="uiSlide" class="bui-slide"></div>
</main>
<footer>
<!-- 底部固定内容 -->
</footer>
</div>
<script src="https://unpkg.com/buijs/lib/zepto.js"></script>
<script src="https://unpkg.com/buijs/lib/latest/bui.js"></script>
<script>
// 多页开发: 一个页面必须要有一个 bui.ready, 且只能有一个
bui.ready(function(global){
// init
// 轮播图控件初始化
var uiSlide = bui.slide({
id: "#uiSlide",
height: 380,
autopage: true,
data: [{
image: "http://easybui.com/demo/images/banner01.png",
},{
image: "http://easybui.com/demo/images/banner02.png",
}]
})
})
</script>
</body>
</html>
以上是BUI最基础的用法，简单好理解，但随着需求的变更，慢慢就越写越乱，不好维护。需要组件化把可以复用的代码抽离，比方轮播图是可以公共使用的。
新增自定义组件
还是以轮播图组件为例子，抽离原本的代码，做参数合并操作。单页多页都是一样的用法。
组件化以后，需要部署或打开跨域的chrome才能访问。
pages/slide.html
<div class="bui-slide"></div>
pages/slide.js
// 组件包装器
loader.define(function(requires, exports, module, global){
// 接收参数 1.6.x 支持
// let props = bui.history.getParams(module.id);
// 接收参数 1.7.x 支持
let props = module.props;
// 合并默认参数，如果没传参数则使用默认，可以保证组件正常展示。
let params = $.extend(true,{
height: 380,
autopage: true,
loop: true,
data: [{ image: "http://easybui.com/demo/images/banner01.png" }]
},props);
// id比较特殊，需要改成通过component生成的id
params.id = `#${module.id} .bui-slide`;
// 轮播图控件初始化
const uiSlide = bui.slide(params);
// 抛出接口供外部调用
return uiSlide;
})
在页面的任何地方，使用component 标签即可使用。
<component id="homeSlide" name="pages/slide" height="300"></component>
<component id="tabSlide" name="pages/slide" height="200"></component>
完整代码：
<!DOCTYPE HTML>
<html>
<head>
<title>BUI</title>
<link rel="stylesheet" href="https://unpkg.com/buijs/lib/latest/bui.css" />
</head>
<body>
<!-- BUI标准结构 -->
<div class="bui-page bui-box-vertical">
<header>
<!-- 顶部固定内容 -->
<div class="bui-bar">
<div class="bui-bar-left">
<div class="bui-btn"><i class="icon-back"></i></div>
</div>
<div class="bui-bar-main">BUI首页</div>
<div class="bui-bar-right"></div>
</div>
</header>
<main>
<!-- 中间滚动内容 -->
<component id="homeSlide" name="pages/slide" height="300"></component>
</main>
<footer>
<!-- 底部固定内容 -->
</footer>
</div>
<script src="https://unpkg.com/buijs/lib/zepto.js"></script>
<script src="https://unpkg.com/buijs/lib/latest/bui.js"></script>
<script>
// 多页开发: 一个页面必须要有一个 bui.ready, 且只能有一个
bui.ready(function(global){
// init
})
</script>
</body>
</html>
组件动态传参
部分参数我们通过属性的方式传过去，对象类型的参数则需要动态传过去。
<component id="homeSlide" name="pages/slide" delay="true"></component>
// 动态编译，且只编译一次，参数只传一次
loader.delay({
id:"#homeSlide",
param: {
height: 300,
data: [{ image: "http://easybui.com/demo/images/banner01.png" },
{ image: "http://easybui.com/demo/images/banner02.png" }]
}
})
完整代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>BUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,viewport-fit=cover">
<link rel="stylesheet" href="https://unpkg.com/buijs/lib/latest/bui.css" />
</head>
<body>
<!-- BUI标准结构 -->
<div class="bui-page bui-box-vertical">
<header>
<!-- 顶部固定内容 -->
<div class="bui-bar">
<div class="bui-bar-left">
<div class="bui-btn"><i class="icon-back"></i></div>
</div>
<div class="bui-bar-main">BUI首页</div>
<div class="bui-bar-right"></div>
</div>
</header>
<main>
<!-- 中间滚动内容 -->
<component id="homeSlide" name="pages/slide" delay="true"></component>
</main>
<footer>
<!-- 底部固定内容 -->
</footer>
</div>
<script src="https://unpkg.com/buijs/lib/zepto.js"></script>
<script src="https://unpkg.com/buijs/lib/latest/bui.js"></script>
<script>
// 多页开发: 一个页面必须要有一个 bui.ready, 且只能有一个
bui.ready(function(global){
// 动态编译传参，且只编译一次，参数只传一次
loader.delay({
id:"#homeSlide",
param: {
height: 300,
data: [{ image: "http://easybui.com/demo/images/banner01.png" },
{ image: "http://easybui.com/demo/images/banner02.png" }]
}
})
})
</script>
</body>
</html>
更多内容请继续参考文档或实践。