1# Web开发常见问题
2
3
4## H5页面如何与ArkTS交互(API 10)
5
6**问题现象**
7
8目前javaScriptProxy仅支持同步调用,异步调用无法获取执行结果。
9
10**解决措施**
11
12对javaScriptProxy和runJavaScript封装,实现JSBridge通信方案。适用于H5调用原生侧函数。使用Web组件javaScriptProxy将原生侧接口注入到H5的window对象上,通过runJavaScript接口执行JS脚本到H5中,并在回调中获取脚本执行结果。具体调用流程如下图所示:
13
14![image5](figures/image5.png)
15
16- 首先通过Web组件的javaScriptProxy属性,将JSBridgeHandle对象注册到H5的window上,作为H5调用原生的通道。当H5开始加载时,在onPageBegin生命周期中调用initJSBridge()方法初始化JSBridge。
17  ```
18  // javaScriptProxy对象
19  public get javaScriptProxy() {
20      return {
21          object: {
22              call: this.call
23          },
24          name: "JSBridgeHandle",
25          methodList: ['call'],
26          controller: this.controller,
27      }
28  }
29  ```
30
31  ```
32  // 使用Web组件加载H5页面
33  @Component
34  struct JsProxy {
35    private controller: WebviewController = new WebView.WebviewController()
36    private jsBridge: JSBridge = new JSBridge(this.controller)
37    build() {
38      Column(){
39        Web({ src: $rawfile('index.html'), controller: this.controller })
40          .javaScriptProxy(this.jsBridge.javaScriptProxy)
41          .onPageBegin(() => {
42            this.jsBridge.initJSBridge()
43          })
44      }
45    }
46  }
47  ```
48
49- 在initJSBridge方法中,通过webviewControll.runJavaScript()将JSBridge初始化脚本注入H5执行。当H5调用时,生成window.callID标识回调函数,将callID与调用参数使用JSBridgeHandle.call传到原生侧。通过JSBridgeCallback接收原生侧执行的结果,根据callID找到对应callback执行并且释放内存。
50  ```
51  // bridgeKey与bridgeMethod动态生成H5侧调用的入口
52  bridgeKey: string = 'JSBridge'
53  bridgeMethod: string = 'call'
54  // 初始化脚本注入H5侧
55  public initJSBridge() {
56      try {
57          this.controller.runJavaScript(`
58              // 接收原生侧结果,执行callback
59              function JSBridgeCallback(id, params){
60                  window.JSBridgeMap[id](params)
61              };
62              // 声明调用入口
63              window.${this.bridgeKey} = {
64                  ${this.bridgeMethod}(method, params, callback){
65                      window.JSBridgeMap[id] = callback || (() => {});
66                      JSBridgeHandle.call(method, JSON.stringify(paramsObj));
67                  },
68              }`)
69      }
70  }
71  ```
72
73- JSBridgeHandle.call()是H5调用原生接口的统一入口,在该方法中根据H5调用的方法名,匹配到对应接口去调用。调用结束后通过this.callback()方法将调用结果返回H5。callback方法中使用webviewControll.runJavaScript()调用H5的JSBridgeCallback回传callID和调用结果。
74  ```
75  // call方法调用原生侧方法,接收结果
76  private call = (fun, params) => {
77      try {
78          const paramsObj = JSON.parse(params)
79          const events = this.exposeManage.methodMap.get(fun)
80          const results = []
81          events.forEach(callFun => {
82              results.push(callFun(paramsObj.data))
83          })
84          Promise.all(results.filter(i => !!i)).then(res => {
85              this.callback(paramsObj.callID, res.length > 1 ? res : res[0])
86          })
87      }
88  }
89
90  // 通过runJavaScript调用JSBridgeCallback执行回调
91  private callback(id, data) {
92      this.controller.runJavaScript(`__JSBridgeCallback__("${id}", ${JSON.stringify(data)})`);
93  }
94  ```
95
96
97## Web组件的onUrlLoadIntercept返回结果是否影响onInterceptRequest(API 9)
98
99**解决措施**
100
101Web组件的onUrlLoadIntercept的不同返回结果对应不同的操作:
102
103- onUrlLoadIntercept返回true则直接拦截URL请求。
104
105- onUrlLoadIntercept返回false走onInterceptRequest回调。
106
107**参考链接**
108
109[onUrlloadIntercept](../reference/apis-arkweb/ts-basic-components-web.md#onurlloadinterceptdeprecated)
110
111
112## 为什么Web组件的onKeyEvent键盘事件不生效(API 9)
113
114**问题现象**
115
116Web组件设置onKeyEvent监听键盘事件,键盘按下或抬起该事件不触发。
117
118**解决措施**
119
120onKeyEvent为通用事件,当前Web组件不支持通用事件。Web组件监听键盘事件可以使用onInterceptKeyEvent回调函数。
121
122**参考链接**
123
124[onInterceptKeyEvent](../reference/apis-arkweb/ts-basic-components-web.md#oninterceptkeyevent9)
125
126
127## onInterceptRequest拦截URL并自定义HTML文件,页面加载失败(API 9)
128
129**问题现象**
130
131onInterceptRequest拦截页面Web的src的链接后返回自定义HTML,但是自定义HTML文件里面的script标签里的内容没有加载。
132
133**解决措施**
134
135设置拦截器时,如果只设置setResponseData,内核将无法识别到这是个HTML文件,需要同时设置setResponseEncoding、setResponseMimeType、setResponseHeader等参数。
136
137**代码示例**
138
139```
140Web({ src: 'www.example.com', controller: this.controller })
141  .onInterceptRequest((event) => {
142    console.log('url:' + event.request.getRequestUrl())
143    this.responseweb = new WebResourceResponse();
144    var head1:Header = {
145      headerKey:"Connection",
146      headerValue:"keep-alive"
147    }
148    var length = this.heads.push(head1)
149    this.responseweb.setResponseHeader(this.heads)
150    this.responseweb.setResponseData(this.webdata)
151    this.responseweb.setResponseEncoding('utf-8')
152    this.responseweb.setResponseMimeType('text/html')
153    this.responseweb.setResponseCode(200)
154    this.responseweb.setReasonMessage('OK')
155    return this.responseweb
156})
157```
158
159**参考链接**
160
161[WebResourceResponse](../reference/apis-arkweb/ts-basic-components-web.md#webresourceresponse)
162
163
164## 如何在ArkTS代码中执行HTML内的JS函数(API 9)
165
166**解决措施**
167
168通过WebviewController中runJavaScript方法异步执行JavaScript脚本,并通过回调方式获取执行结果。
169
170> **说明:**
171> runJavaScript需要在loadUrl完成后,比如onPageEnd中调用。
172
173**参考链接**
174
175[runJavaScript](../reference/apis-arkweb/js-apis-webview.md#runjavascript)
176
177
178## 使用Web组件加载本地网页时,如何在本地网页中调用ArkTS中的函数(API 9)
179
180**解决措施**
181
1821. 准备一个html文件,例如:
183
184   ```
185   <!DOCTYPE html>
186   <html lang="en">
187   <head>
188       <meta charset="UTF-8">
189       <meta http-equiv="X-UA-Compatible" content="IE=edge">
190       <meta name="viewport" content="width=device-width, initial-scale=1.0">
191       <title>Document</title>
192   </head>
193   <body>
194       <h1>标题</h1>
195       <h5 id="h5"></h5>
196       <h5 id = "h6"></h5>
197       <button onclick="handleFromH5">调用Arkts的方法</button>
198       <script type="text/javascript">
199           function handleFromH5(){
200               let result = window.objName.test();
201               document.getElementById('h6').innerHTML = result;
202           }
203       </script>
204   </body>
205   </html>
206   ```
207
2082. 在ArkTs中使用JavaScriptProxy方法将ArkTs里的对象注册到H5的window对象中,然后在h5中使用window对象调用该方法。比如下面例子,在ArkTs中将testObj这个对象以别名objName注册到h5的window对象上,在上面的h5中就可以使用window.objName去访问这个对象。
209
210   ```
211   // xxx.ets
212   import web_webview from '@ohos.web.webview'
213   @Entry
214   @Component
215   struct Index {
216     @State message: string = 'Hello World'
217     controller: web_webview.WebviewController = new web_webview.WebviewController()
218     testObj = {
219       test: (data1, data2, data3) => {
220         console.log("data1:" + data1);
221         console.log("data2:" + data2);
222         console.log("data3:" + data3);
223         return "AceString";
224       },
225       toString: () => {
226         console.log('toString' + "interface instead.");
227       }
228     }
229     build() {
230       Row() {
231         Column() {
232           Web({ src:$rawfile('index.html'), controller:this.controller })
233             .javaScriptAccess(true)
234             .javaScriptProxy({
235               object: this.testObj,
236               name: "objName",
237               methodList: ["test", "toString"],
238               controller: this.controller,
239            })
240         }
241         .width('100%')
242       }
243       .height('100%')
244     }
245   }
246   ```
247
248**参考链接**
249
250[javaScriptProxy](../reference/apis-arkweb/ts-basic-components-web.md#javascriptproxy)
251
252
253## Web组件domStorageAccess属性设置(API 9)
254
255**解决措施**
256
257设置是否开启文档对象模型存储接口(DOM Storage API)权限,默认未开启,控制web网页中localStorage的使用,对sessionStorage未做控制
258
259**参考链接**
260
261[domStorageAccess](../reference/apis-arkweb/ts-basic-components-web.md#domstorageaccess)
262
263
264## 如何解决Web组件加载的HTML页面内检测网络状态失败(API 9)
265
266**问题现象**
267
268在HTML页面内通过window.navigator.onLine获取网络状态,联网和断网情况下均为false。
269
270**解决措施**
271
272配置应用获取网络信息权限: ohos.permission.GET_NETWORK_INFO
273
274**参考链接**
275
276[GET\_NETWORK\_INFO](../security/AccessToken/permissions-for-all.md#ohospermissionget_network_info)
277
278
279## 如何自定义拼接设置UserAgent参数(API 9)
280
281**解决措施**
282
283默认UserAgent需要通过WebviewController获取。WebviewController对象必须在Web组件绑定后,才能调用WebviewController上的方法getUserAgent获取默认UserAgent。因此在页面加载前通过自定义字符串拼接修改UserAgent,可采用此方式:
284
2851. 使用\@State定义初始UserAgent,绑定到Web组件;
286
2872. 在Web组件的onUrlLoadIntercept回调中,通过WebviewController.getUserAgent()获取默认UserAgent,并修改Web组件绑定的UserAgent
288
289**代码示例**
290
291```
292import web_webview from '@ohos.web.webview'
293@Entry
294@Component
295struct Index {
296  private controller: web_webview.WebviewController = new web_webview.WebviewController()
297  @State userAgentPa: string = ''
298  build() {
299    Row() {
300      Column() {
301        Web({ src: 'http://www.example.com', controller: this.controller }) //需要手动替换为真实网站
302          .width('100%')
303          .userAgent(this.userAgentPa)
304          .onUrlLoadIntercept((event) => {
305            let userAgent = this.controller.getUserAgent();
306            this.userAgentPa = userAgent + ' 111111111'
307            return false;
308          })
309      }
310      .width('100%')
311    }
312    .height('100%')
313  }
314}
315```
316
317**参考链接**
318
319[userAgent](../reference/apis-arkweb/ts-basic-components-web.md#useragentdeprecated)、[getUserAgent](../reference/apis-arkweb/js-apis-webview.md#getuseragent)
320
321
322## Web组件中如何通过手势滑动返回上一个Web页面(API 9)
323
324**解决措施**
325
326通过重写onBackPress函数来自定义返回逻辑,使用WebviewController判断是否返回上一个Web页面。
327
328**示例代码**
329
330```
331import web_webview from '@ohos.web.webview';
332@Entry
333@Component
334struct Index {
335  controller: web_webview.WebviewController = new web_webview.WebviewController();
336  build() {
337    Column() {
338      Web({ src: 'http://www.example.com', controller: this.controller })//需要手动替换为真实网站
339    }
340  }
341  onBackPress() {
342    // 当前页面是否可前进或者后退给定的step步(-1),正数代表前进,负数代表后退
343    if (this.controller.accessStep(-1)) {
344      this.controller.backward(); // 返回上一个web页
345      // 执行用户自定义返回逻辑
346      return true
347    } else {
348      // 执行系统默认返回逻辑,返回上一个page页
349      return false
350    }
351  }
352}
353```
354
355**参考链接**
356
357[accessStep](../reference/apis-arkweb/js-apis-webview.md#accessstep)
358
359
360## WebView支持同层渲染吗(API 10)
361
362**解决措施**
363
3641. 支持Video、Map、Camera、Canvas、WebGL、WebView组件同层渲染。
3652. 支持将Web embed标签的id、type、src、width、height、url属性传递给原生组件。
366
367
368## WebView有哪些调试工具,调试工具的用法是什么(API 10)
369
370**解决措施**
371
372setWebDebuggingAccess()接口开启Web组件前端页面调试能力,利用DevTools工具可以在2in1上调试移动设备上的前端网页,设备需为4.1.0及以上版本。
373
374**参考链接**
375
376[使用Devtools工具调试前端页面(开发指南)](../web/web-debugging-with-devtools.md)
377
378
379## WebView如何实现网络请求拦截功能(API 10)
380
381**解决措施**
382
383可以通过onInterceptRequest()接口实现自定义资源请求响应,该能力可用于自定义Web页面响应、自定义文件资源响应等场景。当Web网页发起资源加载请求时,应用层会收到该请求消息并构造本地资源响应消息发送给Web内核,Web内核根据应用层响应信息进行页面资源加载。
384
385**参考链接**
386
387[自定义页面请求响应(开发指南)](../web/web-resource-interception-request-mgmt.md)
388
389
390## WebView和原生进行通信的方式有哪些,如何实现(API 10)
391
392**解决措施**
393
3941. Native->H5使用runJavaScript接口注入JS进行通信,H5->Native使用registerJavaScriptProy接口。先将Native方法注册至H5侧,H5再通过调用前端方法实现与Native侧的通信。
3952. runJavaScript、registerJavaScriptProy接口同时在NDK侧C API暴露。
3963. 使用onInterceptrequest接口拦截H5侧请求,同时将Native侧数据作为Response返回至H5,实现Native与H5的通信。
397
398**参考链接**
399
400[runJavaScript](../reference/apis-arkweb/js-apis-webview.md#runjavascriptext10)、[registerJavaScriptProxy](../reference/apis-arkweb/js-apis-webview.md#registerjavascriptproxy)、[javaScriptProxy](../reference/apis-arkweb/ts-basic-components-web.md#javascriptproxy)、[onInterceptRequest](../reference/apis-arkweb/ts-basic-components-web.md#oninterceptrequest9)
401
402
403## WebView进程模型和渲染机制是什么(API 11)
404
405**解决措施**
406
4071. 进程模型:1个主进程、多个render进程。
4082. 渲染机制:web自渲染。
409
410
411## 系统目前是否支持Webrtc的功能?规格是什么?
412
413**解决措施**
414
4151. WebView支持Webrtc的P-P功能以及音视频流功能。
4162. 非WebView场景,系统不直接提供Webrtc,但会提供技术支持,比如支持三方gn+ninja交叉编译方式适配Webrtc(RR-30030985),包含以下两点:
417   * sdk支持gn+ninja交叉编译方式
418   * 提供编译样例指导
419
420
421## Webview如何设置mixcontent策略,用以解决http与https混合加载的问题?
422
423**解决措施**
424
425Webview提供mixedMode(mixedMode: MixedMode)接口,设置是否允许加载超文本传输协议(HTTP)和超文本传输安全协议(HTTPS)混合内容,默认不允许加载HTTP和HTTPS混合内容。
426
427**参考链接**
428
429[mixedmode](../reference/apis-arkweb/ts-basic-components-web.md#mixedmode)
430
431
432## WebView除了设置缓存,还有什么方式可以提升渲染速度吗?
433
434**解决措施**
435
436使用prepareForPageLoad接口开启预解析。
437
438**参考链接**
439
440[prepareforpageload](../reference/apis-arkweb/js-apis-webview.md#prepareforpageload10)
441
442
443## 如何预创建Web组件?如何回收web组件复用?
444
445**解决措施**
446
447通过ArkUI提供的组件动态上下树能力,实现Web组件预创建、回收复用,使用指南见参考链接。
448
449**参考链接**
450
451[动态创建Web组件](../web/web-page-loading-with-web-components.md#动态创建web组件)
452
453
454## 目前OpenHarmony是否有提供类似其他系统的JavaScript引擎能力?
455
456**解决措施**
457
458目前已支持,详情请见参考链接。
459
460**参考链接**
461
462[JSVM](../reference/common/_j_s_v_m.md)