HarmonyOS编程开发实战：解决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内容白屏显示以及解决白屏问题的示例，运行后的初始界面如下所示：

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