HarmonyOS 鸿蒙Next用web组件页面加载问题

HarmonyOS 鸿蒙Next用web组件页面加载问题

用web组件加载一个PC页面时没有进行适配，比如加载百度页面:https://www.baidu.com,在鸿蒙里显示的就是PC样式的百度页面，而用安卓和iOSweb组件显示的就是wap样式的页面，请问如何让鸿蒙的web组件也同样显示wap样式的压面。 如上


更多关于HarmonyOS 鸿蒙Next用web组件页面加载问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

这个是因为网页的页面适配安卓和IOS的UA而没有适配鸿蒙UA导致的，在鸿蒙中使用setCustomUserAgent能解决这个问题，API地址如下，请根据需要添加

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/js-apis-webview-V13#setcustomuseragent10

demo如下：

import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController();

    build() {
        Column() {
            Web({
                src: 'https://www.baidu.com',
                controller: this.controller
            })
            .domStorageAccess(true)
            .onControllerAttached(() => {
                // 移动端通用UA
                this.controller.setCustomUserAgent(
                    'Mozilla/5.0 (Linux; Android 9; VRD-AL10; HMSCore 6.3.0.331) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.88 HuaweiBrowser/12.0.4.1 Mobile Safari/537.36'
                );
            });
        }
    }
}

更多关于HarmonyOS 鸿蒙Next用web组件页面加载问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对HarmonyOS 鸿蒙Next使用web组件页面加载问题，以下是一些可能的解决方案：

  1. 网络状态与权限：

    • 确保手机处于联网状态且网络畅通。
    • 检查应用是否已添加ohos.permission.INTERNET网络权限。
    • 确认fileAccess、imageAccess、onlineImageAccess等权限已开启。

  2. 页面代码与调试：

    • 使用浏览器打开对应页面，验证页面是否存在问题。
    • 参考使用Devtools工具调试前端页面。
    • 如果页面含有字符#，注意在加载时进行转义或base64编码。

  3. 用户代理设置：

    • 如果设置了setCustomUserAgent，确保用户代理字符串与网站兼容。
    • 尝试使用更通用的用户代理字符串，如Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36。

  4. 跨域资源共享与安全设置：

    • 检查服务器端的CORS配置，确保允许当前设置的User-Agent进行跨域请求。
    • 审查网站的CSP策略，确认其对自定义User-Agent的支持情况。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部