鸿蒙HarmonyOS实战案例：如何解决web组件加载网页白屏示例

太空人_喜之郎

于 2024-08-26 15:43:46 发布

阅读量552

点赞数 31

分类专栏： HarmonyOS OpenHarmony 鸿蒙文章标签： harmonyos 华为前端鸿蒙移动开发服务器 web

本文链接：https://blog.csdn.net/2401_84917132/article/details/141564247

版权

HarmonyOS 同时被 3 个专栏收录

189 篇文章 0 订阅

订阅专栏

OpenHarmony

189 篇文章 0 订阅

订阅专栏

鸿蒙

189 篇文章 0 订阅

订阅专栏

1. web组件加载网页白屏表现

鸿蒙系统提供了web组件，可以在APP里内嵌该组件显示网页信息，但是，很多开发者反应一种比较奇特的情况，就是在加载的网页里，如果含有字符#的话，就会出现白屏，或者是#后的内容无法显示。当然，web组件加载网页的方式比较多，在上文Web组件加载网页的四种方式示例里已经介绍了，这种出现白屏的情况，一般都是因为使用了WebviewController的loadData方法进行加载。

2. 白屏原因分析

WebviewController可以通过loadUrl或者loadData进行内容的加载，但是，在WebviewController的底层，调用的方法是不一样的，底层代码如下所示：

ErrCode WebviewController::LoadUrl(std::string url, std::map<std::string, std::string> httpHeaders)
{
    auto nweb_ptr = NWebHelper::Instance().GetNWeb(nwebId_);
    if (!nweb_ptr) {
        return INIT_ERROR;
    }
    return nweb_ptr->Load(url, httpHeaders);
}

ErrCode WebviewController::LoadData(std::string data, std::string mimeType, std::string encoding,
    std::string baseUrl, std::string historyUrl)
{
    auto nweb_ptr = NWebHelper::Instance().GetNWeb(nwebId_);
    if (!nweb_ptr) {
        return INIT_ERROR;
    }
    if (baseUrl.empty() && historyUrl.empty()) {
        return nweb_ptr->LoadWithData(data, mimeType, encoding);
    }
    return nweb_ptr->LoadWithDataAndBaseUrl(baseUrl, data, mimeType, encoding, historyUrl);
}

也就是说，问题是出在底层的组件上，鸿蒙系统对此也是爱莫能助。在调用LoadWithData(data, mimeType, encoding)或者LoadWithDataAndBaseUrl(baseUrl, data, mimeType, encoding, historyUrl)时，需要注意一点，就是对于data中的内容，如果含有符号#的话，被认为是需要转义的，也就是说要转换成%23，否则就会出现显示问题。如果你不想转义，其实也有办法，就是把data中的内容进行base64编码，然后把encoding参数设置为“base64”就可以了。需要注意的是，这里要小写，不能写成Base64。

3. 白屏解决方式示例

本示例将演示html内容白屏显示以及解决白屏问题的示例，运行后的初始界面如下所示：

下面详细介绍创建该应用的步骤。

步骤1：创建Empty Ability项目。

步骤2：在module.json5配置文件加上对权限的声明：

"requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]

这里添加了获取互联网信息的权限。

步骤3：在Index.ets文件里添加如下的代码：

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

@Entry
@Component
struct Index {
  //要加载的内容
  @State webContent: string = `<!DOCTYPE html>
<html>
<body style="font-size: large;text-align: center;">
  <div>前面的内容#后面的内容，咋区别对待呢!</div>
</body>
</html>`
  scroller: Scroller = new Scroller()
  contentScroller: Scroller = new Scroller()
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Row() {
      Column() {
        Text("HTML包含特殊字符示例")
          .fontSize(14)
          .fontWeight(FontWeight.Bold)
          .width('100%')
          .textAlign(TextAlign.Center)
          .padding(10)

        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
          Text("HTML内容：")
            .fontSize(14)
            .width(100)
            .flexGrow(1)

          Button("加载")
            .onClick(() => {
              this.controller.loadData(this.webContent, "text/html", "utf-8")
            })
            .width(80)
            .fontSize(14)

          Button("Base64加载")
            .onClick(() => {
              let base64Content = string2Base64(this.webContent)
              this.controller.loadData(base64Content, "text/html", "base64")
            })
            .width(120)
            .fontSize(14)
        }
        .width('100%')
        .padding(5)

        Scroll(this.contentScroller) {
          TextArea({ text: this.webContent })
            .onChange((value) => {
              this.webContent = value
            })
            .backgroundColor(0xffffee)
            .width('100%')
            .fontSize(11)
        }
        .align(Alignment.Top)
        .backgroundColor(0xeeeeee)
        .height(120)
        .scrollable(ScrollDirection.Vertical)
        .scrollBar(BarState.On)
        .scrollBarWidth(20)

        Scroll(this.scroller) {
          Web({ src: "about:blank", controller: this.controller })
            .padding(10)
            .width('100%')
            .backgroundColor(0xeeeeee)
        }
        .align(Alignment.Top)
        .backgroundColor(0xeeeeee)
        .height(300)
        .flexGrow(1)
        .scrollable(ScrollDirection.Vertical)
        .scrollBar(BarState.On)
        .scrollBarWidth(20)
      }
      .width('100%')
      .justifyContent(FlexAlign.Start)
      .height('100%')
    }
    .height('100%')
  }
}

//对字符串base64编码
function string2Base64(src: string) {
  let textEncoder = new util.TextEncoder();
  let encodeValue = textEncoder.encodeInto(src)

  let tool = new util.Base64Helper()
  return tool.encodeToStringSync(encodeValue)
}

步骤4：编译运行，可以使用模拟器或者真机。

步骤5：单击“加载”按钮，截图如下所示：

可以看到，只显示了符号#前面的内容。

步骤6：单击“Base64加载”按钮，截图如下所示：

可以看到，显示了完整的内容。

4. 加载功能分析

在第一种加载方式中，代码如下：

this.controller.loadData(this.webContent, "text/html", "utf-8")

直接加载了输入控件中的内容，所以显示有问题。

第二种方式下，代码如下：

let base64Content = string2Base64(this.webContent)
              this.controller.loadData(base64Content, "text/html", "base64")

这里对于加载的内容进行了base64编码，所以可以正常显示。

base64编码的函数如下所示：

//对字符串base64编码
function string2Base64(src: string) {
  let textEncoder = new util.TextEncoder();
  let encodeValue = textEncoder.encodeInto(src)

  let tool = new util.Base64Helper()
  return tool.encodeToStringSync(encodeValue)
}

最后

小编在之前的鸿蒙系统扫盲中，有很多朋友给我留言，不同的角度的问了一些问题，我明显感觉到一点，那就是许多人参与鸿蒙开发，但是又不知道从哪里下手，因为资料太多，太杂，教授的人也多，无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

为了确保高效学习，建议规划清晰的学习路线，涵盖以下关键阶段：

→【纯血版鸿蒙全套最新学习资料】希望这一份鸿蒙学习资料能够给大家带来帮助~

鸿蒙（HarmonyOS NEXT）最新学习路线