webflux使用（webflux太难用了）

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>

<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/master/code/web/WebviewLoaddata

本系列源码地址：

https://gitee.com/zl3624/harmonyos_network_samples

webflux使用（webflux太难用了）

相关推荐