HarmonyOS 鸿蒙Next中AtomicServiceWeb加载网页空白

HarmonyOS 鸿蒙Next中AtomicServiceWeb加载网页空白 【问题描述】：在元服务中使用AtomicServiceWeb加载H5界面，显示空白。

【问题现象】：hilog日志打印

cke_3775.jpeg

【版本信息】：Deveco Studio 6.0.0，API 20

【复现代码】：核心代码片段

@State controller:AtomicServiceWebController = new AtomicServiceWebController()

AtomicServiceWeb({
  src:'http://audiofree.xyz/yy/',
  controller:this.controller,
  mixedMode:MixedMode.All
})

【尝试解决方案】：

1.使用模拟器可以正常加载

2.使用真机打开元服务豁免，可以正常加载

3.使用真机关闭元服务豁免，显示空白，报如上错误。

4.该域名已在AGC上配置


更多关于HarmonyOS 鸿蒙Next中AtomicServiceWeb加载网页空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

开发者你好，当在手机侧关闭豁免开关时（设置->系统->开发者选项->开发中元服务豁免管控），需要在AGC侧配置业务域名，具体配置参考：配置业务域名。

通过日志看是未匹配到配置的业务域名，注意需要配置在业务域名页签。

更多关于HarmonyOS 鸿蒙Next中AtomicServiceWeb加载网页空白的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


一、域名配置未生效

  1. 域名生效延迟 即使已在 AGC 配置业务域名，默认需 24 小时生效。若需立即生效：

    • 在真机上 移除元服务（设置 > 应用和元服务 > 元服务 > 移除）
    • 重新安装元服务，确保域名配置同步生效。

  2. 域名未完整配置

    • 确保 主页面域名和 iframe 内嵌页面域名均已在 AGC 配置。
    • 若页面中存在动态加载的域名（如子页面、第三方资源），需一并加入白名单。

二、豁免管控与协议限制

  1. 豁免开关的作用差异

    • 开启豁免时，跳过域名白名单校验；关闭时强制校验。
    • 真机关闭豁免后需 确保域名完全匹配白名单（包括大小写、子域名等）。

  2. 协议限制 AtomicServiceWeb仅支持加载 https 协议的页面（http、ftp 等协议会被拦截）。检查页面链接是否以 https://开头，或存在混合协议内容。

三、特殊字符处理 若链接包含 #、?等特殊字符：

  1. 编码处理
    • 使用 encodeURIComponent()对链接参数编码，例如将 #转为 %23。
    • 或采用 Base64 编码（需配套设置 encoding参数）。

四、权限与配置检查

  1. 网络权限 在 module.json5中确认已添加网络权限：
"requestPermissions": [
  { "name": "ohos.permission.INTERNET" }
]

DOM Storage 权限 若网页依赖 localStorage或 sessionStorage，需启用 domStorageAccess：

Web({
  src: 'https://your-domain.com',
  controller: this.controller
})
.domStorageAccess(true) // 启用 DOM Storage

AtomicServiceWeb（不再推荐），切换为 AtomicServiceEnhancedWeb

官方说明地址

https://developer.huawei.com/consumer/cn/doc/atomic-guides/atomicserviceweb-guidelines#section95481653195718

可以使用

// xxx.ets
import {
  AtomicServiceEnhancedWeb,
  AtomicServiceEnhancedWebController,
  OnErrorReceiveEvent,
  OnHttpErrorReceiveEvent,
  OnPageBeginEvent,
  OnPageEndEvent
} from '@atomicservice/ascfapi';
@Entry
@Component
struct WebComponent {
  @State controller: AtomicServiceEnhancedWebController = new AtomicServiceEnhancedWebController();
  build() {
    Column() {
      AtomicServiceEnhancedWeb({
        src: 'http://audiofree.xyz/yy/',
        controller: this.controller,
        // 网页加载遇到错误时触发该回调
        onErrorReceive: (event: OnErrorReceiveEvent) => {
          console.info(`onErrorReceive event=${JSON.stringify({
            requestUrl: event.request?.getRequestUrl(),
            requestMethod: event.request?.getRequestMethod(),
            errorCode: event.error?.getErrorCode(),
            errorInfo: event.error?.getErrorInfo()
          })}`);
        },
        // 网页加载遇到HTTP资源加载错误时触发该回调
        onHttpErrorReceive: (event: OnHttpErrorReceiveEvent) => {
          console.info(`onHttpErrorReceive event=${JSON.stringify({
            requestUrl: event.request?.getRequestUrl(),
            requestMethod: event.request?.getRequestMethod(),
            responseCode: event.response?.getResponseCode(),
            responseData: event.response?.getResponseData(),
          })}`);
        },
        // 页面开始加载，触发该回调
        onPageBegin: (event: OnPageBeginEvent) => {
          console.info(`onPageBegin event=${JSON.stringify({
            url: event.url
          })}`);
        },
        // 页面加载完成，触发该回调
        onPageEnd: (event: OnPageEndEvent) => {
          console.info(`onPageEnd event=${JSON.stringify({
            url: event.url
          })}`);
        }
      })
    }
  }
}

