| Name | Date | Size | #Lines | LOC | ||
|---|---|---|---|---|---|---|
| .. | - | - | ||||
| AppScope/ | 06-May-2025 | - | 35 | 32 | ||
| entry/ | 06-May-2025 | - | 642 | 565 | ||
| entry2/ | 06-May-2025 | - | 1,813 | 1,501 | ||
| entry3/ | 06-May-2025 | - | 630 | 555 | ||
| entry4/ | 06-May-2025 | - | 1,244 | 1,005 | ||
| entry5/ | 06-May-2025 | - | 1,547 | 1,310 | ||
| hvigor/ | 06-May-2025 | - | 38 | 36 | ||
| screenshots/ | 06-May-2025 | - | ||||
| .gitignore | D | 06-May-2025 | 133 | 12 | 12 | |
| README.md | D | 06-May-2025 | 13.2 KiB | 397 | 267 | |
| build-profile.json5 | D | 06-May-2025 | 2.1 KiB | 100 | 99 | |
| code-linter.json5 | D | 06-May-2025 | 958 | 35 | 34 | |
| hvigorfile.ts | D | 06-May-2025 | 843 | 22 | 5 | |
| oh-package.json5 | D | 06-May-2025 | 834 | 26 | 24 | |
| ohosTest.md | D | 06-May-2025 | 12.1 KiB | 115 | 87 |
README.md
1# Entry: 2 3## 应用侧调用前端页面函数 4 5### 介绍 6 71. 本示例主要介绍应用侧调用前端页面函数，应用侧可以通过runJavaScript()和runJavaScriptExt()方法调用前端页面的JavaScript相关函数。 82. 实现对以下指南文档中 https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/web/web-in-app-frontend-page-function-invoking.md 示例代码片段的工程化，保证指南中示例代码与sample工程文件同源。 9 10### 效果预览 11 12| 主页 | 绿色字体 | 红色字体 | 13| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 14| <img src="screenshots\AppCallFrontendFn_1.png" width="360;" /> | <img src="screenshots\AppCallFrontendFn_2.png" width="360;" /> | <img src="screenshots\AppCallFrontendFn_3.png" width="360;" /> | 15 16使用说明 17 181. 点击 runJavaScript 按钮，文本字体变绿，此操作调用前端 htmlTest() 方法实现。 192. 点击 runJavaScriptCodePassed 按钮，通过向前端传递自定义JavaScript代码改变颜色。 203. 点击 Click Me! 按钮触发前端 callArkTS() 函数，开启交互逻辑，文本字体变红。 21 22### 工程目录 23 24``` 25entry/src/main/ 26|---ets 27|---|---entryability 28|---|---|---EntryAbility.ets 29|---|---pages 30|---|---|---Index.ets // 首页 31|---resources // 静态资源 32|---ohosTest 33|---|---ets 34|---|---|---tests 35|---|---|---|---Ability.test.ets // 自动化测试用例 36``` 37 38 39### 相关权限 40 41无。 42 43# Entry2: 44 45## 前端页面调用应用侧函数 46 47### 介绍 48 491. 实现对以下指南文档中 https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/web/web-in-page-app-function-invoking.md 示例代码片段的工程化，保证指南中示例代码与sample工程文件同源。 50 51### JavaScriptProxy 52 53#### 介绍 54 551. 本示例主要介绍前端页面调用应用侧函数。在Web组件初始化使用javaScriptProxy()接口注册应用侧代码。 56 57#### 效果预览 58 59| 主页 | 触发callArkTS | 60| ------------------------------------------------------------ | ------------------------------------------------------------ | 61| <img src="screenshots\JavaScriptProxy_1.png" width="360;" /> | <img src="screenshots\JavaScriptProxy_2.png" width="360;" /> | 62 63使用说明 64 651. 点击deleteJavaScriptRegister按钮从 Web 端删除已注册对象。 661. 点击Click Me!按钮，触发callArkTS函数。 67 68### Promise_one 69 70#### 介绍 71 721. 本示例主要介绍前端页面调用应用侧函数，Promise使用场景，在应用侧new Promise。 73 74#### 效果预览 75 76| 主页 | 77| ------------------------------------------------------ | 78| <img src="screenshots\Promise_one.png" width="360;" /> | 79 80使用说明 81 821. 点击refresh按钮刷新网页。 832. 点击Register JavaScript To Window按钮将testObj注册到前端。 843. 点击deleteJavaScriptRegister按钮删除Web端注册的testObjName对象。 854. 点击Click Me!按钮，触发callArkTS函数。 86 87### Promise_two 88 89#### 介绍 90 911. 本示例主要介绍前端页面调用应用侧函数，Promise使用场景，在前端页面new Promise。 92 93#### 效果预览 94 95| 主页 | 96| ------------------------------------------------------ | 97| <img src="screenshots\Promise_two.png" width="360;" /> | 98 99使用说明 100 1011. 点击refresh按钮刷新网页。 1022. 点击Register JavaScript To Window按钮将 testObj 注册到前端。 1033. 点击deleteJavaScriptRegister按钮删除Web端注册的testObjName对象。 1044. 点击Click Me!按钮，触发callArkTS函数。 105 106### RegisterJavaScriptProxy 107 108#### 介绍 109 1101. 本示例主要介绍前端页面调用应用侧函数，在Web组件初始化使用registerJavaScriptProxy()接口注册应用侧代码。 111 112#### 效果预览 113 114| 主页 | 触发callArkTS | 115| ------------------------------------------------------------ | ------------------------------------------------------------ | 116| <img src="screenshots\RegisterJavaScriptProxy_1.png" width="360;" /> | <img src="screenshots\RegisterJavaScriptProxy_2.png" width="360;" /> | 117 118使用说明 119 1201. 点击refresh按钮刷新网页。 1212. 点击Register JavaScript To Window按钮将 testObj 注册到前端。 1223. 点击deleteJavaScriptRegister按钮删除Web端注册的testObjName对象。 1234. 点击Click Me!按钮，触发callArkTS函数。 124 125### UsageOfComplexTypes_one 126 127#### 介绍 128 1291. 本示例主要介绍前端页面调用应用侧函数，在应用侧和前端页面之间传递Array。 130 131#### 效果预览 132 133| 主页 | 134| ------------------------------------------------------------ | 135| <img src="screenshots\UsageOfComplexTypes_one.png" width="360;" /> | 136 137使用说明 138 1391. 点击refresh按钮刷新网页。 1402. 点击Register JavaScript To Window按钮将 testObj 注册到前端。 1413. 点击deleteJavaScriptRegister按钮删除Web端注册的testObjName对象。 1424. 点击Click Me!按钮，触发callArkTS函数。 143 144### UsageOfComplexTypes_two 145 146#### 介绍 147 1481. 本示例主要介绍前端页面调用应用侧函数，应用侧和前端页面之间传递基础类型，非Function等复杂类型。 149 150#### 效果预览 151 152| 主页 | 153| ------------------------------------------------------------ | 154| <img src="screenshots\UsageOfComplexTypes_two.png" width="360;" /> | 155 156使用说明 157 1581. 点击refresh按钮刷新网页。 1592. 点击Register JavaScript To Window按钮将 testObj 注册到前端。 1603. 点击deleteJavaScriptRegister按钮删除Web端注册的testObjName对象。 1614. 点击Click Me!按钮，触发callArkTS函数。 162 163### UsageOfComplexTypes_three 164 165#### 介绍 166 1671. 本示例主要介绍前端页面调用应用侧函数，应用侧调用前端页面的Callback。 168 169#### 效果预览 170 171| 主页 | 172| ------------------------------------------------------------ | 173| <img src="screenshots\UsageOfComplexTypes_three.png" width="360;" /> | 174 175使用说明 176 1771. 点击refresh按钮刷新网页。 1782. 点击Register JavaScript To Window按钮将 testObj 注册到前端。 1793. 点击deleteJavaScriptRegister按钮删除Web端注册的testObjName对象。 1804. 点击Click Me!按钮，触发callArkTS函数。 181 182### UsageOfComplexTypes_four 183 184#### 介绍 185 1861. 本示例主要介绍前端页面调用应用侧函数，应用侧调用前端页面Object里的Function。 187 188#### 效果预览 189 190| 主页 | 191| ------------------------------------------------------------ | 192| <img src="screenshots\UsageOfComplexTypes_four.png" width="360;" /> | 193 194使用说明 195 1961. 点击refresh按钮刷新网页。 1972. 点击Register JavaScript To Window按钮将 testObj 注册到前端。 1983. 点击deleteJavaScriptRegister按钮删除Web端注册的testObjName对象。 1994. 点击Click Me!按钮，触发callArkTS函数。 200 201### UsageOfComplexTypes_five 202 203#### 介绍 204 2051. 本示例主要介绍前端页面调用应用侧函数，前端页面调用应用侧Object里的Function。 206 207#### 效果预览 208 209| 主页 | 210| ------------------------------------------------------------ | 211| <img src="screenshots\UsageOfComplexTypes_five.png" width="360;" /> | 212 213使用说明 214 2151. 点击refresh按钮刷新网页。 2162. 点击Register JavaScript To Window按钮将 testObj 注册到前端。 2173. 点击deleteJavaScriptRegister按钮删除Web端注册的testObjName对象。 2184. 点击Click Me!按钮，触发callArkTS函数。 219 220### 工程目录 221 222``` 223entry2/src/main/ 224|---ets 225|---|---entry2ability 226|---|---|---Entry2Ability.ets 227|---|---pages 228|---|---|---Index.ets // 首页 229|---|---|---JavaScriptProxy 230|---|---|---Promise_one 231|---|---|---Promise_two 232|---|---|---RegisterJavaScriptProxy 233|---|---|---UsageOfComplexTypes_one 234|---|---|---UsageOfComplexTypes_two 235|---|---|---UsageOfComplexTypes_three 236|---|---|---UsageOfComplexTypes_four 237|---|---|---UsageOfComplexTypes_five 238|---resources // 静态资源 239|---ohosTest 240|---|---ets 241|---|---|---tests 242|---|---|---|---Ability.test.ets // 自动化测试用例 243``` 244 245 246### 相关权限 247 248[ohos.permission.INTERNET](https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/security/AccessToken/permissions-for-all.md#ohospermissioninternet) 249 250# Entry3: 251 252## 建立应用侧与前端页面数据通道 253 254### 介绍 255 2561. 实现对以下指南文档中 https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/web/web-app-page-data-channel.md 示例代码片段的工程化，保证指南中示例代码与sample工程文件同源。 257 258### 效果预览 259 260| 主页 | 向 HTML 发送消息 | 向 ArkTS 发送消息 | 261| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 262| <img src="screenshots\EstabDataChannel_1.png" width="360;" /> | <img src="screenshots\EstabDataChannel_2.png" width="360;" /> | <img src="screenshots\EstabDataChannel_3.png" width="360;" /> | 263 264使用说明 265 2661. 点击postMessage按钮初始化消息端口。 2672. 点击SendDataToHTML按钮从 ArkTS 向 ETS 发送消息。 2683. 点击SendToEts按钮，从 ETS 向 ArkTS 发送消息。 269 270### 工程目录 271 272``` 273entry3/src/main/ 274|---ets 275|---|---entry3ability 276|---|---|---Entry3Ability.ets 277|---|---pages 278|---|---|---Index.ets // 首页 279|---resources // 静态资源 280|---ohosTest 281|---|---ets 282|---|---|---tests 283|---|---|---|---Ability.test.ets // 自动化测试用例 284``` 285 286 287### 相关权限 288 289无。 290 291# Entry4: 292 293## 应用侧与前端页面的相互调用(C/C++) 294 295### 介绍 296 2971. 实现对以下文档中提供的 https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/web/arkweb-ndk-jsbridge.md 示例代码片段的工程化，保证指南中示例代码与sample工程文件同源。 298 299### 效果预览 300 301| 主页 | 302| ------------------------------------------------------------ | 303| <img src="./screenshots/MutualInvokeCCpp.png" width="360;" /> | 304 305使用说明 306 3071. 点击 runJS hello按钮调用testNapi.runJavaScript。 3082. 点击test Native Development Kit method1 !按钮调用testNdkProxyObjMethod1。 3093. 点击test Native Development Kit method2 !按钮调用testNdkProxyObjMethod2。 310 311### 工程目录 312 313``` 314entry4/src/main/ 315|---cpp // cpp文件夹 316|---ets 317|---|---entry4ability 318|---|---|---Entry4Ability.ets 319|---|---pages 320|---|---|---Index.ets // 首页 321|---resources // 静态资源 322|---ohosTest 323|---|---ets 324|---|---|---tests 325|---|---|---|---Ability.test.ets // 自动化测试用例 326``` 327 328 329### 相关权限 330 331无。 332 333# Entry5: 334 335## 建立应用侧与前端页面数据通道(C/C++) 336 337### 介绍 338 3391. 实现对以下文档中提供中 https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/web/arkweb-ndk-page-data-channel.md 示例代码片段的工程化，保证指南中示例代码与sample工程文件同源。 340 341### 效果预览 342 343| 主页 | 通信 | 344| ------------------------------------------------------------ | ------------------------------------------------------------ | 345| <img src="./screenshots/EstabDataChannelC_C_1.png" width="360;" /> | <img src="./screenshots/EstabDataChannelC_C_2.png" width="360;" /> | 346 347使用说明 348 3491. 点击createNoControllerTagPort按钮ETS侧调用testNapi.createWebMessagePorts("noTag")。 3502. 点击createPort按钮ETS侧调用 testNapi.createWebMessagePorts(this.webTaag)。 3513. 点击setHandler按钮ETS侧调用testNapi.setMessageEventHandler(this.webTag(3)。 3524. 点击setHandlerThread按钮ETS侧调用 testNapi.setMessageEventHandlerThread(this.webTag)。 3535. 点击SendString按钮ETS侧清空h5Log,调用 testNapi.postMessage(this.webTag)，通过消息端口将内容发送到前端页面。 354 355### 工程目录 356 357``` 358entry5/src/main/ 359|---cpp // cpp文件夹 360|---ets 361|---|---entry5ability 362|---|---|---Entry5Ability.ets 363|---|---pages 364|---|---|---Index.ets // 首页 365|---resources // 静态资源 366|---ohosTest 367|---|---ets 368|---|---|---tests 369|---|---|---|---Ability.test.ets // 自动化测试用例 370``` 371 372 373### 相关权限 374 375无。 376 377## 依赖 378 379不涉及。 380 381## 约束与限制 382 3831. 本示例仅支持标准系统上运行，支持设备：RK3568。 3842. 本示例支持API14版本SDK，SDK版本号(API Version 14 Release)。 3853. 本示例需要使用DevEco Studio 版本号(5.0.1Release)才可编译运行。 386 387## 下载 388 389如需单独下载本工程，执行如下命令： 390 391``` 392git init 393git config core.sparsecheckout true 394echo code/DocsSample/ArkWeb/UseFrontendJSApp > .git/info/sparse-checkout 395git remote add origin https://gitee.com/openharmony/applications_app_samples.git 396git pull origin master 397```
