鴻蒙上實現“抽獎”小程序

者：木棉花潘穎琳

本文是關于鴻蒙 Web 組件抽獎案例（ArkTS）的學習筆記。

本文分享的案例是 Web 組件如何加載本地 H5 小程序。所加載的頁面是一個由 HTML+CSS+JavaScript 實現的完整小應用。

至于加載云端的 H5 小程序，實現步驟類似，可移步至 codelabs-Web 組件抽獎案例細覽。

https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_HarmonyOS-WebComponent-ArkTS?ha_linker=eyJ0cyI6MTY3NzczNjQ3MjAxOSwiaWQiOiJiNzBiMmI1ODVhY2M0MGY4ODJmZjExYzFhM2QxYzE2NiJ9

效果圖如下：

關鍵知識概念

Web 組件：提供具有網頁顯示能力的 Web 組件。訪問在線網頁時需添加網絡權限：ohos.permission.INTERNET。

https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-basic-components-web-0000001333720957?ha_linker=eyJ0cyI6MTY3NzczNjcwNTgzMSwiaWQiOiI4ZDBkZTMzZjU1MzY0NDRlYjZkYTQ5MjM1MzcwMjEzZiJ9

runJavaScript：異步執行 JavaScript 腳本，并通過回調方式返回腳本執行的結果。

runJavaScript 需要在 loadUrl 完成后，比如 onPageEnd 中調用。

runJavaScript(options: { script: string, callback?: (result: string)=> void })

onConfirm：網頁調用 confirm() 告警時觸發此回調。此案例是用于回顯抽獎結果。

onConfirm(callback: (event?: { url: string; message: string; result: JsResult })=> boolean)

創建空項目

選擇 HarmonyOS 模板，項目 SDK 選擇為 API9，選擇模型為 Stage 模型。

如果要加載云端 H5 小程序的話，要記得在 module.json5 文件下添加網絡權限：

"requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ],

編寫本地 H5 頁面

在 src/main/resources/rawfile 下分別創建：

文件夾 img 用于存放抽獎展示的圖片資源
文件 index.html 用于編寫頁面布局
css 文件夾下再創建文件 index.css，用于編寫組件的樣式
js 文件夾下再創建文件 index.js，用于編寫抽獎的函數處理

主要代碼（抽獎功能實現）：

// 旋轉函數
function roll() {
    // 速度衰減
    speed -=50;
    if (speed <=10) {
        speed=10;
    }

    // 每次調用都去掉全部active類名，即去掉選中單元格的效果
    for (let j=0; j < allPrizesLi.length; j++) {
        allPrizesLi[j].classList.remove('active');
    }
    prizesPosition++;

    // 計算轉圈次數,每至尾元素則圈數+1
    if (prizesPosition >=allPrizesLi.length - 1) {
        prizesPosition=0;
        count++;
    }

    //為當前選中的單元格添加active類，以添加選中的效果樣式
    allPrizesLi[prizesPosition].classList.add('active');
    let initSpeed=500;
    let timer;  //定義定時器
    let totalCount=5; // 至少轉動的總圈數

    // 滿足轉圈數和指定位置就停止
    if (count >=totalCount && (prizesPosition + 1)==index) {
        clearTimeout(timer);
        isClick=true;
        speed=initSpeed;
        timer=setTimeout(openDialog, 1000); // 等待1s打開彈窗
    } else {
        timer=setTimeout(roll, speed); // 不滿足條件時調用定時器
        // 最后一圈減速
        if (count >=totalCount - 1 || speed <=50) {
            speed +=100;
        }
    }
}

// 抽獎開始函數
function startDraw() {
    // 防止抽獎多次觸發
    if (isClick) {
        count=0;

        // 隨機產生中獎位置
        index=Math.floor(Math.random() * prizesArr.length + 1);
        roll();
        isClick=false;
    }
}

function openDialog() {
    confirm(prizesArr[prizesPosition]);
}

調用 web 組件

在 pages 文件下創建文件 MainPage 和 WebPage，其中 WebPage 用于調用 web 組件，在 MainPage 中有用到一個自定義屬性，覺得蠻有用的，記錄一下：

@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 組件帶參跳轉至 WebPage 界面，使用 web 組件前要先創建一個 web 控制器，則添加以下代碼：

webController: web_webview.WebviewController=new web_webview.WebviewController();
  @State params: object=router.getParams();

其中，webviewController 要將 IDE 升級到最新版本才能用，是 API9+ 的接口，上述 WebController 接口在最新版本時棄用了。

同時要注意在 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;
            })

下方的按鈕，異步執行 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()');
            })

到此，然后就可以運行模擬器 P50 進行調試了！

近年末，又到了各大公司舉辦年會的時候了。對于年會，大家最關心的應該就是抽獎了吧？雖然中獎概率通常不高，但總歸是個機會，期待一下也是好的。

