HarmonyOS 鸿蒙Next WebView 使用问题

发布于 1周前 作者 gougou168 来自 鸿蒙OS

HarmonyOS 鸿蒙Next WebView 使用问题 在一个Page页面中需要垂直加载展示两个webview，如何将两个webview 加载出来的显示效果无缝连接。

Flex({ direction: FlexDirection.Column }) {
  Web({ src: this.articleUrl, controller: this.controller })
    .fileAccess(true)
    .javaScriptAccess(true)
    .imageAccess(true)//是否允许自动加载图片资源，默认允许。 
    .zoomAccess(true)
    .databaseAccess(false)//设置是否开启数据库存储API权限 
    .textZoomRatio(100)
  Web({ src: this.articleUrl2, controller: this.controller })
    .fileAccess(true)
    .javaScriptAccess(true)
    .imageAccess(true)//是否允许自动加载图片资源，默认允许。 
    .zoomAccess(true)
    .databaseAccess(false)//设置是否开启数据库存储API权限 
    .textZoomRatio(100)
    .verticalScrollBarAccess(false)
}

更多关于HarmonyOS 鸿蒙Next WebView 使用问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

第二个url加载不全，是因为内部内容过长，layoutMode设置为FIT_CONTENT时会有高度限制，可以参考一下代码：

import web_webview from '@ohos.web.webview'

interface UrlControl{
url: string;
control: web_webview.WebviewController
}

@Entry
@Component
struct WebGapsPage2 {
  @State articleUrl: string[] = [];
  controller1: web_webview.WebviewController = new web_webview.WebviewController();
  controller2: web_webview.WebviewController = new web_webview.WebviewController();
  private scroller: Scroller = new Scroller();
  @State urls: string[] = ["https://wwwtest.cycnet.com.cn/Activitysp/detail/signature/90kOgGYJapeMqy6DjdrZOrjuLCV90r1NQox234LKWmXzBlb7R5/", "https://wwwtest.cycnet.com.cn/Activitysp/detail2/signature/90kOgGYJapeMqy6DjdrZOrjuLCV90r1NQox234LKWmXzBlb7R5/"];
  @State urlControl: Array<UrlControl> = [{
    url: "https://wwwtest.cycnet.com.cn/Activitysp/detail/signature/90kOgGYJapeMqy6DjdrZOrjuLCV90r1NQox234LKWmXzBlb7R5/",
    control:this.controller1,
  },{
    url: "https://wwwtest.cycnet.com.cn/Activitysp/detail2/signature/90kOgGYJapeMqy6DjdrZOrjuLCV90r1NQox234LKWmXzBlb7R5/",
    control:this.controller2,
  }]

  @State webHeight: number = 500;

  build() {
    Column() {
      Column() {
        List({ scroller: this.scroller }) {
          ListItem() {
            Web({ src: this.urlControl[0].url, controller: this.urlControl[0].control })
              .fileAccess(true)
              .javaScriptAccess(true)
              .imageAccess(true)//是否允许自动加载图片资源，默认允许。
              .zoomAccess(true)
              .databaseAccess(false)//设置是否开启数据库存储API权限
              .verticalScrollBarAccess(false)
              .layoutMode(WebLayoutMode.FIT_CONTENT)
          }

          ListItem() {
            Web({ src: this.urlControl[1].url, controller: this.controller2 })
              .fileAccess(true)
              .javaScriptAccess(true)
              .imageAccess(true)//是否允许自动加载图片资源，默认允许。
              .zoomAccess(true)
              .databaseAccess(false)//设置是否开启数据库存储API权限
              .verticalScrollBarAccess(false)
              .onPageEnd(() => {
                let pageHeight = this.controller2.getPageHeight();
                this.webHeight = Number(px2vp(pageHeight));
                console.log(pageHeight.toString())
              })
              .height(this.webHeight)
          }
        }
        .alignListItem(ListItemAlign.Start)
      }
      .backgroundColor(Color.White)
    }
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Start)
    .width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next WebView 使用问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对“HarmonyOS 鸿蒙Next WebView 使用问题”，以下是根据要求提供的回答：

HarmonyOS 鸿蒙Next WebView组件的使用问题，可能涉及多个方面，如加载网页内容、处理JavaScript交互、管理WebView生命周期等。

  1. 加载网页内容：确保WebView的URL正确无误，且网页内容符合HarmonyOS的加载要求。如果网页无法加载，检查网络连接和URL格式是否正确。

  2. 处理JavaScript交互：若需要在WebView中执行JavaScript代码或处理JavaScript回调，需确保WebView的JavaScript权限已开启，并正确设置JavaScript接口。

  3. 管理WebView生命周期：在HarmonyOS应用中，WebView的生命周期管理至关重要。需确保在适当的时机加载、暂停和销毁WebView，以避免内存泄漏和资源浪费。

  4. 错误处理：若WebView在使用过程中出现异常，如加载失败、崩溃等，需及时捕获异常信息，并根据异常类型进行相应的处理。

请注意，以上内容仅为一般性建议，并未涉及具体代码实现。如遇到具体问题，建议查阅HarmonyOS官方文档或开发者社区的相关资源。

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

回到顶部