V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
wyfig
V2EX  ›  Web Dev

flutter 开发 web 似乎问题也不大

  •  
  •   wyfig · 150 天前 · 4484 次点击
    这是一个创建于 150 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近开发一个 flutter 的项目,一开始并没有考虑 web 端适配,都是按照 iOS 和安卓来进行开发和适配的。后面说要上一个 web 版本,就一个个三方库去查看处理下,发现其实 90%的三方库都是支持 web 端的,只有个别的进行了替换或者 web 端用不到的。 差不多一天左右就适配完成了。

    运行起来兼容性跟 app 端显示和使用也都差不多。 之前自己并不会 vue 这些,但是瞬间感觉自己会 web 的开发了,哈哈,多了一项技能。这次整体体验下来,感觉 flutter web 还是可以的,不知道为啥网上那么多差评。后面如果有普通的 web 项目,感觉可以考虑下 flutter web ,对于会 flutter 开发客户端的朋友来说,可以尝试下。

    40 条回复    2024-06-21 14:48:16 +08:00
    qW7bo2FbzbC0
        1
    qW7bo2FbzbC0  
       150 天前
    tauri 怎么样?
    flytsuki
        2
    flytsuki  
       150 天前
    打包之后资源太大
    iOCZS
        3
    iOCZS  
       150 天前
    用的 cavas 绘制,跟实际的 web 开发还是不一样的
    wyfig
        4
    wyfig  
    OP
       150 天前
    @iOCZS 经过简单修改之后,可以完美运行,这点超出我的想象。具体的底层,不知道具体差距有多大。
    YVAN7123
        5
    YVAN7123  
       150 天前
    道爷你成了
    a33291
        6
    a33291  
       150 天前
    是的,而且逆向还更麻烦一些🤣
    wyfig
        7
    wyfig  
    OP
       150 天前
    @flytsuki 实际体验下来并没有太差,整体速度还可以。也就第一次稍微慢点,后面有缓存也很快了。
    NewTab12138
        8
    NewTab12138  
       150 天前
    除了不好 seo, 首次加载速度太慢,字体需要从 google 下载之外,使用起来,体验还是没问题的
    wyfig
        9
    wyfig  
    OP
       150 天前
    @NewTab12138 不考虑 seo 的复杂项目,用起来完全没问题。
    murmur
        10
    murmur  
       150 天前
    语法太差了,app 反正也是壳套 h5 ,里面的 h5 拿出来复用就行,业务还是 h5 写舒服
    wyfig
        11
    wyfig  
    OP
       150 天前
    @murmur #10 完全看自己实际业务需求和技术栈。拿过来能用的技术都是好技术。
    jones2000
        12
    jones2000  
       150 天前
    @flytsuki canvas 只能用 h5 , 其他平台的要么是功能阉割,要么就是卡。
    flyqie
        13
    flyqie  
       150 天前 via Android
    阿里无影不就是这么做的吗,他们全端都是走的 flutter 。
    wyfig
        14
    wyfig  
    OP
       150 天前
    @jones2000 #12 不太理解,什么阉割,什么卡?有举例吗?
    jones2000
        15
    jones2000  
       150 天前
    @wyfig 绘图异步,保存图片大小限制,SVG 绘图不支持等等多了。
    AoEiuV020JP
        16
    AoEiuV020JP  
       150 天前
    顺便再适配一下 windows/linux/macos ,全平台成了,
    kneo
        17
    kneo  
       150 天前 via Android   ❤️ 1
    小马过河。自己满意就行。
    liyafe1997
        18
    liyafe1997  
       150 天前
    这世道真奇妙,一边 App 套壳浏览器,一边 Web 用 WASM & Canvas 跑 Native App
    liu731
        19
    liu731  
       150 天前
    andyC
        20
    andyC  
       150 天前
    @liu731 这也太卡了
    wyfig
        21
    wyfig  
    OP
       150 天前
    @AoEiuV020JP #16 估计这个难度要不小。flutter web 本来我也不看好,开发 app 的时候也没有想着适配 web 。后面有了这个需求才去适配了下,结果需要做的远比想象的少的多。如果后面对 seo 要求不高,交互比较多的 web 项目,感觉可以直接用 flutter 动手做。毕竟做 web 可以收获 iOS 和 Android 平台代码, 做 iOS 和安卓可以获得 web 端。
    wyfig
        22
    wyfig  
    OP
       150 天前
    @jones2000 #15 目前还没碰到这个需求和问题 估计做多了还有其他问题吧
    ExplodingFKL
        23
    ExplodingFKL  
       150 天前
    如果会 kotlin 的话其实可以测试下 kotlin multiplatform (
    milukun
        24
    milukun  
       150 天前
    打包大小问题可以参考:
    https://juejin.cn/post/7149441892994777125
    (里面有插件可以直接用)
    实际用这个方法分割 JS 后,每个文件会很小,加载很快。上 CDN 后效果更佳
    milukun
        25
    milukun  
       150 天前
    https://web.oopz.cn/#/login
    这事一个大佬做的,flutter 的社区,模仿 discord
    我觉得没毛病
    RightHand
        26
    RightHand  
       150 天前 via Android
    flutter web 就是赠品,附带使用够了。主力开发的话不如选其他。
    i1MqODKe0P16t1Ra
        27
    i1MqODKe0P16t1Ra  
       150 天前
    强。做后端的,之前看过 flutter ,写了几个小例子可运行。觉得完全可以上手。如果又支持 web,又支持 app,岂不是全栈已成了
    luck66
        28
    luck66  
       150 天前
    flutter web 首次加载太慢
    这问题不解决,flutter web 只能当作玩具
    zengxs
        29
    zengxs  
       150 天前
    一个是 flutter 的 web 应用有些默认行为和原生 web 不太一样,比如选择文本,翻译等等,用户刚用可能不太习惯
    另一个是大部份浏览器插件应该都是不支持 flutter app 的

    但是如果只是内部用的 web app 其实以上都不是问题

    PS: React 其实框架设计思路、用法和 Flutter 都差不多,如果你会 Flutter ,上手 React 应该很快,感兴趣可以学一学哈哈
    kxks145
        30
    kxks145  
       150 天前 via Android
    我记得 flutter web 的操作逻辑还是手机的那一套吧,选择文本默认选不了,要多套一层 widget;页面跳转 url 地址不变,也要单独写点东西实现,不知道现在怎么样了
    VeryZero
        31
    VeryZero  
       149 天前
    之前中文字体加载的问题现在不知道解决了没
    Hozoy
        32
    Hozoy  
       149 天前
    @milukun #24 使用的--web-renderer html 渲染的,这个 flutter 后期路线已经明确要进行废弃的
    milukun
        33
    milukun  
       149 天前
    @Hozoy 是的,所以可以看看楼下的,canvas 的项目。那大小确实没办法了。但是现在大家网速也不是 0 几年那会了,打开还是蛮快的
    milukun
        34
    milukun  
       149 天前
    @joyarise 还可以使用 MPFlutter 2.0 做小程序,只不过商用要给作者 300 块授权费
    milukun
        35
    milukun  
       149 天前
    @kxks145 地址是变的,只不过在 /#/ 后面
    milukun
        36
    milukun  
       149 天前
    @VeryZero 出现口口口吗,可以看看 25 楼的效果
    i1MqODKe0P16t1Ra
        37
    i1MqODKe0P16t1Ra  
       149 天前
    @milukun 谢谢推荐。 个人不喜欢要给授权费的开源。 如有开源的 flutter APP,给推荐一个看看啊,对首次排版有点痛苦,交互和控制处理没问题了
    milukun
        38
    milukun  
       148 天前
    @joyarise #37 开源的话建议看看 Wonderous (应用商店可以下载到)是一个比较优秀 flutter app 示例(动画效果很多)
    https://docs.flutter.cn/posts/wonderous-explore-the-world-with-flutter
    i1MqODKe0P16t1Ra
        39
    i1MqODKe0P16t1Ra  
       148 天前
    @milukun 谢谢
    wyfig
        40
    wyfig  
    OP
       148 天前
    @kxks145 #30
    @milukun #35
    地址可以处理,有两种 Hash 和 Path , 默认是 Hash ,也就是带有 # ,并且后面可以带参数。可以用 url_strategy 处理为 path 模式,跟普通的 web url 没有什么区别,后面也可以正常传参。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2701 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 12:22 · PVG 20:22 · LAX 04:22 · JFK 07:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.