HarmonyOS鸿蒙Next中web加载网络页面问题

HarmonyOS鸿蒙Next中web加载网络页面问题

使用web加载网页失败（网页未加载出来），调用web端方法失败（web未收到任何信息）。代码如下：

```typescript
struct CommonWebPage {
    private webController: webview.WebviewController = new webview.WebviewController()
    private mode: MixedMode = MixedMode.All
    @State url: string = (router.getParams() as object)['url']

    async aboutToAppear(): Promise<void> {
        //配置Web开启调试模式
        webview.WebviewController.setWebDebuggingAccess(true)
        // this.web_getUserId()
    }
    build() {
        Column() {
            Web({
                src: this.url,
                controller: this.webController
            })
            .width('100%')
            .height('100%')
            .javaScriptAccess(true)
            .domStorageAccess(true)
            .mixedMode(this.mode)
            .backgroundColor(Color.Red)
            .onClick(() => {
                this.web_getUserId()
            })
        }
        .width('100%')
        .height('100%')
    }

    //给web端传送用户信息
    async web_getUserId() {
        let userId = '1111111'
        let token = '1111111'
        let params: Map<string, string> = new Map()
        params["userId"] = userId
        params["token"] = token
        this.webController.runJavaScript(`getUserId(${params})`)
        this.webController.runJavaScript('getUserId()')
        this.webController.runJavaScript('getUserId')
    }
}

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

3 回复

参考如下代码：

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

class WebObj {
  name:string = ""
  // token:
  constructor(name:string) {
    this.name = name
  }
  webTest(): string {
    return this.name;
  }
  webString(): void {
    console.log('Web test toString');
  }
}

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController()
  @State webTestObj: WebObj = new WebObj("dd");
  build() {
    Column() {
      Button('refresh')
        .onClick(() => {
          try {
            this.controller.refresh();
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: '', controller: this.controller })
        .javaScriptAccess(true)
        .onControllerAttached(() => {
          this.controller.loadUrl($rawfile("index.html"));
          this.controller.registerJavaScriptProxy(this.webTestObj, "objTestName", ["webTest", "webString"]);
        })
    }
  }
}

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


在HarmonyOS鸿蒙Next中，加载网络页面主要涉及使用WebView组件。WebView是鸿蒙系统中用于展示网页内容的核心组件，支持加载远程URL或本地HTML文件。开发者可以通过WebView的loadUrl方法加载指定的网络页面，例如webView.loadUrl("https://www.example.com")。

鸿蒙Next对WebView的功能进行了优化，支持JavaScript、CSS等现代Web技术，并提供了丰富的API用于控制页面加载、处理页面事件以及实现与原生应用的交互。例如，可以通过WebView的setWebAgent方法设置自定义的WebAgent来处理页面加载过程中的特定逻辑。

此外，鸿蒙Next还提供了WebCookieManager用于管理Web页面的Cookie，以及WebStorage用于管理Web页面的本地存储数据。这些功能可以帮助开发者更好地控制Web页面的行为和状态。

需要注意的是，鸿蒙Next对网络请求的安全性有较高要求，开发者需要确保加载的页面URL符合系统安全策略，避免加载不安全的资源。同时，鸿蒙Next还支持对WebView进行配置，例如设置是否允许JavaScript执行、是否允许加载图片等，以满足不同的应用场景需求。

总之，鸿蒙Next中的WebView组件功能强大且灵活，开发者可以通过其提供的API实现高效的网络页面加载与交互。

在HarmonyOS鸿蒙Next中，加载网络页面可以通过WebView组件实现。首先，确保在config.json中声明网络权限。然后，在布局文件中添加WebView，并通过loadUrl()方法加载目标页面。示例代码如下：

<WebView
    ohos:id="$+id:webview"
    ohos:height="match_parent"
    ohos:width="match_parent"/>

WebView webView = (WebView) findComponentById(ResourceTable.Id_webview);
webView.load("https://www.example.com");

注意处理网络异常和页面加载状态，确保用户体验流畅。

回到顶部