TinyEngine 低代码引擎:带你5分钟高效构建游戏登录界面

本文由体验技术团队 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标签,一起参与开源贡献~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/17719.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

143.栈和队列:用队列实现栈(力扣)

题目描述 代码解决 class MyStack { public:queue<int> que; // 定义一个队列用于实现栈// 构造函数&#xff0c;初始化队列MyStack() {}// 向栈中推入元素 xvoid push(int x) {que.push(x); // 使用队列的 push 方法将元素 x 添加到队列尾部}// 从栈中弹出并返回栈顶元…

【MIT 6.5840(6.824)学习笔记】GFS

1 分布式存储系统难点 在设计大型分布式系统或存储系统时&#xff0c;初衷通常是为了获得显著的性能提升&#xff0c;通过数百台计算机的资源来并行完成大量工作。因此&#xff0c;性能问题成为最初的关注点。一个自然的想法是将数据分片&#xff08;Sharding&#xff09;&…

《数字图像处理》笔记/期末复习资料

目录 1 简述二值图像、灰度图像与彩色图像间的区别。 2 图像量化时&#xff0c;如果量化级比较小会出现什么现象&#xff1f;为什么&#xff1f; 3 图像增强的目的是什么&#xff1f; 4 什么是中值滤波&#xff0c;有何特点&#xff1f; 5 叙述高通滤波、低通滤波、带通滤…

区块链技术引领:Web3时代的新网络革命

随着区块链技术的快速发展和不断成熟&#xff0c;人们已经开始意识到它所带来的潜在影响&#xff0c;尤其是在构建一个更加去中心化、安全和透明的互联网时。这个新的互联网时代被称为Web3&#xff0c;它将不再受制于传统的中心化平台&#xff0c;而是更多地依赖于去中心化的网…

Rust最新版安装(v1.78.0+)

系统&#xff1a;Windows 11 专业版 23H2rustc&#xff1a;1.78.0 配置环境变量和设置配置文件 新建文件夹“C:\Rust\Rustup”和“C:\Rust\Cargo”。【以管理员身份运行】打开CMD 设置系统环境变量&#xff0c;如下设置RUSTUP_DIST_SERVER&#xff0c;其余同理 C:\Windows\S…

产线问题排查

CPU过高 使用top命令查看占用CPU过高的进程。 导出CPU占用高进程的线程栈。 jstack pid >> java.txt Java 内存过高的问题排查 1.分析OOM异常的原因&#xff0c;堆溢出&#xff1f;栈溢出&#xff1f;本地内存溢出&#xff1f; 2.如果是堆溢出&#xff0c;导出堆dump&…

前端大文件上传

首先&#xff0c;我们需要使用Blob对象的 slice 方法将文件切分成多个切片。 const CHUNK_SIZE 1024 * 1024; // 我们选择1MB作为每个切片的大小 let file document.getElementById("upload").files[0]; // 得到所选文件 let totalSize file.size; let chunks […

Golang | Leetcode Golang题解之第103题二叉树的锯齿形层序遍历

题目&#xff1a; 题解&#xff1a; func zigzagLevelOrder(root *TreeNode) (ans [][]int) {if root nil {return}queue : []*TreeNode{root}for level : 0; len(queue) > 0; level {vals : []int{}q : queuequeue nilfor _, node : range q {vals append(vals, node.V…

什么是CSTP测试认证,如何通过CSTP认证?

什么是CSTP测试认证&#xff1f; CSTP&#xff08;Certified Software Test Professional&#xff09;认证是由国际软件测试认证委员会&#xff08;International Software Testing Qualifications Board, ISTQB&#xff09;制定的一种专业软件测试认证。该认证旨在提高软件测…

Java中获取运行时资源

Java中获取运行时资源 在Java中&#xff0c;将运行时资源&#xff08;如配置文件、图片、模板文件等&#xff09;放在类路径&#xff08;classpath&#xff09;中的某个位置。 使用getResource()方法 URL resourceUrl getClass().getClassLoader().getResource("confi…

C#算法(15)—求四边形的外接矩形

前言 在上位机软件开发的过程中,我们经常需要一个四边形的外接矩形,这个外接矩形通常有两种一种是正外接矩形,一种是最小面积的最小外接矩形,最常见的应用是我们需要从一个四边形中截取一部分图像,然后对这个截取出来的图像进行处理,下面分别介绍这两种外接矩形的求法 …

物联网架构实例—Ubuntu 安装MySQL

1.ubuntu安装mysql apt-get upgrade apt-get update 安装mysql apt-get install mysql-server Y执行安装后&#xff0c;会来到软件包设置界面. 再次确认设置的密码. 开启mysql的服务 service mysql start 确认是否成功开启mysql service mysql status 确认是否启动成功&a…

Java Object类方法介绍

Object作为顶级类&#xff0c;所有的类都实现了该类的方法&#xff0c;包括数组。 查询Java文档&#xff1a; 1、object.eauqls(): 其作用与 有些类似。 &#xff1a; 是一个比较运算符&#xff0c;而不是一个方法。 ①可以判断基本类型&#xff0c;也可以判断引用类型。 ②若…

gitLab 使用tortoiseGit 克隆新项目 一直提示tortoiseGitPlink输入密码 输完也不生效

问题描述&#xff1a;准备用TortoiseGit拉取gitlab上一个新项目代码&#xff0c;出现tortoiseGitPlink提示让输入密码&#xff0c;输入后又弹出&#xff0c;反复几次&#xff0c;无法down下来代码。 解决方案&#xff1a; 1.找到PuTTYgen工具&#xff0c;打开 2. 点击load 按钮…

Git之创建完美提交

创建完美提交 是否还在把Git当中一个无聊的备份系统吗&#xff1f;是否还在git add .?只要发生修改就塞进提交里&#xff0c;提交会失去很多价值。提交和提交之间的分界很随意。之后再看这些提交&#xff0c;就像再家里翻箱倒柜的找东西&#xff0c;很难找到想要的东西。 整…

山脉数组的峰顶索引 ---- 二分查找

题目链接 题目: 分析: 我们很明显, 可以从峰值位置将数组分成两段, 具有"二段性", 所以可以用二分查找因为arr是山峰数组, 不存在相等的情况如果arr[mid] > arr[mid 1], 说明mid的位置可能是峰值, 移动right mid如果arr[mid] < arr[mid 1], 说明mid的位置…

神奇的一万

在代码界&#xff0c;有个神奇的存在&#xff0c;它叫一万&#xff1a;eval&#xff08;&#xff09;。 这个神奇的一万&#xff0c;在python和JavaScript中都存在&#xff0c;作用也是基本相同的。 Python中的eval函数能将字符串str当成有效的表达式来求值并返回计算结果。 …

vue contextPath的思考

先说我这边的情况&#xff0c;目前项目都是前后端分离开发的&#xff0c;上线有种部署方式&#xff0c;常见的就是前后端分开部署&#xff0c;这是比较常见的&#xff0c;我这边因客户原因&#xff0c;打包一起进行部署比较简单&#xff0c;交付技术运维部方便后期其他现场部署…

qt c++ can通信实现的上位机界面,附源码

qt c can通信实现的上位机界面&#xff0c;附源码

docker ps显示的参数具体是什么意思

1&#xff0c;运行一个容器 docker run -d ubuntu:15.10 /bin/sh -c "while true; do echo hello world; sleep 1; done"这段命令的作用是使用 docker run 命令运行一个基于 ubuntu:15.10 镜像的 Docker 容器&#xff0c;并在容器中执行一个无限循环的命令。 具体解…