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

flutter 开发 web 似乎问题也不大

  •  
  •   wyfig · 8 天前 · 3263 次点击

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

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

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