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