伙伴分享|如何快速开发一个AppCube标准页面

      接触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能够进一步丰富文档、论坛或生态，做大做强，造福行业。

原文作者：李官振

有删节