My Dev log

[xmsz-stu]

之前用过
移动端：

1. React Native，支持范围最广，但是开发和踩坑各站一半时间，只能作为后备方案
2. Flutter，不是很爱，除了跨端，没有解决其他问题... 写起来依旧麻烦，而且要管理的事情太多了，综合并没有提升效率
3. 小程序及小程序框架，比如什么微信自己的/Taro/Rax.js...
4. Kraken(openwebf)，是的，这个我都用过
5. 其他什么weex/uni app/Capacitor/Cordova/Ionic都浅尝，把事情变得很糟而已
6. Android原生kotlin也写过（和AI一起写的）

桌面:

1. electron，挺好的，唯一问题只有一个，那就是最少100mb... 对于写一个小工具来说，简直很无语
2. tauri，不错，webview方案真的就够了... 虽然现在也支持移动端，但是限制很多

总得来说就看重几个地方，
第一个：跨端

最基础是同时支持Android和iOS，但说实话吧，这个场景有点少，除非是国外工具商... 毕竟第一个大公司肯定拆分更好，第二个要收费国内不会上Android，第三个做工具，国内iOS机会有限

然后就是跨PC和手机，这个也是蛮扯的... 而且兼容麻烦的程度还是不如分开写

所以，跨端这个需求还蛮少的，只是以前因为考虑扩展性，所以会关注，现在来说觉得不是很重要
有肯定更好，毕竟换个说法，并不是要一个产品做多端(硬整)的需求，而是不管开发Android和iOS都可以同样方式实现(提高效率)

第二个：写界面

这是最关键的，flutter和原生其实写逻辑上已经很方便很好了，没啥问题，写起来很轻松和简单啊，但是写界面就是一坨大便... 一个是写的时候，那无限嵌套、密密麻麻的属性、麻烦。一个是预览，flutter有热更新还说的过去一点，android的compose就... 写界面全靠经验和抽象，然后一要改动，脑壳就痛
而且现在都是后端服务处理，实际上前端现在不管什么端界面还是最重要的事情，那写UI是能提示效率和最值得关注的地方

那什么写界面最方便？肯定是xml/html+css方式的，或者说是结构+装饰的，这符合现实里的建房子，肯定是画图纸，搭骨架，搞外立面，而原生写界面就是程序逻辑式的，就太原始了。

然后还有其他涉及到的什么性能、原生通信、标签写法、渲染模式、运行线程都是考量点，先不说了

---

那什么才是我想要的，确实是用前端框架(react/vue)+tailwindcss来写是最高效的，最主要的就是解决写UI这件事情... 这样才能更快速的迭代，改起来一点负担都没有。

---

那使用lynx对我来说肯定不算陌生，毕竟实际上就是小程序+flutter+kraken的思路，用法也差不多，只不过因为开放社区的内容还比较少，踩坑比较麻烦

---

祝我好运

我刚好有个项目，简单来说就是把应用变成一个代理节点+内网穿透
转成程序需求就是，调用第三方二进制文件 + 界面展示状态就行

pc端用tauri实现了，半天搞定，效果不错
android用原生+AI写，2天搞定，也能用

但是，现在需求要改了，pc端简单，android就痛苦了，界面重写烦死
不如直接用其他重写（AI也是回答我的）

[Shouqun]

非常感谢你的经验分享，跨端开发确实需要同时解决好平台差异、运行性能以及开发（踩坑）体验多个问题；比如开发范式和DSL的选择上，需要开发的易用性、工程可维护性这些角度去做取舍。 现阶段Lynx开源的部分主要是Android和iOS平台实现SDK，以及在DSL上提供React的支持。 面向PC平台的开发还没有开源出来，我们会在今年晚些时候开放。 然后细节功能、开发调试体验这些也需要不断的去优化和改进。

我们希望能为开发者提供更全面的跨平台解决方案，也希望能够从大家的实际开发经验中得到更多的建议， 非常感谢，多交流

[xmsz-stu]

第一步：创建项目 ✅
第二步：预览项目 ✅

