體驗應(yīng)用魔方做個抽獎小應(yīng)用丨【玩轉(zhuǎn)應(yīng)用魔方】

AppCube概述

AppCube是一個高效易用的低代碼開發(fā)平臺，它可以進(jìn)行輕應(yīng)用，行業(yè)應(yīng)用，業(yè)務(wù)大屏開發(fā)，它提供的界面、邏輯、對象等可視化編排工具，以“拖、拉、拽”的方式來快速構(gòu)建應(yīng)用，從而實現(xiàn)所見即所得的快速應(yīng)用開發(fā)和構(gòu)建。

這次主要體驗一下輕應(yīng)用的開發(fā)，輕應(yīng)用開發(fā)不涉及復(fù)雜化的代碼，用戶零代碼（如拖曳組件，簡單配置）或者低代碼就能輕松完成應(yīng)用的搭建，它提供了豐富的模板（辦公管理，人事管理，項目管理等），可以直接使用模板進(jìn)行擴(kuò)展開發(fā)，也可以自定義頁面編排開發(fā)業(yè)務(wù)場景，且應(yīng)用支持多端使用。

AppCube輕應(yīng)用開發(fā)

使用AppCube開發(fā)一個華為云抽獎小應(yīng)用，主要是創(chuàng)建布局頁面，頁面樣式，控件屬性，數(shù)據(jù)綁定，模型定義，點擊事件等基礎(chǔ)功能，不涉及服務(wù)編排，服務(wù)接口調(diào)用和其它太復(fù)雜的功能。

打開AppCube平臺

地址：https://www.huaweicloud.com/product/appcube.html

點擊“立即使用”

如果未開通，請先免費開通試用，如果已經(jīng)開通，點擊“進(jìn)入開發(fā)環(huán)境”。

這里就進(jìn)入了開發(fā)環(huán)境，在“項目”里可以看到有輕應(yīng)用、行業(yè)應(yīng)用、業(yè)務(wù)大屏等應(yīng)用開發(fā)，你還可以去“學(xué)習(xí)中心”去學(xué)習(xí)提供的一些案例知識。下方“我的應(yīng)用”可以打開原有開發(fā)好的應(yīng)用。

點擊“輕應(yīng)用”，進(jìn)入后就可以進(jìn)行創(chuàng)建空白輕應(yīng)用，也可以使用提供的應(yīng)用模板創(chuàng)建項目。

點擊“創(chuàng)建空白輕應(yīng)用”，輸入標(biāo)簽名稱，點擊名稱文本框會自動填入標(biāo)簽名稱，其余默認(rèn)，點擊“創(chuàng)建”。

點擊“創(chuàng)建”完成后就進(jìn)入了項目開發(fā)環(huán)境，可以看到左側(cè)有菜單導(dǎo)航，項目目錄，設(shè)置，中間編輯區(qū)。

Logic：主要是創(chuàng)建服務(wù)編排、腳本等業(yè)務(wù)流。

Model：主要是創(chuàng)建對象，試圖對象等數(shù)據(jù)模型。

Page：主要是創(chuàng)建標(biāo)準(zhǔn)頁面和高級頁面等。

點擊Page 文件夾右側(cè)的“+”，點擊“標(biāo)準(zhǔn)頁面”。

默認(rèn)創(chuàng)建空白頁面，輸入標(biāo)簽名稱，點擊名稱文本框會自動填入標(biāo)簽名稱，點擊“添加”；也可以選擇上方“基于模板”去創(chuàng)建。

這樣一個空白頁面就創(chuàng)建好了，就看到了中間編輯區(qū)有了基本組件和頁面內(nèi)容。

在正式拖拽組件之前，我們一定先要熟悉一下所有的組件，每一個是用來干什么的，和我們html開發(fā)的組件有什么區(qū)別，實際上大部分的控件沒有什么區(qū)別。

基本組件包括四類：布局，表單，基本，高級，本次主要用到以下幾個組件：

布局-容器：類似于div，用來結(jié)構(gòu)布局

布局-表格：用來填充數(shù)據(jù)

基本-標(biāo)簽：用來顯示文字內(nèi)容

基本-標(biāo)題：用于標(biāo)題文字

基本-按鈕：用于操作的按鈕

下面就來拖拽布局我們的抽獎頁面，布局分為三個區(qū)域：標(biāo)題欄，抽獎九宮格，表格數(shù)據(jù)去。

抽獎九宮格主要使用按鈕，也可以使用標(biāo)簽來完成。

拖拽容器組件有時候?qū)蛹夑P(guān)系不好控制，可以使用右側(cè)“組件樹”，拖拽節(jié)點修改層級嵌套關(guān)系。

基本布局完成后，并不能使我們所要的結(jié)果，還需要修改控件屬性和自定義樣式來達(dá)到我們所要的效果。

