• Home
Name Date Size #Lines LOC

..--

AppScope/22-Oct-2025-3532

entry/22-Oct-2025-643567

entry2/22-Oct-2025-1,8561,540

entry3/22-Oct-2025-631557

entry4/22-Oct-2025-1,2591,011

entry5/22-Oct-2025-1,5511,312

hvigor/22-Oct-2025-3836

screenshots/22-Oct-2025-

.gitignoreD22-Oct-2025133 1212

README.mdD22-Oct-202513.2 KiB397267

build-profile.json5D22-Oct-20252.1 KiB10099

code-linter.json5D22-Oct-2025958 3534

hvigorfile.tsD22-Oct-2025843 225

oh-package.json5D22-Oct-2025834 2624

ohosTest.mdD22-Oct-202512.1 KiB11587

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```