开发者说丨如何从零开始构建一个轻量级应用

本文分享自华为云社区《伙伴分享|如何快速开发一个AppCube标准页面》，作者：Roberto。

接触AppCube是21年某日，接到领导通知，让我了解一下低代码平台——AppCube。

那时在微信公众号的文章里，低代码这个词出现的频率逐渐增多，不过我个人平时没有过多关注这个领域，对低代码了解不多，脑中第一印象可能就是拖拖拽拽。不过根据我以前使用RPA的经验，推测应该是可视化拖拽+代码开发的形式。借着这个机会，正好体验一把。

和大部分技术人员预研新技术一样，看文档+做实验。先进入后台，创建了一个测试项目，看了个大概，功能和概念比我想象中的要多和复杂，佩服AppCube团队的技术，毕竟打造一款产品和使用一款产品是两码事。

一遍文档扫下来，增加了一些了解，但实事求是的讲，还是一知半解。

此时初步了解到，AppCube是一个全栈式开发平台，集成了各种服务，从开发到部署，能够真正做到省时省力。就跟做饭一样，根据自己需要加入不同的调料，一顿大餐就完成了。

不过我们这次的开发，使用的是自身的后端服务，所以只需要开发前端部分，我们稍微了解后，便暂时先略过了Appcube后端的一些概念，直接关注前端的两大部分：标准页面+高级页面。

标准页面初步体验下来，学习曲线较平缓，比较适合非IT专业人员进行可视化拖拽和配置。

高级页面初步体验下来，学习曲线相对陡峭，基本上都是需要自己代码开发组件。不过对于开发人员来说，只要文档够详细，案例够清晰，基本上问题不大。

二者都支持vue代码+可视化拖拽和配置，不过标准页面可视化比重更高，高级页面代码比重更高。

我们经过一个小程序项目开发下来，以及参考其他优秀的小程序发现，高级页面开发出来的小程序效果更贴近原生，以及在SPA方面会更加优秀。当然，要分场景来看，根据自身项目的实际情况来选择会更加合适，例如需要快速搭建出一个表单可能就是标准页面的拿手好戏了。

开发过程中，少不了会遇到问题。截止目前，某度某歌等搜索引擎上暂时还没有太多这块的资料，所以主要是查文档、逛论坛、求助工作人员。这里要赞一下AppCube的工作人员们，全程积极响应，热情帮助，这个小程序能开发出来，他们功不可没。

以上是简要总结，以下展开来介绍。

在项目开发之前，出于对各种因素的综合考虑，我们是选择了标准页面来做开发，所以后面只说一下标准页面。

标准页面系统预置的组件比较丰富，出于样式和交互的定制需要，我们主要是引用Vant来开发自定义组件，然后进行拖拽配置。

在开发标准页面之前，先扫一遍标准页面的文档：https://support.huaweicloud.com/usermanual-appcube/appcube_05_0130.html

如下图所示，是标准页面的开发界面，比较清晰明了。

整个界面，左侧是主要菜单区，中间是可视化操作区，右侧主要是配置项。这里右侧的属性、事件和库，其实就类似Vue中的props、methods和import，比较容易理解。还有一个没有在界面中明显展示出来的概念——模型，则感觉是对应了Vue中的data，可以利用模型做数据的双向绑定。

既然这样，那么我就参考Vue中常规内容顺序来一一介绍。

首先是库的导入，也就是Vue中的import，当前标准页面依赖到的库，都要在这里导入，甚至有时候要在跳到此页面的前一个页面导入。截止目前，标准页面暂时不支持库的全局导入，高级页面是可以的。

除了平台内置的库以外，还可以自行封装和导入第三方库，过程参考【如何引入第三方库】https://support.huaweicloud.com/usermanual-appcube/appcube_05_0058.html

需要注意的是，如果导入了A库和B库，请不要在A中依赖B或B中依赖A，因为这里库的导入顺序是无法保证的，至少我之前测试是如此的。

介绍完库的引入，接下来介绍数据部分，与之紧密相关的概念是模型，主要集中在开发界面右侧的属性区。

如图所示，点击值（value）框中的设置图标，可以对模型进行管理，以及将数据和对应的模型做绑定，类似于v-model。

新建模型这里，像我们做纯前端开发的话，就只需要点击创建自定义模型即可。

模型创建完成以后，根据需要，继续新增或者勾选模型及模型下的属性，一但勾选，则表示属性与数据进行了绑定，取消勾选则是去除绑定。

如图，1和2的区别仅在于，1相当于Vue中的v-model，2相当于Vue中的props传值。

接下来是事件，也就是Vue中的methods。平台预置的组件，根据业务需要，一般都有预置的事件，可以在这些事件中做业务开发，甚至调用接口。说到调用接口，在标准页面和高级页面中，其实还有个比较重要的概念——连接器，另外在高级页面中调用接口的还涉及有桥接器，请自行查看文档，因为我们这里也没有使用到。我们是选择封装一个axios库，然后直接在组件的事件中调用接口，目前来看挺方便。

我们有我们的特殊性，只做前端开发，其他一切在自有系统中都做过了，包括接口文档那些。实际开发中，建议查阅文档，以及咨询平台，尽量采用平台推荐的开发方式，避免后期维护出现问题。

