??想了解更多關于開源的內容，請訪問：??
??51CTO 開源基礎軟件社區??
??https://ost.51cto.com??
前言
大家好呀！由于前段時間學業較忙，斷更了一段時間。現在開啟續更！本文是關于web組件抽獎案例（ArkTS）的學習筆記，漫漫學習路，留下筆記鞏固之余又便于溫故而知新~話不多說，以下是我這次的小分享??
概述
本文分享的案例是Web組件如何加載本地H5小程序。所加載的頁面是一個由HTML+CSS+JavaScript實現的完整小應用。至于加載云端的H5小程序，實現步驟類似，可移步至??codelabs-Web組件抽獎案例??細覽。
效果圖如下：
正文
關鍵知識概念
- ??Web組件?? :提供具有網頁顯示能力的Web組件。訪問在線網頁時需添加網絡權限：ohos.permission.INTERNET.
- 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控制器，則添加以下代碼。
其中，webviewController要將IDE升級到最新版本才能用，是API9+的接口，上述WebController接口在最新版本時棄用了。
webController: web_webview.WebviewController = new web_webview.WebviewController();
@State params: object = router.getParams();
同時要注意在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進行調試了！
文章相關附件可以點擊下面的原文鏈接前往下載：
??https://ost.51cto.com/resource/2553??
??https://ost.51cto.com/resource/2556??
??想了解更多關于開源的內容，請訪問：??
??51CTO 開源基礎軟件社區??
??https://ost.51cto.com??
