把之前刚用 flutter 写的 app 加上了 web 支持,然后几乎各种报错。
比如 app 上会弹出键盘,web 上不会,web 需要滚动条,app 上不需要,导致依赖的各种库不兼容。
新建个项目,flutter run -d chrome
直接空白给我看,但是一个 error 都没有,看了看 github 遇到这个问题不在少数。
想写一套代码,同时兼容 web/两家 app/三家桌面,有点不太抱希望了。
现在有没有哪家网站是用 flutter 跑的已上线的?
github 也搜不到可堪一看的示例项目,有没有同学推荐下。
1
ParfoisMeng 2021-03-18 14:32:12 +08:00
> 想写一套代码,同时兼容 web/两家 app/三家桌面,有点不太抱希望了。
说实话直接放弃吧。代码可以跨平台,但是页面设计、使用习惯、平台差异之类是没法儿跨的。业务逻辑代码可以尽量复用,但是 UI 层的大多都要对应平台去写。 目前相对成熟的移动端跨平台方案还可以,主要是 Android 、iOS 在表现上差异较小,所以 Flutter/RN/等一套代码可以两端跑,但是它们大多数功能性的东西还是要原生实现。 |
2
Jirajine 2021-03-18 14:39:26 +08:00 via Android
同时兼容 web 和桌面好说,web+web 套壳。
同时兼容两家 app 也好说,flutter/rn 但桌面端和移动端是很难兼容的,交互逻辑差异太大。 |
3
murmur 2021-03-18 14:51:32 +08:00
|
4
shynome 2021-03-18 15:01:58 +08:00 1
flutter web 我遇到的问题
- 文字无法复制, 全部是 canvas 渲染的 - 字体默认从谷歌 cdn 加载, 加载未完成时字体渲染成方块 - 不支持 history 路由模式 - 各种资源大小总和过大, 默认模式下要 10M , 优化后也需要 2M |
6
lagoon 2021-03-18 15:10:06 +08:00
同时兼容 app 和 web,感觉听起来都微妙诶。
事实上,我也从来没见过同时兼容手机和 pad 的。尺寸相差那么大,所谓的兼容就是做各种处理。 |
7
love 2021-03-18 15:18:13 +08:00
不过明显还是个半成品,用画布画的界面操作手感也怪怪的没 HTML 手感好,卡倒不是太卡只是 CPU 满载
这副样子一年内肯定不能用 |
8
huobazi 2021-03-18 15:19:04 +08:00
不要老想着通吃,端了别人的饭碗,容易撑着,O(∩_∩)O 哈哈~
|
11
AndyAO 2021-03-18 16:45:30 +08:00
让我想起了这个观点,想用新技术没问题,但前提是对这个新技术有很深的理解,能够处理遇到的各种问题。
在此期间会大量的学习,而且要在无人区中漫步,要做好这样的准备。 |
12
AndyAO 2021-03-18 16:48:33 +08:00
@AndyAO #9 上述观点来自《教授 洪强宁和他穿越的技术江湖》
豆瓣选择使用 Python,当时用这个技术做 Web 是很新的。 * * * 阿北曾经表示,别人做过、做得成熟的事情豆瓣一定不会做。这种风格体现在公司的方方面面,在技术上也是如此。豆瓣的标准是,在新技术与成熟技术之间,一定选择新技术——新技术之所以出现,也正是因为它解决了原有成熟技术携带的某些问题。 “新的往往好过旧的。”洪强宁说。但前提是,完全掌握这项技术,“ 对于能够解决它带来的问题有足够的自信心。” 无论怎样,一旦与过去或他人在道路选择上划清界限,掉入陷阱的风险也会随之增高。 豆瓣当时选择的很多技术应用都处于刚刚成熟的阶段。遇到新问题的回答也非常简单:去研究它——至少要可以修改它的代码。失败的案例累积了不少,但,“没有什么大不了的”。 |
15
HeapOverflow 2021-03-18 17:13:12 +08:00 via iPhone
flutter web 不知道有什么胆量标 stable 的...
|
16
Muniesa 2021-03-18 17:16:02 +08:00
字体倒没问题,可能因为挂了梯子,就是滚动感觉不是很流畅,用的 chrome
|
19
mrhhsg 2021-03-18 17:28:44 +08:00
主要还是性能问题,列表滑动丢帧很明显
|
20
love 2021-03-18 17:37:43 +08:00
@Veneris 的确,鼠标上下狂拖有点卡,可能页面太复杂? 这个简单点的页面倒是完全没问题,你在图片列表里狂拖都非常顺滑,纯 WEB 很难做到这么滑 :
https://vivid-explorer.web.app/ |
21
damngood 2021-03-18 17:46:49 +08:00
滑动页面是挺卡的. Safari on iMac 27 2020
|
22
wanguorui123 2021-03-18 18:26:34 +08:00 via iPhone
flutter Web 还是比较鸡肋的
|
23
WebKit 2021-03-18 18:36:32 +08:00 via Android
之前写过一个,卡,bug 很多
|
24
murmur 2021-03-18 18:39:51 +08:00
@meteor957 css 都有字体降级机制,都 2021 年了,因为英文字体在 utf-8 环境下还能出渲染问题,也够奇葩的
|
25
IGJacklove 2021-03-18 23:56:04 +08:00 via Android
官方有个演示项目,体验了一般吧,不过跨多端还是挺厉害的。
|
26
sunbreak 2021-03-19 08:53:06 +08:00 1
自己使用不建议,除非你有美团这种优化能力: https://tech.meituan.com/2021/03/18/flutterweb-in-meituanwaimai.html
|
27
SmiteChow 2021-03-19 11:24:40 +08:00
目标不同,技术再强也抹不平的,还是算了吧。
|
28
wednesdayco 2021-03-19 19:05:22 +08:00
@murmur 感觉还行,字体方块那是字体文件没拉取到吧……
|
29
AndyAO 2021-03-20 11:31:57 +08:00
<迈向 Flutter 深水区:美团外卖 Web-App 一体化架构实践>
https://mp.weixin.qq.com/s/PWeV2CDP47uHNo9P2QeM2A 可以看到美团遇到了很多 Flutter 上的硬性问题,不使用黑客(超越边界)的方法已经很难解决了,如果没有迈向深水区的勇气,那么估计是要放弃的,但美团组织研发能力去解决了它们,所以他们的新技术用的非常成功,节省了大量的成本。 这就是为什么有些人用新技术做出来的东西感觉像个小学生,而有些人却做得很成功。 解决的硬性问题主要有: 1. 各种各样很小的硬问题,解决的方案就是自己 Fork 官方 SDK,然后将问题绕过或解决,这些问题随着版本的更新,也得到了很大的缓解。 2. 处于合规和安全考虑,Flutter 官方是不支持动态化的。通过离线分析和运行时解释执行的方案解决了这个问题。 3. 在官方不支持的条件下适配鸿蒙,将 Flutter 引擎的实现层替换成鸿蒙的 API 。 |