本文由体验技术团队 TinyEngine 项目成员李旭宏创作，欢迎大家实操体验，本体验项目基于 TinyEngine 低代码引擎提供的环境，通过体验简单拖、拉、拽的形式帮助开发者快速了解低代码引擎的使用流程，达到快速开发游戏登录界面的效果。
体验目标
通过体验华为云 TinyEngine 低代码引擎，轻松使用各种组件和图元，帮助开发者高效构建 Web 应用。并通过各种拖拽功能在画布上实现流畅体验，从而深入了解 TinyEngine 低代码引擎的能力。
体验场景
- 现网环境
- 需要安装 chrome、git、pnpm 、VSCode、node.js(16.15.0 版本）
- 网络可以访问 github
- 访问地址：https://github.com/opentiny/tiny-engine
环境搭建
1、在任意盘符新建文件夹，并命名为 project
2、然后打开命令行工具，切换路径到该文件夹。
3、下载代码，执行命令行：git clone https://github.com/opentiny/tiny-engine.git
4、在命令行工具内执行 cd tiny-engine
5、在命令行工具内执行 pnpm install ,并等待命令行的结束(安装过程中如果卡顿，请按回车键)
6、安装完成。
7、启动项目,在命令行工具执行，浏览器会自动打开项目地址 pnpm dev
8、清空画布，开始正式体验之旅。
体验步骤
一、搭建页面
1、拖入 Box 组件布局。
2、书写全局样式。
3、复制以下样式到编辑框，并保存。
body {
background-image: url('https://tinyengine-assets.obs.cn-north-4.myhuaweicloud.com/files/images/image-dragon_3500x2380.jpg');
background-position: 0px 0px;
background-size: 100% auto;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
position: relative;
}
4、拖入登录框布局，并设置样式（包含间距、尺寸、边框）
5、 拖入文本框。
6、如下，设置文本属性为恐龙传奇登录。
7、设置如下样式：点击如下排布布局，设置文本字号为32px,字重为900-B,颜色为#f52424,选择居中对齐。
8、拖入表单组件。
9、设置间距样式。
10、 设置标签位置属性。
11、选中【人员】所在的表单子项，打开【字段名】插槽开关。
12、拖入文本组件。
13、设置文本属性：【账号】
14、设置如下字体样式。
15、【密码】表单子项配置重复步骤 11-14，即完成页面搭建。
二、生成代码
1、打开预览模板工程 git 仓库
opentiny/tiny-engine-generate-preview
2、复制 git 地址或直接下载 ZIP 包到本地。
3、如果使用 git 下载，在指定目录空白处右键，打开【git bash】
4、输入命令。
$ git clone https://github.com/opentiny/tiny-engine-generate-preview.git
5、等待代码下载完成。
6、点击工具栏下载图标，生成代码到本地。
7、选择代码保存的文件夹。
注：建议选择模板工程目录，以便捷替换指定文件
8、弹出允许弹窗，点击【修改文件】
9、选择生成到本地的文件，可选择生成全部或部分，点击【确定】
10、右上角弹出提示：“代码文件保存成功”
11、打开 VSCode，选择打开文件夹，打开模板工程。
12、Ctrl + J 打开终端，安装依赖。
$ npm install
13、依赖安装完成后，运行命令启动。
$ npm run dev
14、打开页面预览。
也欢迎一起参与开发者体验活动赢奖品
：开发者体验活动|TinyEngine 低代码引擎：带你5分钟快速构建游戏登录界面
关于 OpenTiny
OpenTiny 是一套企业级 Web 前端开发解决方案，提供跨端、跨框架、跨版本的 TinyVue 组件库，包含基于 Angular+TypeScript 的 TinyNG 组件库，拥有灵活扩展的低代码引擎 TinyEngine，具备主题配置系统TinyTheme / 中后台模板 TinyPro/ TinyCLI 命令行等丰富的效率提升工具，可帮助开发者高效开发 Web 应用。
欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～
OpenTiny 官网：https://opentiny.design/
OpenTiny 代码仓库：https://github.com/opentiny/
TinyVue 源码：https://github.com/opentiny/tiny-vue
TinyEngine 源码： https://github.com/opentiny/tiny-engine
欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~ 如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~
