飞龙博客

前端文字教程

BUI框架入门快速上手前端脚手架小白步骤教程

feilong.org 修订于2021-12-17 06:36:28

抽空写这个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,输入以下代码,并保存。

1
<div class="bui-slide"></div>

4、打开slide.js,输入以下代码,保存。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 /**
 * 焦点图模块
 * 默认模块名: 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 教程