HarmonyOS ArkUi ArkWeb加载不出网页问题踩坑

使用

使用还是比较简单的,直接贴代码了
别忘了配置网络权限

@Entry
@Component
struct WebPage {@State isAttachController: boolean = false@State url: string = ''@State title: string = ''@Prop controller: web_webview.WebviewController = new web_webview.WebviewController()// 与前端交互 对象jsObj = new JsObj({setHeaderContentCallback: (str: string) => {this.title = str}});// js 调用App方法: 需要在数组中声明,设置给 methodList:jsArray: string[] = ["setHeaderContent", "toLogin", "jumpToBossDetailNew", "jumpToBossDetail", "jumpToCompanyDetail", "openRenewDefaultNavPageLoad", "openRenewPageLoad", "openNewPageLoad", "openBrowser"];aboutToAppear(): void {this.url = (router.getParams() as RouterParams).urlif (this.url.indexOf('?') > 0) {this.url = this.url + BranchUtils.appendBranchParams()} else {this.url = this.url + `?${BranchUtils.appendBranchParams()}`}web_webview.WebviewController.setWebDebuggingAccess(true);PreferencesUtil.getString("urlCookie").then((value) => {// 如果连接本地调试 一定要写完整的域名  带上http//web_webview.WebCookieManager.configCookieSync('http://10.1.65.120:5173/', value)// 设置cookieweb_webview.WebCookieManager.configCookieSync('.sscha.com', value)})web_webview.once("webInited", () => {})eventBus.on(EventBusId.ID_LOGIN, () => {// todo})}build() {Column() {PubTitle({ title: this.title, isShowRightBtn: false })Web({ src: this.url, controller: this.controller }).width('100%').height('100%').mixedMode(MixedMode.All).javaScriptAccess(true).javaScriptProxy({object: this.jsObj,name: "android",methodList: this.jsArray,controller: this.controller,}).onControllerAttached(() => {// 官方建议是在这里设置 serAgentthis.controller.setCustomUserAgent(this.controller.getUserAgent() + BranchUtils.appendBranch())}).onPageEnd((urlEnd) => {console.log("onPageEnd= " + JSON.stringify(urlEnd))})}.width('100%')}
}

export interface JSCallback {reqResult?: (code: string) => void;setHeaderContentCallback?: (msg: string) => void;
}export class JsObj {callback?: JSCallbackregistCallBack(callback: JSCallback) {this.callback = callback}constructor(callback?: JSCallback) {this.callback = callback}// ...省略代码
}

加载网页(这个问题不难但是血坑,搞了好久才定位到问题)

  • 现象:
    Android 、Ios 都有线上App 网页都是调试好的
    鸿蒙加载有些网页加载不出来(绝大多数都加载不出来),有些能加载出来 。个人认为肯定不是ArkWeb的问题,这一块就需要跟前端调试,最后排查出的问题还真是前端的问题

  • 排查结果
    前端使用:localStorage,调用时localStorage为null,导致整个界面都加载不出来
    在这里插入图片描述
    经过前端修改,对localStorage是否为null进行判断,网页都可以正常加载出来了

官网文档

官网上有一个写法,不过没验证
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/37023.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自定义注解+AOP形式监控接口调用日志

目的&#xff1a; 通过自定义注解&#xff0c;在需要监控接口调用输出日志的类或方法上&#xff0c;加上自定义注解&#xff0c;实现无侵入式接口监控。 实现&#xff1a; idea结构 1、导入pom <dependency><groupId>org.aspectj</groupId><artifactI…

ASUS/华硕天选Air 2021 FX516P系列 原厂win10系统

安装后恢复到您开箱的体验界面&#xff0c;带原机所有驱动和软件&#xff0c;包括myasus mcafee office 奥创等。 最适合您电脑的系统&#xff0c;经厂家手调试最佳状态&#xff0c;性能与功耗直接拉满&#xff0c;体验最原汁原味的系统。 原厂系统下载网址&#xff1a;http:…

FTP 文件传输协议:概念、工作原理;上传下载操作步骤

目录 FTP 概念 工作原理 匿名用户 授权用户 FTP软件包 匿名用户上传下载实验步骤 环境配置 下载 上传 wget 授权用户上传下载步骤 root用户登录FTP步骤 监听 设置端口号范围 修改用户家目录 匿名用户 授权用户 FTP 概念 FTP&#xff08;File Transfer Prot…

JAVA设计模式-大集合数据拆分

背景 我们在做软件开发时&#xff0c;经常会遇到把大集合的数据&#xff0c;拆分成子集合处理。例如批量数据插入数据库时&#xff0c;一次大约插入5000条数据比较合理&#xff0c;但是有时候待插入的数据远远大于5000条。这时候就需要进行数据拆分。数据拆分基本逻辑并不复杂&…

毅速丨金属3D打印是制造业转型升级的重要技术

随着科技的进步&#xff0c;金属3D打印技术已成为制造业升级的重要驱动力。它以其独特的优势&#xff0c;正引领着制造业迈向新的未来。 金属3D打印技术的突破&#xff1a; 设计自由。金属3D打印能制造任意形状和结构的零件&#xff0c;为设计师提供了无限的创意空间。 快速制…

idea配置外置gradle

下载gradle包&#xff0c;解压 https://gradle.org/install/#manually 创建一个本地仓库 mkdir /Users/caidingnu/save/gradle-8.5/gradlerep如果需要全局适应 gradle&#xff0c;环境变量自行配置 配置阿里云仓库 路径&#xff1a; /Users/caidingnu/save/gradle-8.5/init.…

ONLYOFFICE8.1-------宝藏级别桌面编辑器测评

