HarmonyOS开发实战系列：办理web组件加载网页白屏规范

杀鸡焉用牛刀 · 2024-10-1 00:12:14

目次
1. web组件加载网页白屏表现
2. 白屏原因分析
3. 白屏办理方式示例
4. 加载功能分析
最后

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编码的函数如下所示：

最后

有许多小伙伴不知道学习哪些鸿蒙开发技能？不知道须要重点把握哪些鸿蒙应用开发知识点？但是又不知道从哪里动手，而且学习时频繁踩坑，最终浪费大量时间。所以本人整理了一些比力合适的鸿蒙（HarmonyOS NEXT）学习路径和一些资料的整理供小伙伴学习
点击领取→纯血鸿蒙Next全套最新学习资料
希望这一份鸿蒙学习资料能够给大家带来帮助，有须要的小伙伴自行领取~~

一、鸿蒙（HarmonyOS NEXT）最新学习门路

有了门路图，怎么能没有学习资料呢，小编也预备了一份团结鸿蒙官方发布笔记整理收纳的一套体系性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技能、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）…等技能知识点。
获取以上完整版高清学习门路，请点击→纯血版全套鸿蒙HarmonyOS学习资料
二、HarmonyOS Next 最新全套视频教程