开源一个HarmonyOS 鸿蒙Next/小程序/Vue/RN UI互转的工具集

开源一个HarmonyOS 鸿蒙Next/小程序/Vue/RN UI互转的工具集

https://github.com/primstar-cool/eevee  
https://gitee.com/primstar/eevee

eevee

一个工具集致力提供鸿蒙arkts/vue/react/rn/各类小程序/快应用的UI代码的互转;

## how to use / 怎么使用

看unit_test中的代码，他演示了如何从源语言转换为eevee标准json，再从eevee标准json转为目标语言。

## source code type / 源语言类型

微信小程序(不支持wxs解析)；vue (vue2风格);react_native(仅简单支持);arkts(开发中...)；

## destination code type (some of them were outdated and will not be updated) / 目标语言类型（有些过时了将不再更新）

vue2/vue3/react/react native/鸿蒙arkts/安卓快应用/小程序(微信/头条/百度/快手)/图形渲染[cpp(opengl 1.x/2.x/D3D9/D3D11); js(cavas/webgl); as3(flash stage2d/stage3s)]

*unity3d(C#)/ios widget(swift)等我有时间会支持下；Flutter(Dart)/uniapp应该不会支持，它们本就为跨平台设计。

## how about covert logic code / 逻辑代码如何转换

逻辑代码在多平台间互转是几乎不可能的，但是一种到另一种倒是可能的。事实上，笔者有很多支持多平台的项目是同一套代码. 这套工具集致力于UI代码的转换，但会提供一些实例代码帮助完成多平台同构。

## reason of create this library / 为什么做这个库

鸿蒙arkts有点新，创建app没那么容易，它可以帮助开发者转换现有项目。当越来越多的开发者使用arkts作为源代码，它还可以帮助开发者移植到其他平台。遥遥领先。

////开发随想/////

看到HarmonyNext下一代没有安卓了，必然全面拥抱ArkTS，把手头一些东西整理一下，开源一个互转框架。

原始构架是小程序=>ArkTS H5=>ArkTS，由于APP开发，RN/Flutter较多，所以加入了RN。

仅转换UI部分，也就是先解析原始语言的数据=>UI的映射关系，并翻译为目标语言，而逻辑部分，如果想一套代码同构多个平台，会有很多编码规范要求【事实上，笔者所做项目都是一套代码同构的，有JS同构，也有Cpp通过JNI(java)/WebAssembly(js)//alchemy(as3)完成一套代码多处运行的 】，由于各个项目有各个项目的要求，所以对代码不做翻译。

如何集成入项目以及工具链？

这个不是一个交钥匙方案，需要自己集成入工具链，工具都是纯工具函数，实际项目中，gulp，rollup，webpack等都做过集成。
但如果不是最开始就作为同构项目开发，恐怕难以完成转换。而且UI以外的部分同构需要每个项目自己设计。

库的主要工作：

1. 解析原始开发语言的UI部分，生成一个中间文件，也可以叫标准文件。
2. 标准文件翻译为目标语言
3. UI部分做了大量的特性对其，比如小程序=>RN时，RN也会支持冒泡，也支持tag样式，组样式；微信小程序转百度小程序会有功能补齐（例如位操作）；对于不支持BackgroundImage的平台，做节点补齐。甚至还有伪类和媒体查询。
4. 当然支持越多功能意味着库越大，如果一个项目一个伪类伪元素都没写，加入支持不仅浪费容量，也浪费性能，所以还有根据项目生成核心库的功能。
4. CSS计算库，可以使仅支持Flex的平台比如RN/快应用支持传统布局，因为开发当年Flex兼容性不好，H5基本用流式布局开发。现在其实可有可无。
5. 标准文件的直接图形渲染，包括webGL,openGL 1.x(固定管线) 2.x+(Shader), Canvas, DX9 DX10, Flash stage,Flash stage3d；不过这次整理出来很多都会放弃了；