整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
者：木棉花潘穎琳
本文是關(guān)于鴻蒙 Web 組件抽獎(jiǎng)案例（ArkTS）的學(xué)習(xí)筆記。
本文分享的案例是 Web 組件如何加載本地 H5 小程序。所加載的頁面是一個(gè)由 HTML+CSS+JavaScript 實(shí)現(xiàn)的完整小應(yīng)用。
至于加載云端的 H5 小程序，實(shí)現(xiàn)步驟類似，可移步至 codelabs-Web 組件抽獎(jiǎng)案例細(xì)覽。
https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_HarmonyOS-WebComponent-ArkTS?ha_linker=eyJ0cyI6MTY3NzczNjQ3MjAxOSwiaWQiOiJiNzBiMmI1ODVhY2M0MGY4ODJmZjExYzFhM2QxYzE2NiJ9效果圖如下：
關(guān)鍵知識(shí)概念
Web 組件：提供具有網(wǎng)頁顯示能力的 Web 組件。訪問在線網(wǎng)頁時(shí)需添加網(wǎng)絡(luò)權(quán)限：ohos.permission.INTERNET。
https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-basic-components-web-0000001333720957?ha_linker=eyJ0cyI6MTY3NzczNjcwNTgzMSwiaWQiOiI4ZDBkZTMzZjU1MzY0NDRlYjZkYTQ5MjM1MzcwMjEzZiJ9runJavaScript：異步執(zhí)行 JavaScript 腳本，并通過回調(diào)方式返回腳本執(zhí)行的結(jié)果。
runJavaScript 需要在 loadUrl 完成后，比如 onPageEnd 中調(diào)用。
runJavaScript(options: { script: string, callback?: (result: string)=> void })onConfirm：網(wǎng)頁調(diào)用 confirm() 告警時(shí)觸發(fā)此回調(diào)。此案例是用于回顯抽獎(jiǎng)結(jié)果。
onConfirm(callback: (event?: { url: string; message: string; result: JsResult })=> boolean)創(chuàng)建空項(xiàng)目
選擇 HarmonyOS 模板，項(xiàng)目 SDK 選擇為 API9，選擇模型為 Stage 模型。
如果要加載云端 H5 小程序的話，要記得在 module.json5 文件下添加網(wǎng)絡(luò)權(quán)限：
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
],編寫本地 H5 頁面
在 src/main/resources/rawfile 下分別創(chuàng)建：
主要代碼（抽獎(jiǎng)功能實(shí)現(xiàn)）：
// 旋轉(zhuǎn)函數(shù)
function roll() {
// 速度衰減
speed -=50;
if (speed <=10) {
speed=10;
}
// 每次調(diào)用都去掉全部active類名，即去掉選中單元格的效果
for (let j=0; j < allPrizesLi.length; j++) {
allPrizesLi[j].classList.remove('active');
}
prizesPosition++;
// 計(jì)算轉(zhuǎn)圈次數(shù),每至尾元素則圈數(shù)+1
if (prizesPosition >=allPrizesLi.length - 1) {
prizesPosition=0;
count++;
}
//為當(dāng)前選中的單元格添加active類，以添加選中的效果樣式
allPrizesLi[prizesPosition].classList.add('active');
let initSpeed=500;
let timer; //定義定時(shí)器
let totalCount=5; // 至少轉(zhuǎn)動(dòng)的總?cè)?shù)
// 滿足轉(zhuǎn)圈數(shù)和指定位置就停止
if (count >=totalCount && (prizesPosition + 1)==index) {
clearTimeout(timer);
isClick=true;
speed=initSpeed;
timer=setTimeout(openDialog, 1000); // 等待1s打開彈窗
} else {
timer=setTimeout(roll, speed); // 不滿足條件時(shí)調(diào)用定時(shí)器
// 最后一圈減速
if (count >=totalCount - 1 || speed <=50) {
speed +=100;
}
}
}// 抽獎(jiǎng)開始函數(shù)
function startDraw() {
// 防止抽獎(jiǎng)多次觸發(fā)
if (isClick) {
count=0;
// 隨機(jī)產(chǎn)生中獎(jiǎng)位置
index=Math.floor(Math.random() * prizesArr.length + 1);
roll();
isClick=false;
}
}
function openDialog() {
confirm(prizesArr[prizesPosition]);
}調(diào)用 web 組件
在 pages 文件下創(chuàng)建文件 MainPage 和 WebPage，其中 WebPage 用于調(diào)用 web 組件，在 MainPage 中有用到一個(gè)自定義屬性，覺得蠻有用的，記錄一下：
@Extend(Button) function fancy (top: string) {
.fontSize(16)
.fontColor($r('app.color.start_window_background'))
.width('86.7%')
.height('5.1%')
.margin({ top: top })
.backgroundColor($r('app.color.blue'))
.borderRadius('20')
}Navigator({ target:'pages/WebPage', type: NavigationType.Push }) {
Button($r('app.string.loadLocalH5'))
.fancy('10%')
}
.params({ path:$rawfile('index.html'), tips: $r('app.string.local') })
}通過 navigator 組件帶參跳轉(zhuǎn)至 WebPage 界面，使用 web 組件前要先創(chuàng)建一個(gè) web 控制器，則添加以下代碼：
webController: web_webview.WebviewController=new web_webview.WebviewController();
@State params: object=router.getParams();其中，webviewController 要將 IDE 升級(jí)到最新版本才能用，是 API9+ 的接口，上述 WebController 接口在最新版本時(shí)棄用了。
同時(shí)要注意在 EntryAbility.ts 文件下修改：，也要注意查看 main_pages.json 的配置。
WebPage 中主要代碼部分：
// web組件加載本地H5
Web({ src: this.params['path'], controller: this.webController })
.zoomAccess(false)
.width('93.3%')
.aspectRatio(1)
.margin({ left: '3.3%', right: '3.3%', top:'7.1%'})
.onConfirm((event)=> {
AlertDialog.show({
message: '恭喜您抽中' + `${event.message}`,
confirm: {
value: $r('app.string.web_alert_dialog_button_value'),
action: ()=> {
event.result.handleConfirm();
}
},
cancel: ()=> {
event.result.handleCancel();
}
});
return true;
})下方的按鈕，異步執(zhí)行 JavaScript 腳本 startDraw()。
Button($r('app.string.btnValue'))
.fontSize(16)
.fontColor($r('app.color.start_window_background'))
.margin({ top: '10%' })
.width('86.7%')
.height('5.1%')
.backgroundColor($r('app.color.blue'))
.borderRadius('20')
.onClick(()=> {
this.webController.runJavaScript('startDraw()');
})到此，然后就可以運(yùn)行模擬器 P50 進(jìn)行調(diào)試了！
近年末，又到了各大公司舉辦年會(huì)的時(shí)候了。對(duì)于年會(huì)，大家最關(guān)心的應(yīng)該就是抽獎(jiǎng)了吧？雖然中獎(jiǎng)概率通常不高，但總歸是個(gè)機(jī)會(huì)，期待一下也是好的。
最近，我們部門舉辦了年會(huì)，也有抽獎(jiǎng)環(huán)節(jié)。臨近年會(huì)的前幾天，Boss 突然找到我，說要做一個(gè)抽獎(jiǎng)程序，部門年會(huì)要用。我當(dāng)時(shí)都懵了：就三天時(shí)間，萬一做的程序有bug，豈不是要被現(xiàn)場百十號(hào)人的唾沫給淹死？沒辦法，Boss 看起來對(duì)我很有信心，我也只能硬著頭皮上了。
身為Web前端開發(fā)，自然想到用Web技術(shù)來實(shí)現(xiàn)。本著不重復(fù)造輪子的原則，首先求助Google，Github。搜了一圈好像沒有找到特別好用的程序能直接用的。后來看到一個(gè)Github上的一個(gè)項(xiàng)目，用 TagCanvas 做的抽獎(jiǎng)程序，界面挺好，就是邏輯有問題，點(diǎn)幾次就崩潰了。代碼是不能拿來用了，標(biāo)簽云這種抽獎(jiǎng)形式倒是可以借鑒。于是找來文檔看了下基本用法，很快就集成到頁面里了。
由于設(shè)置頁面涉及多種交互，純手寫太費(fèi)時(shí)間了，直接用框架。平時(shí) Element UI 用得比較多，自然就用它了。考慮到年會(huì)現(xiàn)場可能沒有網(wǎng)絡(luò)，就把框架相關(guān)的JS和CSS都下載到本地，直接引用。為了快速開發(fā)，也沒搭建webpack構(gòu)建工具了，直接在瀏覽器里引入JS。
<link rel="stylesheet" href="css/reset.css" />
<link
rel="stylesheet"
href="js/element-ui@2.4.11/lib/theme-chalk/index.css"
/>
<script src="js/polyfill.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/element-ui@2.4.11/lib/index.js"></script>
<script src="js/member.js"></script>
復(fù)制代碼[{
"name": "二等獎(jiǎng)",
"count": 25,
"award": "辦公室一日游"
}, {
"name": "一等獎(jiǎng)",
"count": 10,
"award": "BMW X5"
}, {
"name": "特等獎(jiǎng)",
"count": 1,
"award": "深圳灣一號(hào)"
}]
復(fù)制代碼參與人列表 members
[{
"id": 1,
"name": "張三"
}, {
"id": 2,
"name": "李四"
}]
復(fù)制代碼待抽獎(jiǎng)人員列表players，是members 的子集
[{
"id": 1,
"name": "張三"
}]
復(fù)制代碼抽獎(jiǎng)結(jié)果列表result，按獎(jiǎng)項(xiàng)順序索引
[[{
"id": 1,
"name": "張三"
}], [{
"id": 2,
"name": "李四"
}]]
復(fù)制代碼條的大佬們，我又來了，今天做個(gè)小東西，用CSS3做一個(gè)骰子玩一玩，具體的代碼我全貼出來了，你們自己也試試。
這里還是要說一下我自己建的前端javascript學(xué)習(xí)群：204436223，不說別的，能進(jìn)我群的沒兩把刷子怎么可能呢，當(dāng)然小白我也挺歡迎，畢竟整天有人大神大神的叫，哈哈，也挺爽，不定期分享干貨。想學(xué)到東西的都可以來，歡迎初學(xué)和進(jìn)階中的小伙伴
抽獎(jiǎng)或游戲之類的動(dòng)畫很多時(shí)候用到擲骰子，一般采用gif圖片格式實(shí)現(xiàn)動(dòng)畫效果。gif圖片占內(nèi)存較大，用戶體驗(yàn)不好，下面用css3實(shí)現(xiàn)的擲骰子效果，骰子點(diǎn)數(shù)、面和轉(zhuǎn)動(dòng)效果都是有css，css3完成的。
效果圖如下
制作過程如下：
一、制作六個(gè)面，如下圖：
完全用css寫出來，為了使其更加真實(shí)，可以讓點(diǎn)數(shù)的圓圈加一些陰影，這一步比較簡單。
二、將六個(gè)面拼成一個(gè)骰子
這一步需要用到css3的transform中rotate和translate。下面的css代碼會(huì)纖細(xì)講到。
三、讓骰子動(dòng)起來
這一步需要用到css3的animation。詳細(xì)看下面css代碼。
1.模板如下：
2.css
最后，我還要說一個(gè)問題，最近老有初學(xué)者問我，學(xué)前端要會(huì)英語嗎？？要數(shù)學(xué)很好嗎？如果是的我不學(xué)了，在這里我可以告訴大家，英語和數(shù)學(xué)只能決定你的高度，和學(xué)習(xí)的能力，并不是說你英語和數(shù)學(xué)不好，前端就學(xué)不好。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
