低代码实战 | 1分钟，从0到1创建一个简单的微应用

Posted 2022-09-17 优维科技EasyOps

首先，我们来聊聊什么是低代码？⤵

低代码（Low-Code）从字面意思，低就是少，在一般标准或平均程度之下，那低代码自然就是少代码，也就是说不需要付出太多的代码成本。

如果想要从0实现一个可以在Web中访问的网页，那最好要掌握的技术必然是html、Css、javascript，大部分情况下仅仅有了以上三种技术的加持是不够，为了让所生产出来的Web页面有着高维护和高灵活性，一般要根据网页中的功能进行模块划分，以及确定页面的整个层次、结构等，其次再去考虑UI等设计类问题。

通过上述描述可以发现，实现一个Web页面的学习成本，对于一个并不长期从事网页开发的用户来说，这种开发方式所带来的学习成本是较大的；而低代码则不同，它不需要付出太多的代码成本，换句话说，即使零代码基础也可以轻松构建Web页面。

低代码的优点，上手速度快、开发效率高，不需要去考虑高学习成本所带来的负担。有着页面可视化的加持，网页的布局、设计、UI等尽在掌握中。通过托拉拽的方式，可以在最短时间内实现最初的想法和设计，从而不用将过多的精力投入至编程中。

火了很久的低代码，但要是只知道“低代码是什么”，岂不太无趣了。

下面，我们将从0到1，以循序渐进的方式利用优维低代码平台创建一个简单的微应用，并推送到开发环境，查看运行效果，让您快速上手优维低代码平台核心功能

步骤一：创建微应用

首先在Visual Builder的右上角点击新建微应用项目，填写微应用的相关信息。

包括应用图标、应用名称、应用ID、还有应用描述。

点击保存，一个空白的微应用就创建好了。

关于Visual Builder

VisualBuilder，是优维低代码平台的前端开发模块。

提供的功能包括App的项目定义与初始化、前端菜单编排、页面路由设计、UI元素布局、页面可视化预览、页面构件模板管理、页面构件库、后端接口Provider文档、图标库、插画库等等。

在VisualBuilder中，页面的整体开发通过JSON、YAML或者是表单的方式进行配置，用户无需精通HTML、CSS、JavaScript等编程语言，也无需掌握NPM、webpack等前端工程软件，即可轻松开发可实时运行的真实页面。

VisualBuilder内置的构件库包含数百个常用的页面构件，在搭建页面时可以实现非常高效的工程复用，同时通过快速的编排配置可以让构件呈现不同的页面效果以满足不同业务场景。

VisualBuilder常在需求逻辑澄清，原型细节沟通、最终页面交付等多种业务场景下使用。

步骤二：为微应用新建一个页面

点击进入刚才创建的微应用，进入 User Flow 界面，在这里，我们可以为微应用新建路由，每个路由对应一个页面。

这里，我们给微应用添加一个首页。

填入路由别名、路径等相关信息，点击保存。

一个空白的页面就创建成功了。

步骤三：对首页进行简单的编辑

我们可以修改页面的标题。

在主画板选中micro view构件，在弹出的抽屉里，我们可以看到有一个Page Title的属性。

修改这个属性，就可以修改页面标题。

步骤四：为首页添加简单的展示元素

在右上角，我们可以找到构件库，从构件库里面搜索结果构件，点击并拖动构件到主画板中的content插槽，也就是主页面的内容区。

修改 customTitle 和 status 属性，点击保存。

那么页面的基本配置就到此结束了。

点击【构建并推送】按钮，进行构建。构建成功后，再点击【预览】按钮，我们就可以看到页面的具体效果了。

一个简单的页面就创建好了。