鸿蒙ArkTs开发WebView问题总结-编程知识

鸿蒙ArkTs开发WebView问题总结

1. 加载WebView页面报错"Can not read properties of null (reading 'getltem')"

解决:

在加载webview的controller中加入.domStorageAccess(true)

 build() {Column() {Row().width('100%').height('50rpx')Web({ src: src, controller: this.controller }).javaScriptAccess(true).domStorageAccess(true)}}

官方文档

文档中心

2.如何操作网页中的LocalStorage

解决:

通过操作应用侧runJavaScript()方法调用前端页面的JavaScript相关函数。

本人封装操作LocalStorage 方法

interface JsMethods {setStorage(key: string, value: any): Promise<void>;getStorage(key: string): Promise<string>
}
/*** webview中常用的js操作封装*/
export class WebJsUtil implements JsMethods {private controller: WebviewController;constructor(controller: WebviewController) {this.controller = controller;}async setStorage(key: string, value: any): Promise<void> {this.controller.runJavaScript("window.localStorage.setItem('" + key + "', '" + value + "')")}async getStorage(key: string): Promise<string> {const res = await this.controller.runJavaScript("window.localStorage.getItem('" + key + "')")return res}
}

调用:

 build() {Column() {Row().width('100%').height('50rpx')Web({ src: new BaseUrl().APPOINT_LIST, controller: this.controller }).javaScriptAccess(true).onPageBegin(async (event) => {const access_token = await PreferenceModel.getPreference('access_token')const refresh_token = await PreferenceModel.getPreference('refresh_token')const webJs = new WebJsUtil(this.controller)await webJs.setStorage('userInfo', JSON.stringify(this.userInfo))await webJs.setStorage('access_token', access_token)await webJs.setStorage('refresh_token', refresh_token)}).domStorageAccess(true)}}

注: window.localStorage.setItem('" + key + "', '" + value + "') 必须在 value 外有两个单引号包含住