第一次接触低代码平台 AppCube，还是有点门槛的

r囧r小猫 2023-09-30 10:46 4阅读 0赞

从华为云官网看到 AppCube 应用魔方，通过简单了解到它是一个可以搭建各种业务流程的低代码平台，之前一直想了解一下低代码平台相关内容，所以有了这一系列的文章。

> 本系列博客将沉浸式的体验 APPCube 相关内容，直到可以实现完全从零开发一款 APP。

### 项目的入口 ###

打开 [https://www.huaweicloud.com/product/appcube.html][https_www.huaweicloud.com_product_appcube.html]，选择立即使用应用魔方 AppCube，即可进入后台管理页面。

![image.png][]

进入主界面之后，各个功能菜单的划分还是比较清楚的，我一眼看到的就是如何创建应用，点击对应卡片之后，会跳转到帮助手册，有助于我们理解 AppCube 如何使用。

![image.png][image.png 1]

切换到项目栏目，然后出现了，果然是低代码平台，**帮您快速** 这几个字非常显眼。

![image.png][image.png 2]

> 我就喜欢快速上手的平台，直接选择轻应用开始。

### 轻应用 ###

进入轻应用平台之后，发现非常多的模板，这些模板应该就是帮我们快速构建轻应用的相关入口了。  
![image.png][image.png 3]

首先映入眼帘的是 【问卷调查（高阶）】模板，那咱必然选择 【问卷调查（低阶）】，下拉果然有。

![image.png][image.png 4]

点击使用模板之后，出现了如下界面，应该是对轻应用基础信息的配置（在此之前，我创建了一个空白模板，所以我的界面如下所示）

![image.png][image.png 5]

上图只有**标签**和**名称**属于必填项，初次使用，除必填外，其余内容保持默认比较好。

由于我使用的笔记本，屏幕分辨率比较小，所以第一次看到**低代码**平台，如下所示：

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5qKm5oOz5qmh55qu5pOm_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

配合之前得到的 [帮助手册][Link 1]，简单对页面有了相关了解。

直接点击左侧的预览（眼睛图标），对模板进行预览，了解到这是一款问卷类轻应用，其中包括一个小的后台管理页面。

关闭预览页面，回到编辑器中，寻找编辑器中的最核心区域，如下图所示：

![image.png][image.png 6]

因为有编码经验，这部分内容非常容易理解，模型文件，页面文件，逻辑文件，应该是这三部分进行的组合。

点击 `Model` 文件夹中的内容，得到的页面让我联想到了数据库软件的相关配置，这里如果对变成一点不了解，很可能上手比较难，但是有编程经验，就简单多了，完美没有门槛。

![image.png][image.png 7]

> 上图就是模型中配置的数据字段

接下来进入 `Page` 文件夹，这里面的操作就非常厉害了，直接拖拽式，让我想起了当年学习 winform 时的场景。

![image.png][image.png 8]

从左侧的**组件**中，拖拽到右侧**页面**中，然后在对组件进行操作。

### 初学阶段难点部分 ###

由于页面是拖拽配置式的，所以我就想要尝试一下不查询手册，看能不能领悟到低代码编程的核心魅力，后来证明低代码不等于简单。

AppCube 完全符合一拖二配原则。

![image.png][image.png 9]

数据绑定过程就是绑定前文提及的自定义对象。

这里我通过编辑获取到了表单组件绑定的对象。  
![image.png][image.png 10]

查看其它组件数据绑定后，得到的结论是表单绑定的是**表**，各个字段被绑定到了单一组件上，而且在页面下部分找到了模型视图，猜测这里可以直接对整个页面进行对象绑定，后续做测试的时候，可以进一步的验证。

![image.png][image.png 11]

组件的其它配置，都是见文知意，很容易理解，不做过多补充说明。

这里还预留下一个未知点，就是模型中出现了一个自定义的 `editFlag`（编辑标识？），无法直接读懂，留待后文解开。

![image.png][image.png 12]

接下来点击 **提交按钮**，右侧切换到**事件**功能面板，找到**自定义代码部分**，这里应该就是保存逻辑，但是打开之后，发现竟然存在代码。（看来低代码字面意思，指的就是这里编写代码）  
![image.png][image.png 13]

系统集成了部分代码提示，用于快速实现代码逻辑，这一点还是非常棒的。

// 获取当前页面
    var pageName = context.$page.params.pageName;
    // TODO: Your business logic
    context.$model.ref("form_1").setData(model);
    context.$model
      .ref("form_1")
      .save()
      .then((data) => {
        
        if (data.resCode == 0) {
        
          $var.recordId = data.result[0] && data.result[0].id;
          // open in current tab
          let queryParam = "recordId=" + $var.recordId + "&page=" + pageName;
          context.$page.loadStdPage("hys__question_submitPage", queryParam);
        }
      });

**提交按钮逻辑相对复杂，重置按钮就比较简单**

// 当前组件
    let _component = context.getCurrentComponent();
    
    // 当前Form
    let _form = _component.getForm();
    
    _form.resetFields();

**问卷呈现**

接下来围绕页面呈现逻辑进行学习，打开 `question_ManagementPage` 页面，界面如下，其中最重要的依旧是数据模型与组件之间的绑定逻辑。

![image.png][image.png 14]

这个页面理解起来难度不大，筛选用户提交的问卷，直接绑定 `hys__question_qR__CST` 模型即可。

### 初次接触 AppCube 感受 ###

1.  低代码平台不等于无代码；
2.  低代码平台的使用，存在上手难度，具备一定的门槛，它面向的应该是有编程经验的人员；
3.  低代码平台借助于模板，可以快速的构建应用，例如本文提及的问卷，直接修改模型和页面元素就可以进行个性化扩展
4.  需要看帮助手册，一定要看。

> 本篇博客为你呈现的是一种接触式的学习思路，你可以按照相同的流程，完整的体验一遍 AppCube，然后再进行初次开发，下一篇博客为你实现一款 WorkingTime 的 AppCube 应用。

[https_www.huaweicloud.com_product_appcube.html]: https://www.huaweicloud.com/product/appcube.html
[image.png]: https://img-blog.csdnimg.cn/img_convert/6b0122abeec043a94e5eae37e8dc1776.png
[image.png 1]: https://img-blog.csdnimg.cn/img_convert/52d9c29dbc96717d64500b737be0b796.png
[image.png 2]: https://img-blog.csdnimg.cn/img_convert/4f3be82ba1b3277eea51261e2897cc2d.png
[image.png 3]: https://img-blog.csdnimg.cn/img_convert/e9f4a4bcc0412b9cb00e5355cb1eafd5.png
[image.png 4]: https://img-blog.csdnimg.cn/img_convert/0b52c81516221ed0a8cf9c34a4801d3c.png
[image.png 5]: https://img-blog.csdnimg.cn/img_convert/60c1ca0877bfcf204644b295190b102d.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5qKm5oOz5qmh55qu5pOm_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/de4faddd68494c0ab076c9d9c196a57c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5qKm5oOz5qmh55qu5pOm,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[Link 1]: https://support.huaweicloud.com/usermanual-appcube/appcube_05_0002.html
[image.png 6]: https://img-blog.csdnimg.cn/img_convert/44c0393f20412dc59900cb198e7ffc05.png
[image.png 7]: https://img-blog.csdnimg.cn/img_convert/6ffa80a5f6f07f2b16c5cc4046a43845.png
[image.png 8]: https://img-blog.csdnimg.cn/img_convert/bd18f29dd98d961763c1da2dcf5dfa29.png
[image.png 9]: https://img-blog.csdnimg.cn/img_convert/a26e1a8e5ed117dea862553f1dd98145.png
[image.png 10]: https://img-blog.csdnimg.cn/img_convert/d0c7b74787cf713f1f607bc09bc4695d.png
[image.png 11]: https://img-blog.csdnimg.cn/img_convert/e9f31da1ddcd84d51196abaf08c336c3.png
[image.png 12]: https://img-blog.csdnimg.cn/img_convert/cc16ed29aa0db08a60a4b42d5a3813e5.png
[image.png 13]: https://img-blog.csdnimg.cn/img_convert/022717e2ae8cca9dac69d2fe41957634.png
[image.png 14]: https://img-blog.csdnimg.cn/img_convert/9a7e2a1224bf3b3b33f6057936567c61.png