鸿蒙ArkTs开发WebView问题总结
Florenza 2024-07-04 12:33:01 阅读 76
1. 加载WebView页面报错"Can not read properties of null (reading 'getltem')"
解决:
在加载webview的controller中加入.domStorageAccess(true)
<code> build() {
Column() {
Row().width('100%').height('50rpx')
Web({ src: src, controller: this.controller })
.javaScriptAccess(true)
.domStorageAccess(true)
}
}
官方文档
文档中心
2.如何操作网页中的LocalStorage
解决:
通过操作应用侧runJavaScript()方法调用前端页面的JavaScript相关函数。
本人封装操作LocalStorage 方法
<code>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 外有两个单引号 包含住
3.WebView 页面在windows模拟器无法出现滚动条滚动
解决:
亲测在Mac 的模拟器可以滚动,且真实模拟机也可以出现滚动条下拉,固为windows的模拟器bug,开发者无需理会,如必要可用 上下箭头进行页面上下滚动即可
上一篇: 2024年最全CSS前端经典面试题及解析——小白入门必备,2024年最新计算机网络专业面试常问问题
下一篇: 前端vue使用onlyoffice控件实现word在线编辑、预览(仅列出前端部分需要做的工作,不包含后端部分)
本文标签
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。