Blazor Hybrid适配到HarmonyOS系统

1. 前言

Blazor Hybrid是一个基于Web技术的MVVM开发模式的客户端框架,它只有UI是由Webview渲染,而逻辑均由.NET开发,可以突破浏览器限制访问本地文件,或者发起TCP或者UDP请求,相比Electron框架,理论上性能会更好。

当我适配完.NET运行时,觉得应该快速适配一个UI框架,方便.NET开发者尝鲜,Avalonia目前完成度很低,还有一系列难以解决的问题,所以我想到Blazor Hybrid或许会更容易一些。

跟我想的差不多,大概只用了三天的时间就完成了适配,今天跟大家分享一下。

2. 项目状态

项目已完成适配,暂时没有发现明显的Bug,但是相比安卓或者iOS平台缺少原生API的包装库,只能调用C#标准库,或者通过P/Invoke特性调用HarmonyOS的原生SDK(NDK)。

代码仓库: https://github.com/OpenHarmony-NET/OpenHarmony.Blazor.Hybrid

运行截图:

3. 使用方式

  1. 打开OpenHarmony.Blazor.Hybrid.sln解决方案,并发布BlazorApp项目。
  2. 使用Deveco Studio打开OHOS_Project,配置好签名后即可运行程序。

另外可以通过chrome或者edge的devtools来调试手机中的webview(不包含.NET),详情参考: Devtools工具 - 华为HarmonyOS文档

4. 适配原理

Blazor和.NET交互是通过js的window.external.sendMessagewindow.external.receiveMessage来实现的, 只需要在webview里实现这两个函数,然后调用Blazor.start();启动Blazor,这部分代码请参考:https://github.com/OpenHarmony-NET/OpenHarmony.Blazor.Hybrid/blob/main/Src/BlazorApp/wwwroot/openharmony.js

一般Webview控件都会有原生代码与webview内的js交互的机制,HarmonyOS中是借助WebMessagePort机制实现的,关于WebMessagePort请参考官方文档: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/js-apis-webview-V13#webmessageport

Blazor Hybrid内部使用了基于反射的序列化,所以要为项目开启"默认启用基于反射的序列化",并配置rd.xml保留需要反射的元数据

为了保证Blazor Hybrid的异步任务可以正常的运行,需要实现一个单线程同步上下文,因为默认是多线程调度异步,而客户端往往需要单线程调度,代码: BlaozrDispatcher.cs

参考资料:

  1. https://github.com/tryphotino/photino.Blazor
  2. https://github.com/JinShil/BlazorWebView
相关推荐
2501_9209317014 小时前
React Native鸿蒙跨平台采用ScrollView的horizontal属性实现横向滚动实现特色游戏轮播和分类导航
javascript·react native·react.js·游戏·ecmascript·harmonyos
摘星编程16 小时前
React Native鸿蒙版:Drawer抽屉导航实现
react native·react.js·harmonyos
lbb 小魔仙17 小时前
【Harmonyos】开源鸿蒙跨平台训练营DAY9:获取分类数据并渲染
flutter·华为·harmonyos
mocoding17 小时前
Flutter 3D 翻转动画flip_card三方库在鸿蒙版天气预报卡片中的实战教程
flutter·3d·harmonyos
PfCoder17 小时前
C#中定时器之System.Timers.Timer
c#·.net·visual studio·winform
2501_9209317018 小时前
React Native鸿蒙跨平台实现推箱子游戏,完成玩家移动与箱子推动,当所有箱子都被推到目标位置时,玩家获胜
javascript·react native·react.js·游戏·ecmascript·harmonyos
qq_1777673720 小时前
React Native鸿蒙跨平台数据使用监控应用技术,通过setInterval每5秒更新一次数据使用情况和套餐使用情况,模拟了真实应用中的数据监控场景
开发语言·前端·javascript·react native·react.js·ecmascript·harmonyos
烬头882120 小时前
React Native鸿蒙跨平台应用实现了onCategoryPress等核心函数,用于处理用户交互和状态更新,通过计算已支出和剩余预算
前端·javascript·react native·react.js·ecmascript·交互·harmonyos
小雨青年21 小时前
鸿蒙 HarmonyOS 6 | 系统能力 (06) 构建现代化通知体系 从基础消息到实况
华为·harmonyos
木斯佳1 天前
HarmonyOS 6实战(源码解析篇):音乐播放器的音频焦点管理(上)——AudioSession与打断机制
华为·音视频·harmonyos