在android设备或者模拟上安装 Lynx Explorer就能预览了

第三步：尝试热更新 ✅

第四步：尝试移植现有组件❎

因为lynx的标签和其他一样，还是以View+Text这种，还没完全适配html标签
所以需要把原有react项目的标签全部改成View(自定义组件，判断环境，web端用div渲染，lynx用View渲染，还有事件绑定)，相当于在搞个兼容层

太麻烦了... 后续有时间在瞎搞

第五步：加上tailwindcss✅

没有这个，等于毫无意义

参考社区：https://gearboxgo.com/articles/tech-talk/setting-up-tailwind-with-lynx

但是兼容补全，而且不支持v4

第六步：加上shadcn❎

其他UI想都不用想... 只能装tailwind的相关组件
不行，还是会很多问题
比如

ESModulesLinkingError: export 'cloneElement' (imported as 'React') was not found in 'react' (possible exports: Children, Component, Fragment, InitDataConsumer, InitDataProvider, MainThreadRef, PureComponent, Suspense, createContext, createElement, createRef, default, forwardRef, isValidElement, lazy, memo, root, runOnBackground, runOnMainThread, useCallback, useContext, useDebugValue, useEffect, useErrorBoundary, useId, useImperativeHandle, useInitData, useInitDataChanged, useLayoutEffect, useLynxGlobalEventListener, useMainThreadRef, useMemo, useReducer, useRef, useState, useSyncExternalStore, withInitDataInState)

lynx/ERROR [css_parse_token_group.h:129]: [0x1f6efb240:ERROR:css_parse_token_group.h(129)] CSS selector parse failed, ignore: ::backdrop

The `outline-ring/50` class does not exist. If `outline-ring/50` is a custom class, make sure it is defined within a `@layer` directive.

然后还遇到一个问题就是，lynx/ERROR [css_parse_token_group.h:129]: 这种报错怎么都清理不掉... 后面再仔细看

算了，还是都先手写吧

第七步：调试 ✅

第八步：请求✅
用tanstack/query + fetch，可以用

第九步：弹窗
用现有的估计不大行，只能用自带的

所以现在遇到比较麻烦的问题就是

1. 各种环境补全不齐
2. 无法复用其他包
3. 没有兼容html标签
4. 默认不支持渲染svg
5. tailwind支持不全(>svg/sizes-)
6. text需要单独设置字体大小/颜色，无法继承父级
7. 不支持第三方的话，就缺少默认的UI框架
8. 不支持第三方常用的图标库，比如lucide-react(svg)
9. image不支持base64
10. 不支持伪元素？所以很多字体图标文件用不了
11. -webkit-font-smoothing" is not supported now !
12. axios的请求适配器
13. 没看懂TextDecoder怎么引用
14. 不支持iconv-lite
15. text.className不支持'.' ?
16. text嵌套里子元素边距会失效
17. 不支持<></>
18. 好像不支持bg-black/50或者bg-opacity-50写法

还有其他待记录

1. 使用tailwind记得设置root字体大小，不然小得很
2. 会遇到样式单位比较乱的情况，默认是px，tailwind是rem
3. lucide图标先用字体文件方式用一下

[xmsz-stu]

2025年03月28日

今天继续人肉对齐环境

1. 基础组件，toast/confirm/alert/sheetMenu，这些比较基础，逻辑方面配合全局状态可以轻松解决，样式方面比较蛋疼，基本上就是粗糙的先用着

2. 缺少api，比如最基础的localStoreage，这个还得和原生通信，虽然确实得这样，但是希望有官方自带扩展方式，然后lynxBrowser也能内置，不然太麻烦，还得自己去改源码，然后那个源码编译有点麻烦...

3. 昨晚回家用windows写，除了没有devtool其他没影响

所以现在的支持度还不算很高，rax.js在开放的时候就已经支持多端组件、官方UI库、uniApi(多端api)等基本上可以用上的
lynx就是啥也没有，全靠自己先手撸

