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

举报
Roberto 发表于 2022/03/04 14:37:25 2022/03/04
【摘要】       接触AppCube是21年某日,接到领导通知,让我了解一下低代码平台——AppCube。      那时在微信公众号的文章里,低代码这个词出现的频率逐渐增多,不过我个人平时没有过多关注这个领域,对低代码了解不多,脑中第一印象可能就是拖拖拽拽。不过根据我以前使用RPA的经验,推测应该是可视化拖拽+代码开发的形式。借着这个机会,正好体验一把。      和大部分技术人员预研新技术一样...


      接触AppCube21年某日,接到领导通知,让我了解一下低代码平台——AppCube

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

     

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

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

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

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

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

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

 


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

       如图,12的区别仅在于,1相当于Vue中的v-model2相当于Vue中的props传值。

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

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

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

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

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

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

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

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


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

 

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

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

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

原文作者:李官振

有删节

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200