作者：木棉花潘颖琳
本文是关于鸿蒙 Web 组件抽奖案例（ArkTS）的学习笔记。
本文分享的案例是 Web 组件如何加载本地 H5 小程序。所加载的页面是一个由 HTML+CSS+JavaScript 实现的完整小应用。
至于加载云端的 H5 小程序，实现步骤类似，可移步至 codelabs-Web 组件抽奖案例细览。
效果图如下：
关键知识概念
Web 组件：提供具有网页显示能力的 Web 组件。访问在线网页时需添加网络权限：ohos.permission.INTERNET。
runJavaScript：异步执行 JavaScript 脚本，并通过回调方式返回脚本执行的结果。
runJavaScript 需要在 loadUrl 完成后，比如 onPageEnd 中调用。
onConfirm：网页调用 confirm() 告警时触发此回调。此案例是用于回显抽奖结果。
创建空项目
选择 HarmonyOS 模板，项目 SDK 选择为 API9，选择模型为 Stage 模型。
如果要加载云端 H5 小程序的话，要记得在 module.json5 文件下添加网络权限：
编写本地 H5 页面
在 src/main/resources/rawfile 下分别创建：
主要代码（抽奖功能实现）：
调用 web 组件
在 pages 文件下创建文件 MainPage 和 WebPage，其中 WebPage 用于调用 web 组件，在 MainPage 中有用到一个自定义属性，觉得蛮有用的，记录一下：
通过 navigator 组件带参跳转至 WebPage 界面，使用 web 组件前要先创建一个 web 控制器，则添加以下代码：
其中，webviewController 要将 IDE 升级到最新版本才能用，是 API9+ 的接口，上述 WebController 接口在最新版本时弃用了。
同时要注意在 EntryAbility.ts 文件下修改：，也要注意查看 main_pages.json 的配置。
WebPage 中主要代码部分：
下方的按钮，异步执行 JavaScript 脚本 startDraw()。
到此，然后就可以运行模拟器 P50 进行调试了！
