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

zekelove 发表于 2021/11/10 18:17:15 2021/11/10
【摘要】 AppCube是一个高效易用的低代码开发平台,它可以进行轻应用,行业应用,业务大屏开发,它提供的界面、逻辑、对象等可视化编排工具,以“拖、拉、拽”的方式来快速构建应用,从而实现所见即所得的快速应用开发和构建。轻应用开发不涉及复杂化的代码,用户零代码(如拖曳组件,简单配置)或者低代码就能轻松完成应用的搭建,它提供了丰富的模板(办公管理,人事管理,项目管理等),可以直接使用模板进行扩展开发。

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_nameprize_leveluser_account

抽奖表格进行数据绑定,右侧属性,数据绑定选择创建的数据模型WinningData,表格列里面就会显示模型对应的属性列名,可以对列名进行排序,属性配置,删除。

表格模型的数据如何动态添加,如果没有接触过这个平台的开发,一下可能想不到简单的办法;如果使用JS那肯定非常简单,定义一个数组对象把数据都保存到里面。我想到的是利用数据模型初始化,然后获取值,在进行添加到模型对象里面。

在事件视图里面,选择页面加载事件,添加模型对象的初始化赋值代码。

然后修改抽奖点击事件里面的代码,加入表格模型对象的赋值代码。

这样一个简单的抽奖小应用就基本实现了。

配置发布

左侧设置里面,点击“配置”,在菜单树里面点击右侧“+”,点击“添加页签”,输入标签和名称,选择创建的页面名称,点击“保存”。其它设置可以自己尝试。这一步操作可以在页面创建好以后就进行配置,方面预览效果。

点击左侧“预览”,就打开了预览页面。

有关应用魔方AppCube更多的学习内容可参考:https://support.huaweicloud.com/appcube/index.html

温馨提示

文章内容如果写的存在问题欢迎留言指出,让我们共同交流,共同探讨,共同进步~~~

文章如果对你有帮助,动动你的小手点个赞,鼓励一下,给我前行的动力。

【玩转应用魔方】有奖征文火热进行中:https://bbs.huaweicloud.com/blogs/306271

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

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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