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

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

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

2.白屏原因分析

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

ErrCode WebviewController::LoadUrl(std::string url, std::map 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);
}

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

3.白屏解决方式示例

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

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

步骤1：创建Empty 项目。

步骤2：在.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 = `


  前面的内容#后面的内容，咋区别对待呢!

`
  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：单击“加载”按钮，截图如下所示：

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

4. 加载功能分析

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

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

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

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

let base64Content = string2Base64(this.webContent)
              this.controller.loadData(base64Content, "text/html", "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)
}

最后

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

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

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

鸿蒙（ NEXT）最新学习路线

该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发，不仅补充了华为官网未涉及的解决方案

路线图适合人群：

IT开发人员：想要拓展职业边界

零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。

技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

2.视频学习资料+学习PDF文档

最新全套视频教程（鸿蒙语法ArkTS、、ArkUI教程……）

纯血版鸿蒙全套学习资料（面试、文档、全套视频等）

鸿蒙APP开发必备