前言

在当今这个数字化转型加速的时代，企业对于快速开发高质量Web应用程序的需求日益迫切。随着技术栈的多样化和用户需求的不断升级，开发者面临着前所未有的挑战：如何在保证项目高效推进的同时，又能兼顾应用的性能、兼容性与用户体验？正是在这样的背景下，OpenTiny应运而生，为这一系列难题提供了一站式的创新解决方案。

OpenTiny

OpenTiny，作为一套领先的企业级Web前端开发工具集，它不仅仅是技术框架的集合，更是现代开发理念的践行者。其核心组件包括TinyVue——一个跨端、跨框架的高性能UI组件库，以及TinyEngine——一个强大的低代码引擎，它们共同构成了加速Web开发进程的强大基石。更令人瞩目的是，OpenTiny还集成了TinyTheme主题配置系统、TinyPro中后台模板、以及TinyCLI命令行工具等，为开发者提供了全方位的支持与便利。

官网：https://opentiny.design/
B站：https://space.bilibili.com/15284299
公众号：https://mp.weixin.qq.com/s/FYtT_BKlQbkBxeDBrULZhw

本文旨在通过实战演练，深入探讨OpenTiny平台的使用体验，展示如何利用TinyVue组件库与TinyEngine低代码引擎快速构建一个功能丰富、界面美观的Web应用界面。

基于TinyEngine引擎快速构建企业级前端实战

进入官网界面（https://opentiny.design/ ），点击TinyEngine。

选择立即体验

这时候会进入到如下界面，不过这可不是让你付费，而是官方用该低代码工具开发的付费购置界面，我们点击右上角的刷新按钮即可清空。

清空后如下所示，你会发现和华为云的Astro Zero 几乎一模一样。

不过市面上99%的低代码平台样式确实也都是如此，所以不足为怪，我们还是继续实战内容。

这次我们想模仿的主页就是华为云的官方界面，如下：

事先申明，作者本人只是在大学学过一段时间前端，目前也不是专业的前端开发人员，所以在这方面的造诣还是略逊的，最终的效果可能做不到百分百还原。

界面结构拆解

首先我们要对模仿的界面结构进行拆解，以华为云为例：

界面总体是为五个部分,下面我们就采用opentiny在线版，来完成一个初步设计。

第一部分

第一部分对应的是上边栏，里面的要素包含黑色背景、下拉框和按钮。

而我这里是直接将上边栏分为了两块，即下拉框和按钮。

首先放置一个box在第一行。

然后，创建下拉框，选择布局【主轴方向】，【靠右】。

内部的右边距设置为40。

内部字体修改为【选择语言】，设置为白色，背景设置为黑色。

在右边放置一个按钮，命名为【华为云APP】，页边距设置为20

修改背景和边框颜色。

这里有一个坑点，就是在线版中背景默认选择的是黑色，但是实际上展示时还是白色，需要重新进入调色版中选择一次黑色。

还有一个地方有朋友可能会问，为什么这里没有把页面占满？

一开始我也很疑惑，后来发现这里其实是预留的上下滑动栏，方便开发者调试的，所以其实这里是占满了的。

到这里，第一部分内容基本完成，图标的话暂时就不引入了。

第二部分

第二部分对应的是导航栏，主要元素是文本及搜索框组成的。

这里我们同样先创建一个box。

然后依次放入文本，同时注意保持每个字之间间距是要一样的。

我这里设置的【华为云】三个字的格式如下：

后面依次选择行内间距与上一个相差20就可以了。

在中间位置我们需要添加一个搜索框：

这里我们设置页边距150，距离顶部6：

但是很奇怪的是，我这里选择圆角，且设置圆角样式，边框宽度之后，搜索框本身的边框却没有变。

最后发现这个框后面还有一个框。。。确实也不明白为什么。。。

后面这里就没有增加圆角框了，直接换成本来的默认样式了，再依次添加对应文字，最终修改后呈现的效果如下：

至此，第二部分内容基本完成。

第三部分

第三部分只有轮播图，而opentiny中恰好也有这个组件，选择走马图，放置如下位置：

先设置整个走马图框架的高度为400：

左侧选择图片，将图片拖入走马图的所示处：

设置图片大小为1200和400，此时正好占满整个界面

这里需要注意的是，走马图内部其实包含三层，如果单独只设置最外面那一层，里面两层的高度是不会变的，这里也没有同步拉伸的功能，所以需要对三层都依次调整高度。

最终效果如下图所示：

可以适当与导航栏保持一点距离，优化之后好看一些了：

第四部分

第四部分主要也是按钮，具体方法跟上文一致，只是在样式上需要做一下变更。

填写间距如下：

选择背景为灰白色，框内背景为白色，边框线颜色为白色，3px

最终效果如下：

第五部分

第五部分这里就只放了一个文字+图片示例：

无代码中并没有快捷栏的选项，所以这里我也没有放上去：

最终我们来进行一个效果对比

这是华为云的首页：

这是使用opentiny低代码平台20分钟开发的首页：

整体框架上看还是差不多一致的，但是无奈作者本人的美工水平确实有限，所以只能模仿个差不多。

遇到的坑

这里我先说一下结论，就目前我使用的在线版来看，我认为这个工具比华为云的Astro Zero 是差一些的。

首先一个在点击操作上就不是很顺手，有时候框线太细了鼠标很难直接点到，或者有时候组件默认打开就是半透明，点了半天都点不到那个组件上，浪费了很多时间。

第二就是我说的搜索框问题，明明已经选中搜索框了，结果调整的是组件外边框，没有办法直接调整组件内的样式。

第三个就是样式选择问题，我选中一个模式，比如下方的主轴方向：

当我想取消时，应该再点击一下就会默认取消，但是现在的做法是要点击前面的名字来reset

这里其实就有些麻烦了，希望有可能的话能够优化一下。

还有一个很搞笑的，我当时在开发者空间提过的问题，华为云企业级前端解决方案

里面的机器人调用的百度文心一言

而且还调用报错

这里也是顺带一说吧，不涉及到主要功能的优不优化也无伤大雅。

总结

随着本次实战搭建与深度体验的落幕，我们不仅见证了OpenTiny在提升Web开发效率、简化复杂度方面的显著成效，也深刻体会到了其作为新一代企业级开发解决方案的巨大潜力。尤为重要的是，OpenTiny所倡导的低代码乃至无代码开发趋势，正逐步打破技术门槛，让更多的非专业开发者也能参与到数字化建设中来，这无疑是对“技术民主化”的有力推动。

展望未来，随着技术的不断演进和市场需求的持续增长，OpenTiny将持续迭代，融入更多前沿技术，为开发者提供更多创新工具与服务。我们期待OpenTiny能够在更多领域、更广泛的场景下，助力企业与个人开发者创造出更多价值，共同塑造Web开发的下一个辉煌篇章。

我正在参加【有奖征文 第31期】体验OpenTiny带来的前端开发创新模式
链接：https://bbs.huaweicloud.com/blogs/430969