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)最新学习路线
该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发,不仅补充了华为官网未涉及的解决方案
路线图适合人群:
IT开发人员:想要拓展职业边界
零基础小白:鸿蒙爱好者,希望从0到1学习,增加一项技能。
技术提升/进阶跳槽:发展瓶颈期,提升职场竞争力,快速掌握鸿蒙技术
2.视频学习资料+学习PDF文档
HarmonyOS Next 最新全套视频教程 (鸿蒙语法ArkTS、TypeScript、ArkUI教程……)
纯血版鸿蒙全套学习资料(面试、文档、全套视频等)
鸿蒙APP开发必备
总结
总的来说,华为鸿蒙不再兼容安卓,对程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,才能在这个变革的时代中立于不败之地。