HarmonyOS開發(fā)案例：【W(wǎng)eb組件實(shí)現(xiàn)抽獎(jiǎng)】

介紹

本篇Codelab是基于ArkTS的聲明式開發(fā)范式的樣例，主要介紹了Web組件如何加載本地和云端H5小程序。所加載的頁面是一個(gè)由HTML+CSS+JavaScript實(shí)現(xiàn)的完整小應(yīng)用。樣例主要包含以下功能：

1. web組件加載H5頁面。
2. ArkTS和H5頁面交互。

相關(guān)概念

• [Web]：提供具有網(wǎng)頁顯示能力的Web組件。
• [runJavaScript]：異步執(zhí)行JavaScript腳本，并通過回調(diào)方式返回腳本執(zhí)行的結(jié)果。

相關(guān)權(quán)限

本篇Codelab使用了在線網(wǎng)頁，需要在配置文件module.json5文件里添加網(wǎng)絡(luò)權(quán)限：ohos.permission.INTERNET。

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

約束與限制

本篇Codelab需要搭建服務(wù)端環(huán)境，服務(wù)端搭建流程如下：

1. 搭建nodejs環(huán)境：本篇Codelab的服務(wù)端是基于nodejs實(shí)現(xiàn)的，需要安裝nodejs，如果您本地已有nodejs環(huán)境可以跳過此步驟。
   1. 檢查本地是否安裝nodejs：打開命令行工具（如Windows系統(tǒng)的cmd和Mac電腦的Terminal，這里以Windows為例），輸入node -v，如果可以看到版本信息，說明已經(jīng)安裝nodejs。
      
   2. 如果本地沒有nodejs環(huán)境，您可以去nodejs官網(wǎng)上下載所需版本進(jìn)行安裝配置。
   3. 配置完環(huán)境變量后，重新打開命令行工具，輸入node -v，如果可以看到版本信息，說明已安裝成功。
2. 運(yùn)行服務(wù)端代碼：在本項(xiàng)目的HttpServerOfWeb目錄下打開命令行工具，輸入npm install 安裝服務(wù)端依賴包，安裝成功后輸入npm start點(diǎn)擊回車?？吹健胺?wù)器啟動(dòng)成功！"則表示服務(wù)端已經(jīng)在正常運(yùn)行。
   
3. 構(gòu)建局域網(wǎng)環(huán)境：測試本Codelab時(shí)要確保運(yùn)行服務(wù)端代碼的電腦和測試機(jī)連接的是同一局域網(wǎng)下的網(wǎng)絡(luò)，您可以用您的手機(jī)開一個(gè)個(gè)人熱點(diǎn)，然后將測試機(jī)和運(yùn)行服務(wù)端代碼的電腦都連接您的手機(jī)熱點(diǎn)進(jìn)行測試。
4. 連接服務(wù)器地址：打開命令行工具，輸入ipconfig命令查看本地ip，將本地ip地址復(fù)制到entry/src/main/ets/common/constants/Constants.ets文件下的23行，注意只替換ip地址部分，不要修改端口號(hào)，保存好ip之后即可運(yùn)行Codelab進(jìn)行測試。

環(huán)境搭建

軟件要求

• [DevEco Studio]版本：DevEco Studio 3.1 Release。
• OpenHarmony SDK版本：API version 9。

硬件要求

• 開發(fā)板類型：[潤和RK3568開發(fā)板]。
• OpenHarmony系統(tǒng)：3.2 Release。

環(huán)境搭建

完成本篇Codelab我們首先要完成開發(fā)環(huán)境的搭建，本示例以RK3568開發(fā)板為例，參照以下步驟進(jìn)行：

1. [獲取OpenHarmony系統(tǒng)版本]：標(biāo)準(zhǔn)系統(tǒng)解決方案（二進(jìn)制）。以3.2 Release版本為例：
   
2. 搭建燒錄環(huán)境。
   1. [完成DevEco Device Tool的安裝]
   2. [完成RK3568開發(fā)板的燒錄]
3. 搭建開發(fā)環(huán)境。
   1. 開始前請參考[工具準(zhǔn)備]，完成DevEco Studio的安裝和開發(fā)環(huán)境配置。
   2. 開發(fā)環(huán)境配置完成后，請參考[使用工程向?qū)創(chuàng)建工程（模板選擇“Empty Ability”）。
   3. 工程創(chuàng)建完成后，選擇使用[真機(jī)進(jìn)行調(diào)測]。
   4. 鴻蒙開發(fā)指導(dǎo)文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

代碼結(jié)構(gòu)解讀

本篇Codelab只對(duì)核心代碼進(jìn)行講解，對(duì)于完整代碼，我們會(huì)在gitee中提供。

