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

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