再稍微详细点，如下图，如果组件的事件那里没有这个小笔图标，则表示这个组件没有暴露事件出来。反之则组件具备事件，可以通过点击小笔图标，进入到该事件的编辑窗口。

在事件的编辑窗中，左侧内容是平台预置的方法，鼠标单机则会复制对应的方法到剪贴板，在黑色编辑区域粘贴即可使用。也可以将左侧的方法直接拖入到编辑区域中。

编辑器有时候无法识别一些JavaScript的新语法，介绍一个小技巧，在编辑区第一行输入 /*jshint esversion:8*/ 即可解决这个问题，亲测有效，当然可能有更好的办法，欢迎指出。

说完事件，再说样式，也就是Vue中的style区。

如图，在页面的属性区下方，有一个样式配置区，可以通过可视化配置样式，最终生成CSS样式源码出现在最下方的样式源码中。所以对于前端人员来说，可以直接在样式源码中写样式。

在CSS下方，有个不起眼的组件树，也会经常使用到，通常是用于帮助我们精准的选择组件。因为组件有时候会有重叠或遮盖等情况，那时就不方便在可视化区域中点选组件了。展开如下图。

在可视化最下方，有一条菜单，看起来和页面右侧的属性配置区差不多。区别在于，属性那里是基于组件的维度展示的，这里是基于页面的维度展示的。所以维护代码时，合理利用这里的菜单能有效提高一些工作效率。

然后我们点击预览图标，进入到预览页面。

关于AppCube体验的基本介绍就到这里了，AppCube里的功能远不止这么多，要写完恐怕可以出一本书了。总体来说，AppCube功能很全很强大，我们当前体验到的只是一小部分。

最后希望AppCube能够进一步丰富文档、论坛或生态，做大做强，造福行业。

原文作者：李官振

点击关注，第一时间了解华为云新鲜技术~

开发者说丨如何从零开始构建一个轻量级应用相关推荐

从零开始构建一个的asp.net Core 项目（一）
最近突发奇想,想从零开始构建一个Core的MVC项目,于是开始了构建过程. 首先我们添加一个空的CORE下的MVC项目,创建完成之后我们运行一下(Ctrl +F5).我们会在页面上看到"He ...
从零开始构建一个高可靠的RabbitMQ镜像集群
从零开始构建一个高可靠的RabbitMQ镜像集群 1.集群环境节点规划如表所示: 1 集群构建 1.停止MQ服务,首先停止3个节点的服务的命令如下: service rabbitmq-server s ...
为什么谷歌会从零开始构建一个全新的操作系统？
腾讯科技编者按 <快公司>网站日前发表文章,对谷歌开发一个全新操作系统的原因进行了分析,解释了现有操作系统存在的问题,并对谷歌此举的动机进行了推测,以下为原文: 上周,谷歌一个团队做了一件 ...
微软北极服务器,微软正构建一个轻量级的操作系统：代号Polaris
IT之家1月26日消息正式推出Windows 10之时,微软宣布,这将是Windows操作系统的最后一个版本.这意味微软将会把Windows 10作为一项服务,未来不会有"Windows ...
构建一个轻量级的嵌入式虚拟平台，开发工程用板stm32 picoc解释器，大量自定义函数，sarm拓展，lwip移植，nes模拟器移植，系统优化，等等技术的融合
让嵌入式想java一样一处编写到处运行第一次写博客,其实接触嵌入式已经快两年了,从开始学51单片机的时候,怀着满腔的热情.写出了点亮第一个流水灯代码的时候那个无比的激动,到后面自己做许多有趣的东西( ...
使用Spring boot，Thymeleaf，AngularJS从零开始构建一个新的Web应用程序-第1部分
在这一系列博客文章中,我们将使用以下技术堆栈构建完整的响应式Web应用程序: 1)弹簧靴 – Spring MVC网站 – Spring Data JPA –Spring安全 2)Thymeleaf用 ...
使用Spring boot，Thymeleaf，AngularJS从零开始构建一个新的Web应用程序-第3部分
在之前的博客中,我们使用Thymeleaf,Bower和Bootstrap构建了登录页面,并将其部署到了Heroku. 在此博客中,我们将介绍用于前端的AngularJS和在后端的Spring Boo ...
手写一个X86操作系统实战：从零开始构建一个U盘启动的自制操作系统（一）
这个标题可能有点大了:-) 一个操作系统至少应该有自己的文件系统和进程机制,不过我们的最终目标应该是这个~ 无论如何,看完本文,你应该可以手写一段通过U盘启动的在PC上运行的不需要其他软件来协助的自启 ...
python开发框架代码生成_500 行 Python 代码构建一个轻量级爬虫框架
转载:https://www.jqhtml.com/11084.html 既然已经有像 Scrapy 这样优秀的爬虫框架,为何还要造轮子呢?嗯,其实最主要的还是想要将学习到 Python 知识综合起来 ...

开发者说丨如何从零开始构建一个轻量级应用

开发者说丨如何从零开始构建一个轻量级应用相关推荐

最新文章

热门文章