├──entry/src/main/ets        // 代碼區(qū)
│  ├──common
│  │  └──Constant.ets        // 常量類
│  ├──entryability            
│  │  └──EntryAbility.ts     // 程序入口類
│  └──pages
│     ├──MainPage.ets        // 主頁入口文件
│     └──WebPage.ets         // 抽獎(jiǎng)頁入口文件
├──entry/src/main/resources  
│  ├──base
│  │  ├──element             // 尺寸、顏色、文字等資源文件存放位置
│  │  ├──media               // 媒體資源存放位置
│  │  └──profile             // 頁面配置文件存放位置
│  ├──en_US                  // 國際化英文
│  ├──rawfile                // 本地html代碼存放位置 
│  └──zh_CN                  // 國際化中文
└──HttpServerOfWeb           // 服務(wù)端代碼

`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

H5小程序

抽獎(jiǎng)小程序由HTML+CSS+JS實(shí)現(xiàn)，HTML代碼使用無序列表實(shí)現(xiàn)抽獎(jiǎng)盤頁面布局：

< !-- index.html -- >
< div class="luckyDraw" >
    < !-- 使用無序列表實(shí)現(xiàn)抽獎(jiǎng)盤 -- >
    < ul id="prize" class="prizes" >
        ...
        < li class="prizes-li" >< img class="pic" onclick="startDraw()" src="#" >< /li >
    < /ul >
< /div >

CSS代碼設(shè)置抽獎(jiǎng)盤的樣式：

/* css/index.css */
/* 抽獎(jiǎng)列表 */
.prizes {
    width: 96.5%;
    height: 96.7%;
    position: absolute;
}
...
/* 點(diǎn)擊抽獎(jiǎng) */
.prizes li:nth-of-type(9) {
    width: 34.9%;
    height: 34.6%;
    ...
}
...

JS代碼實(shí)現(xiàn)抽獎(jiǎng)的業(yè)務(wù)邏輯，并返回抽獎(jiǎng)結(jié)果：

// js/index.js
function roll() {
  ...
  // 滿足轉(zhuǎn)圈數(shù)和指定位置就停止
  if (count >= totalCount && (prizesPosition + 1) === index) {
    clearTimeout(timer);
    isClick = true;
    speed = initSpeed;
    // 等待1s打開彈窗
    timer = setTimeout(openDialog, 1000); 
  }
  ...
}

function startDraw() {
  ...
  if (isClick) {
    ...
    roll();
    isClick = false;
  }
}

function openDialog() {
  // confirm返回抽獎(jiǎng)結(jié)果
  confirm(prizesArr[prizesPosition]);
}

Web組件

啟動(dòng)應(yīng)用進(jìn)入首頁，頁面提供兩個(gè)按鈕，分別對(duì)應(yīng)加載本地H5和加載云端H5，點(diǎn)擊按鈕跳轉(zhuǎn)到抽獎(jiǎng)頁面。

// MainPage.ets
Column() {
  ...
  Navigator({ target: WEB_PAGE_URI, type: NavigationType.Push }) {
    Button($r('app.string.loadLocalH5'))
      ...
  }
  .params({ path: LOCAL_PATH, tips: $r('app.string.local') })

  Navigator({ target: WEB_PAGE_URI, type: NavigationType.Push }) {
    Button($r('app.string.loadCloudH5'))
      ...
  }
  .params({ path: CLOUD_PATH, tips: $r('app.string.online') })
}

說明： H5頁面本地存放在resources/rawfile目錄下，通過$rawfile()訪問；云端則存放在HttpServerOfWeb服務(wù)器上，開發(fā)者可以根據(jù)約束與限制章節(jié)服務(wù)端搭建流程進(jìn)行服務(wù)器搭建。

抽獎(jiǎng)頁面主要是由“點(diǎn)擊抽獎(jiǎng)”按鈕和Web組件構(gòu)成。給“點(diǎn)擊抽獎(jiǎng)”按鈕綁定點(diǎn)擊事件，實(shí)現(xiàn)點(diǎn)擊按鈕調(diào)用H5頁面的JavaScript函數(shù)，并且通過onConfirm回調(diào)返回抽獎(jiǎng)結(jié)果，在原生頁面彈窗顯示，完成ArkTS和H5的雙向交互。

// WebPage.ets
Column() {
  ...
  Web({ src: this.params['path'], controller: this.webController })
    ...
    // 網(wǎng)頁調(diào)用confirm()告警時(shí)觸發(fā)此回調(diào)
    .onConfirm((event) = > {
      // 彈窗顯示抽獎(jiǎng)結(jié)果
      AlertDialog.show({
        message: WebConstant.WEB_ALERT_DIALOG_TEXT_VALUE + event.message,
        ...
      })
      return true;
    })
    ...
  Column() {
    Text($r('app.string.textValue'))
      ...
    Text(this.params['tips'])
      ...
  }
  Button($r('app.string.btnValue'))
    ...
    .onClick(() = > {
      // 異步執(zhí)行JavaScript腳本
      this.webController.runJavaScript('startDraw()');
    })
}

審核編輯 黃宇