This commit is contained in:
yumoqing 2024-05-13 20:51:26 +08:00
parent 2c3bf8b1b5
commit 220eb8bf1a
4 changed files with 135 additions and 0 deletions

View File

@ -8,6 +8,7 @@
* 简单的开发方式,开发者以编写[json数据文件](descjson.md)的形式开发前端应用
## [bricks简介](brief.md)
## [bricks安装](install.md)
## [bricks开发](develop.md)
## [控件介绍](widgets.md)
## [控件描述文件](descjson.md)
## [事件处理](event.md)

34
docs/cn/develop.md Normal file
View File

@ -0,0 +1,34 @@
# bricks开发和测试
## 环境准备
### 后台服务器安装部署
与bricks框架同时开发的[gadget](https://git.kaiyuancloud.cn/yumoqing/gadget)的后台服务器是一个python开发的后台应用服务器。
请按照gadget服务器的安装说明部署后台应用服务器
或者部署其他后台服务器,后台服务器需满足[对后台服务器要求](server.md)
### 将bricks的目标文件复制或链接到后台服务器的web文档根目录下
### index.html
请参照/bricks/header.tmpl和/bricks/footer.tmpl内容编写项目的index.html文件
将项目的root控件放在index.html中
其中可以添加项目自身的css文件项目自己的javascript
可设置的内容请参看[index.html文件内容](index_html.md)
### 用户界面编写
以".ui"后缀的文件命名编写控件描述文件。文件内容请参看[控件描述文件](descjson.md)
并保存在后台服务器的web文件目录下
### 界面调试
用控件文件的url直接调试界面

66
docs/cn/index_html.md Normal file
View File

@ -0,0 +1,66 @@
# index.html文件内容
一个例子
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="http://localhost:9080/bricks/3parties/xterm.css" />
<link href="http://localhost:9080/bricks/3parties/video-js.css" rel="stylesheet" />
<link rel="stylesheet" href="http://localhost:9080/bricks/css/bricks.css">
<!--
在这里插入项目的css文件
-->
<!-- support IE8 (for Video.js versions prior to v7) -->
<script src="http://localhost:9080/bricks/3parties/videojs-ie8.min.js"></script>
</head>
<body>
<!--
在这里添加项目的script脚本
--->
<script src="http://localhost:9080/bricks/3parties/marked.min.js"></script>
<script src="http://localhost:9080/bricks/3parties/xterm.js"></script>
<script src="http://localhost:9080/bricks/3parties/video.min.js"></script>
<script src="http://localhost:9080/bricks/3parties/recorder.wav.min.js"></script>
<!--- <script src="http://localhost:9080/bricks/3parties/videojs-contrib-hls.min.js"></script> --->
<script src="http://localhost:9080/bricks/bricks.js"></script>
<script>
/*
if (bricks.is_mobile()){
alert('wh=' + window.innerWidth + ':' + window.innerHeight);
}
*/
const opts = {
/*
*/
"widget":
/*
以下是root控件的内容
*/
{
"widgettype":"MarkdownViewer",
"options":{
"width":"100%",
"height":"100%",
"navigator":true,
"md_url":"http://localhost:9080/bricks/docs/cn/README.md"
}
}
/*
root控件内容结束
*/
};
const app = new bricks.App(opts);
app.run();
</script>
</body>
</html>
```
说明

View File

@ -1,3 +1,37 @@
# 安装bricks
## 下载bricks
执行以下命令
```
git clone https://git.kaiyauncloud.cn/yumoqing/bricks
```
执行完成后bricks的源码存放在bricks目录中
## 构建和安装
执行以下命令
```
cd bricks
cd bricks
./build.sh
cd ..
ln -s `pwd`/dist $(web根目录}/bricks
```
命令执行完成后构建完成的目标文件在bricks/dist目录中
并将bricks/dist目录复制或链接到web服务器的根文件目录中
## 依赖
bricks框架目前引用如下软件包
* marked.min.js Markdown解析和展示包
* recorder.wav.min.js 跨平台的录音软件包
* video.min.js 跨平台的视频播放软件包
* videojs-ie8.min.js video视频播放器ie8兼容包
* xterm.js web终端软件包
bricks把依赖的第三方软件包放在/bricks/3parties目录下