简介 ONLYOFFICE 8.1 是一个功能强大的办公套件&#xff0c;提供了一系列广泛的功能&#xff0c;用于文档管理、协作和沟通。它包括用于创建和编辑文本文档、电子表格、演示文稿等的工具。ONLYOFFICE 8.1 的一些关键特性包括&#xff1a; 1. 协作&#xff1a;ONLYOFFICE 8.1 允…

51单片机STC89C52RC——11.1 蜂鸣器播放音乐

目录 目的/效果 一&#xff0c;STC单片机模块 二&#xff0c;蜂鸣器 2.1 介绍 2.2 板子位置电路图 2.3 发声原理 2.4 音符和频率 三&#xff0c;创建Keil项目 四&#xff0c;代码 4.1 乐谱代码 4.1.1 《义勇军进行曲》 4.1.2 《天空之城》 4.1.3 《小美满》 4.1.…

安防监控视频平台LntonAIServer视频监控管理平台裸土检测算法技术核心和应用场景

LntonAIServer裸土检测算法是一种基于人工智能技术的创新解决方案&#xff0c;旨在实现对裸土地表的自动识别。以下是对该算法的详细分析&#xff1a; 技术基础&#xff1a; 1、该算法利用深度学习和计算机视觉技术&#xff0c;通过捕捉视频或图像中的关键信息&#xff0c;如…

快手主播李香周助力推动 K-beauty风潮谈背后成功秘诀

近年来&#xff0c;互联网的迅速发展和SNS社交媒体的普及&#xff0c;人们通过网络可以随时随地对自己感兴趣的自由畅谈和学习。而直播带货更是作为一种依托于互联网兴起的新型营销方式&#xff0c;凭借其价格优势和新颖的介绍方式为消费者带来了十分便捷的购物体验。 本期采访…

多模态语言模型的新突破:Reka Core、Flash和Edge系列

人工智能领域的每一次技术革新都可能引领一场行业的变革&#xff0c;特别是在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;多模态语言模型&#xff08;MLMs&#xff09;正逐渐成为推动智能系统发展的核心力量。Reka团队最新推出的Reka Core、Flash和Edge系列模型&…

一个项目学习Vue3---快速了解Vue代码结构

基础结构 Vue文件中基本上和咱们自己写Html、CSS、JS差不太多&#xff0c;主要也由这三部分组成 HTML部分&#xff1a; <template><div>这里面写HTML代码</div> </template> CSS部分&#xff1a; <style scoped> .aaa {font-size: 3em; } &…

蚂蚁- 定存

一&#xff1a;收益变动&&收益重算 1.1: 场景组合 1: 澳门元个人活期&#xff0c;日终余额大于0&#xff0c;当日首次、本周本月非首次系统结息&#xff0c;结息后FCDEPCORE_ASYN_CMD_JOB捞起进行收益计算 【depc_account_revenue_detail】收益日 > 【depc_accoun…

golang使用RSA加密和解密

目录 前提 生成RSA公钥和密钥 读取文件 加密 解密 前提 本文章我们是先读取的RSA文件&#xff0c;所以需要先生成RSA&#xff0c;并且保存在文件中&#xff0c;再进行加密 生成RSA公钥和密钥 如果没有公钥和密钥&#xff0c;可以先看看我上一篇文章 生成RSA公钥和密钥h…

同步模式之保护性暂停模式

1. Guarded Suspension&#xff1a;一个线程需要等待另一个线程的执行结果 2. 理解 一个线程需要将结果传递给另一个线程&#xff0c;将这两个线程关联到到同一个 GuardedObject 如果需要源源不断地传递结果&#xff0c;需要使用消息队列&#xff08;生产者-消费者模型&…

最新AIGC系统源码-ChatGPT商业版系统源码,自定义ChatGPT指令Promp提示词,AI绘画系统,AI换脸、多模态识图理解文档分析

目录 一、前言 系统文档 二、系统演示 核心AI能力 系统快速体验 三、系统功能模块 3.1 AI全模型支持/插件系统 AI模型提问 文档分析 ​识图理解能力 3.2 GPts应用 3.2.1 GPTs应用 3.2.2 GPTs工作台 3.2.3 自定义创建Promp指令预设应用 3.3 AI专业绘画 3.3.1 文…

【51单片机入门】数码管原理

文章目录 前言共阴极与共阳极数码管多个数码管显示原理 总结 前言 在我们的日常生活中&#xff0c;数码管被广泛应用于各种电子设备中&#xff0c;如电子表、计时器、电子钟等。数码管的主要功能是显示数字和一些特殊字符。在这篇文章中&#xff0c;我们将探讨数码管的工作原理…

SpringMVC启动流程

文章目录 引文HandlerHandlerMapperHandlerAdapterRequestMapping方法参数解析RequestMapping方法返回值解析文件上传流程拦截器解析 SpringMVC启动流程如下 引文 我们在使用SpringMVC时&#xff0c;传统的方式是在webapp目录下定义一个web.xml文件&#xff0c;比如&#xff1a…

PerplexityAI与《连线》杂志纠纷事件深度分析

引言 最近&#xff0c;PerplexityAI&#xff0c;这家人工智能搜索领域的新秀公司&#xff0c;因被《连线》杂志指控剽窃内容和捏造事实而陷入困境。这起事件引发了广泛关注&#xff0c;也揭示了AI技术在信息检索和内容生成领域面临的一系列挑战。本文将对该事件进行详细分析&a…

Android Lint

文章目录 Android Lint概述工作流程Lint 问题问题种类警告严重性检查规则 用命令运行 LintAndroidStudio 使用 Lint忽略 Lint 警告gradle 配置 Lint查找无用资源文件 Android Lint 概述 Lint 是 Android 提供的 代码扫描分析工具&#xff0c;它可以帮助我们发现代码结构/质量…