最近，我們部門舉辦了年會，也有抽獎環節。臨近年會的前幾天，Boss 突然找到我，說要做一個抽獎程序，部門年會要用。我當時都懵了：就三天時間，萬一做的程序有bug，豈不是要被現場百十號人的唾沫給淹死？沒辦法，Boss 看起來對我很有信心，我也只能硬著頭皮上了。

需求

要一個設置頁面，包括設置獎項、參與人員名單等。
如果單個獎項中獎人數過多，可分批抽取，每批人數可設置。
默認按獎項順序抽獎，也可選定某個獎項開始。
可刪除沒到場的中獎者，同時可再次抽取以作替補。
可在任意獎項之間切換，可查中獎記錄名單
支持撤銷當前輪次的抽獎結果，重新抽取。

實現

身為Web前端開發，自然想到用Web技術來實現。本著不重復造輪子的原則，首先求助Google，Github。搜了一圈好像沒有找到特別好用的程序能直接用的。后來看到一個Github上的一個項目，用 TagCanvas 做的抽獎程序，界面挺好，就是邏輯有問題，點幾次就崩潰了。代碼是不能拿來用了，標簽云這種抽獎形式倒是可以借鑒。于是找來文檔看了下基本用法，很快就集成到頁面里了。

由于設置頁面涉及多種交互，純手寫太費時間了，直接用框架。平時 Element UI 用得比較多，自然就用它了。考慮到年會現場可能沒有網絡，就把框架相關的JS和CSS都下載到本地，直接引用。為了快速開發，也沒搭建webpack構建工具了，直接在瀏覽器里引入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>
復制代碼

先設計數據結構。獎項列表 awards

[{
    "name": "二等獎",
    "count": 25,
    "award": "辦公室一日游"
}, {
    "name": "一等獎",
    "count": 10,
    "award": "BMW X5"
}, {
    "name": "特等獎",
    "count": 1,
    "award": "深圳灣一號"
}]

復制代碼

參與人列表 members

[{
  "id": 1,
  "name": "張三"
}, {
  "id": 2,
  "name": "李四"
}]
復制代碼

待抽獎人員列表players，是members 的子集

[{
  "id": 1,
  "name": "張三"
}]
復制代碼

抽獎結果列表result，按獎項順序索引

[[{
    "id": 1,
    "name": "張三"
}], [{
    "id": 2,
    "name": "李四"
}]]

復制代碼

設置頁面包括獎項設置和參與人員列表。

抽獎頁面

老男孩老師特別為大家準備了學習AI人工智能的干貨禮包，后臺私信1可獲取5000G珍藏大禮包（培訓視頻、精選軟件、內部資料）~讓我們一起讓IT學習更簡單！

條的大佬們，我又來了，今天做個小東西，用CSS3做一個骰子玩一玩，具體的代碼我全貼出來了，你們自己也試試。

這里還是要說一下我自己建的前端javascript學習群：204436223，不說別的，能進我群的沒兩把刷子怎么可能呢，當然小白我也挺歡迎，畢竟整天有人大神大神的叫，哈哈，也挺爽，不定期分享干貨。想學到東西的都可以來，歡迎初學和進階中的小伙伴

抽獎或游戲之類的動畫很多時候用到擲骰子，一般采用gif圖片格式實現動畫效果。gif圖片占內存較大，用戶體驗不好，下面用css3實現的擲骰子效果，骰子點數、面和轉動效果都是有css，css3完成的。

效果圖如下

制作過程如下：

一、制作六個面，如下圖：

完全用css寫出來，為了使其更加真實，可以讓點數的圓圈加一些陰影，這一步比較簡單。

二、將六個面拼成一個骰子

這一步需要用到css3的transform中rotate和translate。下面的css代碼會纖細講到。

三、讓骰子動起來

這一步需要用到css3的animation。詳細看下面css代碼。

1.模板如下：

2.css

最后，我還要說一個問題，最近老有初學者問我，學前端要會英語嗎？？要數學很好嗎？如果是的我不學了，在這里我可以告訴大家，英語和數學只能決定你的高度，和學習的能力，并不是說你英語和數學不好，前端就學不好。

如果想看到更加系統的文章和學習方法經驗可以關注我的微信公眾號：‘web前端課程’關注后回復‘給我資料’可以領取一套完整的學習視頻

在線咨詢

上一篇：30分鐘輕松制作HTML5交互動畫（視頻連載）
下一篇：抽獎轉盤實現（vue + js + html + l

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

鴻蒙上實現“抽獎”小程序

需求

實現

老男孩老師特別為大家準備了學習AI人工智能的干貨禮包，后臺私信1可獲取5000G珍藏大禮包（培訓視頻、精選軟件、內部資料）~讓我們一起讓IT學習更簡單！

如果想看到更加系統的文章和學習方法經驗可以關注我的微信公眾號：‘web前端課程’關注后回復‘給我資料’可以領取一套完整的學習視頻

您的項目需求