。

随着移动应用需求的多样化和复杂化#xff0c;单一的开发方式往往难以满足所有…1.

HarmonyOS

Development是一种结合原生应用和Web应用的开发模式旨在同时利用两者的优势。

随着移动应用需求的多样化和复杂化单一的开发方式往往难以满足所有需求。

混合开发提供了一种灵活、高效的解决方案特别是在以下方面具有显著的优势

1跨平台兼容混合开发允许开发者编写一次代码并在多个平台如Android、iOS、HarmonyOS等上运行。

这大大减少了开发和维护成本。

2快速迭代Web技术如HTML、CSS、JavaScript的快速开发和部署能力使得混合应用可以更快地进行迭代和更新。

3丰富的Web生态借助丰富的Web生态系统开发者可以利用大量现有的Web库和框架快速实现复杂功能。

4原生性能通过将关键功能部分使用原生代码实现混合应用可以在保证性能的同时享受Web开发的灵活性。

为了更好地理解混合开发的概念以下是一张示意图展示了混合开发架构中原生代码与Web代码的结合。

1原生层

Layer包括操作系统如HarmonyOS、设备硬件和原生API提供高性能和底层功能支持。

2Web层

Layer包括HTML、CSS、JavaScript等Web技术负责应用的界面和逻辑部分。

3桥接层

通过这种架构开发者可以在Web层快速构建界面和业务逻辑同时利用原生层提供的高性能和丰富功能实现混合开发的最佳效果。

在HarmonyOS

来实现。

通过这些工具可以加载和显示网页内容进行页面控制和数据交互。

官方文档

})注意访问在线网页时需添加网络权限ohos.permission.INTERNET

1.3.1.2

4onTitleReceive网页document标题更改时触发该回调。

5onProgressChange网页加载进度变化时触发该回调。

6onRefreshAccessedHistory加载网页页面完成时触发该回调用于应用更新其访问的历史链接。

Web({

{}).onRefreshAccessedHistory(()

{}).onAppear(()

动态加载页面this.controller.loadUrl(url)//

对象this.controller.registerJavaScriptProxy//

...

webview.WebviewController()build()

{Navigation()

})}.title(混合开发).titleMode(NavigationTitleMode.Mini)}

}1.3.4.

--})}.title(this.title).titleMode(NavigationTitleMode.Mini)}

1.3.5.

this.controller.getBackForwardEntries()

当前页面历史记录索引

.titleMode(NavigationTitleMode.Mini)

2第二步定义菜单

{Image($r(app.media.startIcon)).width(18).aspectRatio(1).margin({

right:

刷新网页this.controller.refresh()})}.width(50).height(100%).justifyContent(FlexAlign.End).alignItems(VerticalAlign.Center)}

1.3.7.

api提供了应用与Web组件加载的网页之间强大的交互能力。

注入JavaScript对象到window对象中并在window对象中调用该对象的方法。

官方参考文档

{this.controller.registerJavaScriptProxy({//

1注入应用侧JavaScript对象//

3注入后window对象可以通过此名字访问应用侧JavaScript对象test:

(a)

picker.PhotoSelectOptions()photoSelectOptions.MIMEType

picker.PhotoViewMIMETypes.IMAGE_TYPE;photoSelectOptions.maxSelectNumber

1;const

photoPicker.select(photoSelectOptions)//

文件操作//

开始同步读取文件流到缓冲区fs.readSync(file.fd,

buffer)//

InjectKeys[])}3第三步在通用事件onAppear

执行注入

目录entry/src/main/resources/rawfile/index.html

!doctype

nameviewportcontentwidthdevice-width,

user-scalableno,

contentieedgetitle混合开发/titlestyle*

{margin:

idtest调用原生test/button/lilibutton

idsel调用原生select选择相册/button/li/ul

/div

{document.querySelector(#test).addEventListener(click,

{mg.test(我是来自web数据啦)})document.querySelector(#sel).addEventListener(click,

async

mg.select()document.querySelector(#img).setAttribute(src,

b64)})}

异步执行JavaScript脚本并通过回调方式返回脚本执行的结果。

官方参考文档

this.controller.loadUrl($rawfile(index.html))this.controller.runJavaScript(go(),

(error,

获取执行返回值AlertDialog.show({message:

res})})}build()

API可以轻松地在应用中嵌入和控制网页内容。

以下是几个关键点的总结

Web

2事件处理支持多种事件处理如页面开始加载、加载完成和加载出错、访问历史记录等。

3API