HarmonyOS鸿蒙Next中web组件api返回的url是电脑界面的怎么改为手机界面

我正在开发一个鸿蒙应用，但我的api返回的url是电脑端的url导致web打开链接时进入的是电脑端的界面，怎么能让他显示为手机端的界面

4 回复

你好，

因为url加载的网页是电脑网页，所以不做任何适配的话，在手机端加载的电脑网页会显示异常。

因此对于同一个url的网页，需要适配多种设备，例如: 平板，手机，电脑等，而且适配多种设备型号，比如Mate60, Meta60 Pro。

需要：

  • 设备端能够传给网页设备的标识。
  • 网页开发者能够根据设备的标识做对该网页对相应的设备做样式的适配。

解决方案：

  1. 通过设置UserAgent，把设备端标识信息传递给网页，因此网页端可以通过deviceType识别设备类型。
aboutToAppear(): void {
  webview.once('webInited', () => {
    try {
      // 应用侧用法示例，定制UserAgent。
      this.ua = this.controller.getUserAgent() + 
      'Mozilla/5.0 ({deviceType}; {OSName} {OSVersion}) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/{ArkWeb VersionCode} {Mobile}';
      this.controller.setCustomUserAgent(this.ua);
    } catch (error) {
      console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
    }
  })
}
  1. 网页侧通过userAgent，获得设备端标识信息，代码示例如下:
window.onload = function() {
  const resultText = document.getElementById("result");
  // 获得userAgent
  resultText.innerHTML = navigator.userAgent;  
}
  1. 在Web的onControllerAttached里面设置UserAgent。
@State userAgent:string = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 ArkWeb/4.1.6.1 Mobile automobile/792 HuaweiBrowser'
Web({ src: '', controller: this.controller})
  .onControllerAttached(()=>{
    this.controller.setCustomUserAgent(this.userAgent);
    this.controller.loadUrl('xxxxxx')
})

更多关于HarmonyOS鸿蒙Next中web组件api返回的url是电脑界面的怎么改为手机界面的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


需要web网页判断一下是否是鸿蒙浏览器，然后让它显示为手机端界面

你好。

一般需要配置ArkWeb 组件的javaScriptProxy属性结合获取UserAgent的方式，让网页 H5 知晓设备为鸿蒙设备。

import web_webview from '@ohos.web.webview';
class WebParam {
  userAgent: string = '';
  constructor() {}
  getUseAgent(): string {
    return this.userAgent;
  }
  setUseAgent(userAgent: string) {
    this.userAgent = userAgent;
  }
}
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  @State webParam: WebParam = new WebParam();
  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .onControllerAttached(() => {
          let userAgent = this.controller.getCustomUserAgent();
          this.webParam.setUseAgent(userAgent);
        })
        .javaScriptProxy({
          object: this.webParam,
          name: "webParam",
          methodList: ["getUseAgent"],
          controller: this.controller
        });
    }.height('100%');
  }
}

在HarmonyOS鸿蒙Next中，Web组件默认加载的URL可能会显示为电脑界面。要将其改为手机界面，可以通过设置Web组件的UserAgent属性来模拟移动设备。例如：

webController.setUserAgentString("Mozilla/5.0 (Linux; Android 10; Mobile) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.120 Mobile Safari/537.36");

这样，Web组件会以移动设备的用户代理字符串加载页面，从而显示为手机界面。

回到顶部