鸿蒙网络编程系列20-解决web组件加载网页白屏示例

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

鸿蒙系统提供了web组件，可以在APP里内嵌该组件显示网页信息，但是，很多开发者反应一种比较奇特的情况，就是在加载的网页里，如果含有字符#的话，就会出现白屏，或者是#后的内容无法显示。当然，web组件加载网页的方式比较多，在上文鸿蒙网络编程系列18-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)
}

（本文作者原创，除非明确授权禁止转载）

本文源码地址：

https://gitee.com/zl3624/harmonyos_network_samples/tree/maste...

本系列源码地址：

https://gitee.com/zl3624/harmonyos_network_samples

鸿蒙网络编程系列20-解决web组件加载网页白屏示例

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

2. 白屏原因分析

3. 白屏解决方式示例

4. 加载功能分析

长弓三石

引用和评论

鸿蒙网络编程系列52-仓颉版使用Request部件上传文件示例

在Java程序中监听mysql的binlog

“一起学 HarmonyOS”第二弹来啦！

Spring 实现 3 种异步流式接口，干掉接口超时烦恼

HarmonyOS Next 应用实战案例—“马背上的家乡”元服务

API接口设计的未来趋势：探索技术方向与实践方案

HarmonyOS 如何获取设备信息（系统、版本、网络连接状态）