体验应用魔方做个抽奖小应用丨【玩转应用魔方】
AppCube概述
AppCube是一个高效易用的低代码开发平台,它可以进行轻应用,行业应用,业务大屏开发,它提供的界面、逻辑、对象等可视化编排工具,以“拖、拉、拽”的方式来快速构建应用,从而实现所见即所得的快速应用开发和构建。
这次主要体验一下轻应用的开发,轻应用开发不涉及复杂化的代码,用户零代码(如拖曳组件,简单配置)或者低代码就能轻松完成应用的搭建,它提供了丰富的模板(办公管理,人事管理,项目管理等),可以直接使用模板进行扩展开发,也可以自定义页面编排开发业务场景,且应用支持多端使用。
AppCube轻应用开发
使用AppCube开发一个华为云抽奖小应用,主要是创建布局页面,页面样式,控件属性,数据绑定,模型定义,点击事件等基础功能,不涉及服务编排,服务接口调用和其它太复杂的功能。
打开AppCube平台
地址:https://www.huaweicloud.com/product/appcube.html
点击“立即使用”
如果未开通,请先免费开通试用,如果已经开通,点击“进入开发环境”。
这里就进入了开发环境,在“项目”里可以看到有轻应用、行业应用、业务大屏等应用开发,你还可以去“学习中心”去学习提供的一些案例知识。下方“我的应用”可以打开原有开发好的应用。
点击“轻应用”,进入后就可以进行创建空白轻应用,也可以使用提供的应用模板创建项目。
点击“创建空白轻应用”,输入标签名称,点击名称文本框会自动填入标签名称,其余默认,点击“创建”。
点击“创建”完成后就进入了项目开发环境,可以看到左侧有菜单导航,项目目录,设置,中间编辑区。
Logic:主要是创建服务编排、脚本等业务流。
Model:主要是创建对象,试图对象等数据模型。
Page:主要是创建标准页面和高级页面等。
点击Page 文件夹右侧的“+”,点击“标准页面”。
默认创建空白页面,输入标签名称,点击名称文本框会自动填入标签名称,点击“添加”;也可以选择上方“基于模板”去创建。
这样一个空白页面就创建好了,就看到了中间编辑区有了基本组件和页面内容。
在正式拖拽组件之前,我们一定先要熟悉一下所有的组件,每一个是用来干什么的,和我们html开发的组件有什么区别,实际上大部分的控件没有什么区别。
基本组件包括四类:布局,表单,基本,高级,本次主要用到以下几个组件:
布局-容器:类似于div,用来结构布局
布局-表格:用来填充数据
基本-标签:用来显示文字内容
基本-标题:用于标题文字
基本-按钮:用于操作的按钮
下面就来拖拽布局我们的抽奖页面,布局分为三个区域:标题栏,抽奖九宫格,表格数据去。
抽奖九宫格主要使用按钮,也可以使用标签来完成。
拖拽容器组件有时候层级关系不好控制,可以使用右侧“组件树”,拖拽节点修改层级嵌套关系。
基本布局完成后,并不能使我们所要的结果,还需要修改控件属性和自定义样式来达到我们所要的效果。
标题的样式可以在右侧属性里面进行设置,也可以在“高级设置”的样式源码里面编写。
抽奖九宫格的样式可以在“样式代码”里面自定义样式名编写,然后在组件“属性”的高级设置,样式类里面使用自定义的样式名。
.draw-box{ width: 330px; margin: 0 auto; overflow: hidden; } .draw-box .box-span{ float: left; width: 100px; height: 100px; line-height: 100px; margin: 5px; padding: 0px !important;; background: rgb(22, 186, 236); color: white; text-align: center; } .draw-box .box-span:nth-of-type(4){ position: relative; left: 220px; } .draw-box .box-span:nth-of-type(5){ position: relative; left: 110px; top:110px; } .draw-box .box-span:nth-of-type(6){ position: relative; left: -110px; top:110px; } .draw-box .box-span:nth-of-type(8){ position: relative; left: -110px; top:-110px; } .draw-box .box-span:nth-of-type(9){ cursor: pointer; background: rgb(255, 148, 61); position: relative; left: -110px; top:-110px; } .draw-box .box-span.active{ background: #f69c9f; } .result-tip{ display: inline-block; width: 320px; height: 40px; background-color: rgb(255, 255, 255); border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px 2px; letter-spacing: 2px; text-align: center; line-height: 40px; }
抽奖九宫格上显示的文字信息可以使用数据模型动态控制,也可以写成静态的。
点击页面下方“模型视图”
点击“新增模型”,输入模型名称“PrizeInitData”,点击“下一步”
这里可以增加模型字段,暂时不新增节点,直接“下一步”
这里可以增加模型方法,暂时不新增方法,直接“确定”
在创建的模型“ PrizeInitData”,点击右侧“+”,新增计算节点,这里创建的属性在绑定到控件上可以根据数据变化动态显示。
新增计算节点,prize1 – prize8用于绑定到九宫格周围的8个控件上,显示奖品信息。
抽奖九宫格属性数据绑定,右侧属性,点击属性值绑定右侧“+”,属性选择“显示名称”,模型字段选择创建好模型名称下面的属性字段,控件1-8依次添加属性值的绑定到对应的模型字段。
九宫格的模型数据已经绑定好了,但是并没有默认值,下面就需要进行模型初始化赋值,添加页面的加载事件。
$model.ref("WinningData").setData([]); // 初始化抽奖数据信息 $model.ref("PrizeInitData").setValue("prize1", "谢谢参与"); $model.ref("PrizeInitData").setValue("prize2", "一等奖"); $model.ref("PrizeInitData").setValue("prize3", "谢谢参与"); $model.ref("PrizeInitData").setValue("prize4", "二等奖"); $model.ref("PrizeInitData").setValue("prize5", "谢谢参与"); $model.ref("PrizeInitData").setValue("prize6", "三等奖"); $model.ref("PrizeInitData").setValue("prize7", "谢谢参与"); $model.ref("PrizeInitData").setValue("prize8", "幸运奖"); $model.ref("PrizeResult").setValue("tips","中奖信息");
九宫格的“开始抽奖”功能实现,选中组件,右侧事件添加点击事件,代码编写弹出框右上角可以开启调试模式。
// 当前组件 var _component = context.$component.current; var ref = context.$model.ref; var spans = document.querySelectorAll(".draw-box>.box-span"); spans.forEach(function(el,index){ if(index!=0){ el.classList.remove('active'); // 清空上一次结果 } }) _component.$el.style.cursor="not-allowed"; $model.ref("PrizeResult").setValue("tips","中奖信息"); var num=-1; //奖品序号 var times=parseInt(Math.random()*10+20,10);//随机秒数(20-30秒以内) var time=0; //当前的旋转次数 var speed=100; //转盘转动速度 var timer = null; var prizeName = ""; var prizeLevel = -1; timer = setInterval(function(){ num++; time++; if(num > 7){ num = 0; spans[0].classList.add('active'); spans[7].classList.remove('active'); }else if(num==0){ spans[num].classList.add('active'); spans[7].classList.remove('active'); }else{ spans[num].classList.add('active'); spans[num-1].classList.remove('active'); } if(time>times){ _component.$el.style.cursor="pointer"; clearInterval(timer); var tip = ""; prizeName = spans[num].textContent; if (prizeName == "谢谢参与") { tip = '很遗憾,您未中奖。'; } else { tip = '恭喜您抽中了'+prizeName+'!!!'; } if([1,3,5,7].indexOf(num)>-1){ prizeLevel = num $model.ref("PrizeData").setValue("level",num); } else { prizeLevel = -1 $model.ref("PrizeData").setValue("level",-1); } $model.ref("PrizeResult").setValue("tips",tip); $model.ref("WinningData").getData().push({prize_name:prizeName,prize_level:prizeLevel,user_account:"sun"+num}); } },speed);
抽奖表格数据就是把每次抽奖的数据都保存起来,然后在表格显示出来。
首先在模型视图里面创建一个模型“WinningData”,在创建三个计算节点prize_name,prize_level,user_account
抽奖表格进行数据绑定,右侧属性,数据绑定选择创建的数据模型“WinningData”,表格列里面就会显示模型对应的属性列名,可以对列名进行排序,属性配置,删除。
表格模型的数据如何动态添加,如果没有接触过这个平台的开发,一下可能想不到简单的办法;如果使用JS那肯定非常简单,定义一个数组对象把数据都保存到里面。我想到的是利用数据模型初始化,然后获取值,在进行添加到模型对象里面。
在事件视图里面,选择页面加载事件,添加模型对象的初始化赋值代码。
然后修改抽奖点击事件里面的代码,加入表格模型对象的赋值代码。
这样一个简单的抽奖小应用就基本实现了。
配置发布
左侧设置里面,点击“配置”,在菜单树里面点击右侧“+”,点击“添加页签”,输入标签和名称,选择创建的页面名称,点击“保存”。其它设置可以自己尝试。这一步操作可以在页面创建好以后就进行配置,方面预览效果。
点击左侧“预览”,就打开了预览页面。
有关应用魔方AppCube更多的学习内容可参考:https://support.huaweicloud.com/appcube/index.html
温馨提示
文章内容如果写的存在问题欢迎留言指出,让我们共同交流,共同探讨,共同进步~~~
文章如果对你有帮助,动动你的小手点个赞,鼓励一下,给我前行的动力。
【玩转应用魔方】有奖征文火热进行中:https://bbs.huaweicloud.com/blogs/306271
应用魔方 AppCube
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们微信:Informat_5 处理,核实后本网站将在24小时内删除侵权内容。
相关文章推荐
立即开启你的数字化管理
用心为每一位用户提供专业的数字化解决方案及业务咨询