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

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

ionicwang 1楼•3 天前作者

这个是因为网页的页面适配安卓和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'
                );
            });
        }
    }
}

yuanlaile 2楼•3 天前

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

网络状态与权限：
- 确保手机处于联网状态且网络畅通。
- 检查应用是否已添加ohos.permission.INTERNET网络权限。
- 确认fileAccess、imageAccess、onlineImageAccess等权限已开启。
页面代码与调试：
- 使用浏览器打开对应页面，验证页面是否存在问题。
- 参考使用Devtools工具调试前端页面。
- 如果页面含有字符#，注意在加载时进行转义或base64编码。
用户代理设置：
- 如果设置了setCustomUserAgent，确保用户代理字符串与网站兼容。
- 尝试使用更通用的用户代理字符串，如Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36。
跨域资源共享与安全设置：
- 检查服务器端的CORS配置，确保允许当前设置的User-Agent进行跨域请求。
- 审查网站的CSP策略，确认其对自定义User-Agent的支持情况。

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