BUI框架入门快速上手前端脚手架小白步骤教程
feilong.org 修订于2021-12-17 06:36:28 97 次浏览抽空写这个BUI框架入门的快速上手教程,小白一看就懂,不需多想什么,找步骤走就行。方便前端开的朋友工作时用到。文章主要了解这些内容:BUI框架是干什么用的?BUI框架本地安装和开发部署,bui开发包的文件结构内容,以及创建新的bui模块,以焦点切好图为例。 本日志更新地址:https://feilong.org/bui-jiaocheng-1
一、BUI框架是干什么用的?
BUI框架是用来构建界面交互的UI和js脚手架。
类似于vue cli。
BUI框架专注webapp开发。
开发者只需关注业务的开发。
界面的布局及交互交给BUI。
开发出来的应用, 可以嵌入微信公众号, 微信小程序webview, 聆客, 钉钉, 淘宝, 支付宝等 平台。
可以跟第三方平台打包成独立应用( Bingotouch , Cordova , Dcloud , APICloud , Appcan 等)。
跨平台展示. 包括Ipad
二、BUI框架本地安装和开发部署简要步骤。
1、下载 nodejs 。如果已经下载node,请跳过。
node下载官方地址:http://nodejs.cn/download
如果是window操作系统,就下载windows安装包。
2、安装 nodejs。如果已经下载node,请跳过。
下载node安装包后,右键,安装。
安装完后,打开命令行工具,输入以下命令,查看是否安装node环境成功。
node -v
npm -v
3、下载BUI单页开发包。
http://www.easybui.com/downloads/source/bui/bui_router_dev_latest.zip
4、解压BUI单页开发包,改文件夹名称为 bui0
这个文件夹当作学习开发包代码用。
也可以当作复制创建新项目的备胎。
飞龙提示,请不要在这里建立项目。
5、复制bui0文件夹内容,改文件夹名称为bui1。
此文件夹是我们的第一个bui项目。
存放路径和文件夹的名称可以自己确定。
存放路径和文件夹名称不要有汉字。
文件夹和文件名也不要以数字开头。
6、转到bui1文件夹。
7、在此bui1文件夹下打开cmd命令行工具
方法:鼠标放在当前文件夹路径里的空白区域,然后输入 cmd,然后回车。
8、命令行工具,输入以下命令,然后回车。
npm install
安装完后,在bui1文件夹下,多了一个 node_modules 文件夹。
里面是项目所依赖的第三方组件。
具体需安装哪些依赖组件,在 package.json里 devDependencies 和 dependencies 有列举。
9、命令行工具,输入以下命令,然后回车。
npm run dev
此命令自动运行启动服务器,完成后,自动打开网页浏览器。
二、了解bui开发包的文件结构内容。
第9步的启动服务器命令的定义,定义在 package.json 的 scripts。
bui1文件夹自动生成dist,编译打包后的输出代码都在这里。
自动生成的.tmp临时文件夹以及 package-lock.json,可以先不管。
浏览器默认访问网址和端口是bui自己配置的,
具体生成过程可查看 gulpfile.js 和 app.json
src目录是开发源代码。前端开发人员主要在这里写代码。
打开src文件夹,了解文件夹结构。
pages里是放页面级模块。当然,也可以放组件级的模块。
根模块是 index.html和index.js
#bui-router 可以改为其它名字,但是要注意,css文件里也需要修改。
默认的页面模块是 pages/main文件夹下的main.html和main.js
在package.json的 package节点,是这个默认的页面模块的定义。
三、bui框架如何创建新的模块,小白简要步骤?
很简单。照葫芦画瓢,飞龙写的简要步骤。
我们准备为main页添加一个焦点切好图模块。
1、转到pages文件夹下,复制 main文件夹,改文件夹名称。
比如 slide。
2、进入slide文件夹,然后把文件改为 slide.html和 slide.js
也可以为其它名称,比如 qiehuan.html和qiehuan.js.
这html和js文件,是一个bui模块的两个构成文件。
这两文件的名字,习惯于与文件夹名称保持一致,但强制。
一个文件夹下也可以放多个模块的构成文件。
3、打开slide.html,输入以下代码,并保存。
4、打开slide.js,输入以下代码,保存。
/**
* 焦点图模块
* 默认模块名: slide
* @return {[object]} [ 返回一个对象 ]
*/
// 定义一个模块
loader.define(function(require, exports, module) {
console.log('000 feilong module=',module);
// 通过模块的id来获取不同的参数, 所有属性的参数都会被拿到.
var params = bui.history.getParams(module.id);
//console.log('000 feilong bui.history=',bui.history);
// 区分不同的接口
var url = "http://localhost/api/"+params.type;
console.log('000 feilong url=',url);
// module.id 如果component没有id则随机生成, 通过外层component生成的id 来区分不同的控件slide
var uiSlide = bui.slide({
id: `#${module.id} .bui-slide`,
height: 380,
autopage: true,
data: []
})
var sucFn=function(res){
// 测试数据
res = [{
image: "images/sli2.jpg",
url: "pages/good/good.html",
},{
image: "images/sli3.jpg",
url: "pages/good/good.html",
},{
image: "images/sli4.jpg",
url: "pages/good/good.html",
}]
// 修改轮播图的数据
uiSlide.option("data",res);
}
// 请求数据后渲染
sucFn();
/*
bui.ajax({
url:url,
success: sucFn
})
*/
})
5、剩下的自己测试和了解吧。
6、自己再增加其它的模块
更新网址:https://feilong.org/bui-jiaocheng-1
最初发布:20211217 06:33:17 feilong.org 于广州
加入收藏夹,查看更方便。
所在分类: bui 教程