体验应用魔方做个抽奖小应用丨【玩转应用魔方】

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。