標(biāo)題的樣式可以在右側(cè)屬性里面進(jìn)行設(shè)置，也可以在“高級設(shè)置”的樣式源碼里面編寫。

抽獎九宮格的樣式可以在“樣式代碼”里面自定義樣式名編寫，然后在組件“屬性”的高級設(shè)置，樣式類里面使用自定義的樣式名。

.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; }

抽獎九宮格上顯示的文字信息可以使用數(shù)據(jù)模型動態(tài)控制，也可以寫成靜態(tài)的。

點擊頁面下方“模型視圖”

點擊“新增模型”，輸入模型名稱“PrizeInitData”，點擊“下一步”

這里可以增加模型字段，暫時不新增節(jié)點，直接“下一步”

這里可以增加模型方法，暫時不新增方法，直接“確定”

在創(chuàng)建的模型“?PrizeInitData”，點擊右側(cè)“+”，新增計算節(jié)點，這里創(chuàng)建的屬性在綁定到控件上可以根據(jù)數(shù)據(jù)變化動態(tài)顯示。

新增計算節(jié)點，prize1 – prize8用于綁定到九宮格周圍的8個控件上，顯示獎品信息。

抽獎九宮格屬性數(shù)據(jù)綁定，右側(cè)屬性，點擊屬性值綁定右側(cè)“+”，屬性選擇“顯示名稱”，模型字段選擇創(chuàng)建好模型名稱下面的屬性字段，控件1-8依次添加屬性值的綁定到對應(yīng)的模型字段。

九宮格的模型數(shù)據(jù)已經(jīng)綁定好了，但是并沒有默認(rèn)值，下面就需要進(jìn)行模型初始化賦值，添加頁面的加載事件。

$model.ref("WinningData").setData([]); // 初始化抽獎數(shù)據(jù)信息 $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","中獎信息");

九宮格的“開始抽獎”功能實現(xiàn)，選中組件，右側(cè)事件添加點擊事件，代碼編寫彈出框右上角可以開啟調(diào)試模式。

// 當(dāng)前組件 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'); // 清空上一次結(jié)果 } }) _component.$el.style.cursor="not-allowed"; $model.ref("PrizeResult").setValue("tips","中獎信息"); var num=-1; //獎品序號 var times=parseInt(Math.random()*10+20,10);//隨機秒數(shù)（20-30秒以內(nèi)） var time=0; //當(dāng)前的旋轉(zhuǎn)次數(shù) var speed=100; //轉(zhuǎn)盤轉(zhuǎn)動速度 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);

抽獎表格數(shù)據(jù)就是把每次抽獎的數(shù)據(jù)都保存起來，然后在表格顯示出來。

首先在模型視圖里面創(chuàng)建一個模型“WinningData”，在創(chuàng)建三個計算節(jié)點prize_name，prize_level，user_account

抽獎表格進(jìn)行數(shù)據(jù)綁定，右側(cè)屬性，數(shù)據(jù)綁定選擇創(chuàng)建的數(shù)據(jù)模型“WinningData”，表格列里面就會顯示模型對應(yīng)的屬性列名，可以對列名進(jìn)行排序，屬性配置，刪除。

表格模型的數(shù)據(jù)如何動態(tài)添加，如果沒有接觸過這個平臺的開發(fā)，一下可能想不到簡單的辦法；如果使用JS那肯定非常簡單，定義一個數(shù)組對象把數(shù)據(jù)都保存到里面。我想到的是利用數(shù)據(jù)模型初始化，然后獲取值，在進(jìn)行添加到模型對象里面。

在事件視圖里面，選擇頁面加載事件，添加模型對象的初始化賦值代碼。

然后修改抽獎點擊事件里面的代碼，加入表格模型對象的賦值代碼。

這樣一個簡單的抽獎小應(yīng)用就基本實現(xiàn)了。

配置發(fā)布

左側(cè)設(shè)置里面，點擊“配置”，在菜單樹里面點擊右側(cè)“+”，點擊“添加頁簽”，輸入標(biāo)簽和名稱，選擇創(chuàng)建的頁面名稱，點擊“保存”。其它設(shè)置可以自己嘗試。這一步操作可以在頁面創(chuàng)建好以后就進(jìn)行配置，方面預(yù)覽效果。

點擊左側(cè)“預(yù)覽”，就打開了預(yù)覽頁面。

有關(guān)應(yīng)用魔方AppCube更多的學(xué)習(xí)內(nèi)容可參考：https://support.huaweicloud.com/appcube/index.html

溫馨提示

文章內(nèi)容如果寫的存在問題歡迎留言指出，讓我們共同交流，共同探討，共同進(jìn)步~~~

文章如果對你有幫助，動動你的小手點個贊，鼓勵一下，給我前行的動力。

【玩轉(zhuǎn)應(yīng)用魔方】有獎?wù)魑幕馃徇M(jìn)行中：https://bbs.huaweicloud.com/blogs/306271

應(yīng)用魔方 AppCube

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。