获取错误日志

同样的问题，不知道博主是否已经解决该问题？？

找HarmonyOS工作还需要会Flutter技术的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17

【解决方案】

开发者你好，结合报错和你提供的Url是以http开头，确保HTTPS和WSS协议的域名以"https://"和"wss://"开头，http仅支持调试使用 。如果修改无效，请排除以下原因：

1、元服务上架前配置webview业务域名，后续用户使用元服务时，将根据该元服务的业务域名配置实现业务跳转，配置业务域名

2、确保已在AppGallery Connect中正确配置服务器域名 。每个自然月最多可以修改50次服务器域名，超过此限制可能导致请求失败。 确保域名格式正确，只支持英文大小写字母、数字及符号“-”“.”，且单个域名长度不超过128个字符。 确保域名不包含IP地址或localhost，且不在全局禁止清单内。 3、确保HTTPS和WSS协议的域名以"https://"和"wss://"开头，http仅支持调试使用 。 确保httpRequest和download类型的域名以"https://"开头，且配置端口或不配置端口 。 4、如果域名修改次数已达到上限，申请放宽限制。发送邮件至atomicservice@huawei.com，邮件标题应包含元服务名称和APP ID，说明申请放宽修改次数的原因 。 5、确保在代码中正确配置了请求的URL和相关参数，如请求头、文件名等。 确保请求的URL与配置的域名和端口一致，避免配置错误导致请求失败。 6、将下载到本地的配置文件放置到域名根目录下，并须确保可以成功访问该配置文件, 同时配置页面内访问的域名，如果配置后域名延迟未生效,可以卸载元服务再重新安装试一下。也不允许跨域，推荐在服务端配置跨域解决CORS问题。 7、若以上均排查无效，请抓取异常日志进一步定位： hdc shell hilog -b D hdc shell hilog > bugs.log

为什么agc后台上，没有业务域名配置的tab ，只有服务器域名配置，

业务域名不允许个人开发者？

是的，开发者账号为已完成实名认证的非个人开发者，且归属地为中国大陆地区。具体可参考：https://developer.huawei.com/consumer/cn/doc/atomic-guides/agc-help-harmonyos-business-domain#section2378613182717。

在HarmonyOS Next中，AtomicServiceWeb加载网页空白可能由以下原因导致：网络权限未开启、Web组件配置错误、网页资源路径不正确或WebView内核兼容性问题。请检查config.json中是否已配置ohos.permission.INTERNET权限，并确认Web组件的src属性指向了有效的在线或本地网页地址。

根据你提供的信息，核心问题在于真机环境下未开启元服务豁免时，AtomicServiceWeb加载网页失败，并出现网络相关的错误日志。这通常与HarmonyOS Next的网络安全模型和元服务权限有关。

主要原因分析：

  1. 网络权限限制：HarmonyOS Next对元服务的网络访问有严格的安全管控。默认情况下，元服务只能访问经过认证的域名（在AGC中配置的）。即使域名已在AGC配置，在真机“关闭豁免”的严格模式下，系统仍会执行完整的网络安全检查（如证书校验、CORS策略等），这可能导致网页资源加载被拦截。
  2. 网页内容合规性：加载的H5页面（http://audiofree.xyz/yy/）本身可能包含不符合HarmonyOS安全策略的内容（如混合HTTP/HTTPS内容、特定的JavaScript API调用、不安全的资源链接），在严格模式下被阻止渲染。
  3. MixedMode设置：你已设置mixedMode: MixedMode.All，这允许加载混合内容，但前提是基础的网络访问请求被系统允许。

排查与解决方向：

  • 检查AGC域名配置：确保在AGC项目中，该域名（audiofree.xyz）已正确添加到“元服务豁免域名”或“Web组件可访问域名”列表中，且配置已生效同步到设备。
  • 检查网页源码：在浏览器开发者工具中检查该H5页面，确认其所有子资源（CSS、JS、图片等）的链接是否都符合安全规范（尽量使用HTTPS），并检查控制台是否有CORS错误或其他脚本错误。
  • 查看完整Hilog：过滤AtomicServiceWeb相关标签的日志，获取更详细的错误码和描述，这能更精准定位是网络层、协议层还是渲染层的问题。
  • 真机调试：在真机上开启开发者选项，通过DevEco Studio的调试功能，检查AtomicServiceWeb组件的具体网络请求状态和错误信息。

总结：问题根源是真机严格安全模式下，系统对该H5页面的网络请求或内容渲染进行了拦截。模拟器和开启豁免的真机环境放松了这些检查，因此可以正常加载。解决的关键是确保H5页面完全符合HarmonyOS的安全要求，并确认AGC的域名配置在严格模式下依然有效。

回到顶部