然后其实，我觉得这种手写是很蠢的事情，因为他无法对接上现有react社区的资源，虽然并不是走react native这条路，只是选择了jsx当dsl，选择react作为代码逻辑风格而已。但都其实都已经做得很不错，可以继续啊
api类的解决简单，无非就是有些环境没有，避开就行

组件实在麻烦比如，把html标签全部换成view和text，这一步太蠢了，说实话可以在工程方面去解决，不要用户人工太蠢了

不过我感觉lynx有个优势就是社区人群不错，因为打着的都是tiktok的旗号，很多优质老外共享社区。之前那些因为群体都是国内，导致社区生态几乎为0... 全靠官方，然后官方忙东忙西...

所以，现在的不完善，还是可以靠社区补起来的，开发团队也能更专注

---

5. 用monorepo来实现代码共享

其实这也是很多UI库的方案，就是把逻辑剥离出来，这部分是可以共享的
不过因为没有UniApi，导致逻辑并不完全能玻璃，有些还是得手传进去，比如本地储存
要么手动传入，要么根据环境写判断条件然后在调用不同方法执行

---

6. 实现input

7. 实现deviceID

8. 实现localStorage

9. 实现调用第三方服务/随机端口

10. 打包

11. 其他

• 还有一些比如生命周期的兼容还没去做
• 日志系统
• size-1.5 不支持，都先手动改成w-x h-x
• items-center 好像没效果
• 如果text的子元素text边距会失效，view里的子元素text不能继承view的颜色，这些都是和web端不对齐的情况
• tailwindcss的动画好像都没补全
• animation的0%和100%的值不能忽略

12. 图标
    之前用Lucide还舒畅，现在默认不支持svg，只能使用iconFont的版本，缺点就是1. 不能改strokeWidth 2. 大小得通过字体大小改变(也可以鸡贼点自己转换一下)
    然后因为before这类的伪元素没有，所以自己重写组件，把before的content用text包裹在外面展示，至少能用

13. 启动好像有一段时间是白屏了
    后面在解决

14. 扩展Lynx Explorer
    主要用来测试原生模块的
    MacOS下环境安装还算正常，慢了一点(开代理)，少了corepack(开启)，就ok了
    android studio打开项目，gradle版本太低，IDE引导升级到8.5(失败)
    还是老老实实环境装OpenJDK 11，然后studio里选择版本
    studio打开失败，手动打包，20分钟成功，还是打不开，只能用命令行
    命令行虽然成功但是打开就闪退...

然后比较蛋疼的是，我现在如果是自己编译就涉及到后续无法更新的问题，比如官方更新了，我可能不知道，就算知道下载了，又要重新开始，很麻烦

样式90%多端对齐了

[xmsz-stu]

2025年04月01日

1. 遇到一个很奇怪的问题，那就是执行natvie module的时候，动画直接卡住了... 但又不是全部动画卡住. 不确定和什么有关系，有时间再去找了
2. 现在不知道在什么时候关闭启动屏，好像没看到lynxView的loaded生命周期回调，导致现在，启动屏关了，界面还是白的，有点好笑。
3. 构建出来的文件，打不开了，在catlog里看不出啥，就是JS脚本问题
   开发可以，构建不行，大概率就是压缩的问题，偷懒直接把压缩关了，然后就正常了...
4. 构建出来有点大，因为包了一个v8引擎，没办法

V8 引擎相关文件：
libv8_libfull.cr.so (arm64-v8a: 20MB, armeabi-v7a: 13MB)
开发工具相关文件：
liblynxdevtool.so
liblynxdebugrouter.so

终于算告一段落
因为业务比较赶，所以很多都顾不上了，直接能跑起来就行...

这个感觉和之前用kraken差不多，就是会遇到很多大大小小的问题，还有大大小小的限制...
不过现在kraken在开发体验度上会好很多，毕竟kraken已经实现了大量的组件和api

总之，在完善程度上，lynx还不如kraken，但是这个是时间问题而已。毕竟kraken现在单兵作战也没业务支撑出路并不大...
最希望的肯定是直接能够复用现有生态，不然再写一套是在有点... 现在效率就卡在这一块