V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
registered
V2EX  ›  分享创造

用不成熟的 flutter web 做了个网站 - 哭一场

  •  1
     
  •   registered · 2020-01-20 14:03:18 +08:00 · 18587 次点击
    这是一个创建于 1519 天前的主题,其中的信息可能已经有所发展或是发生改变。

    用不成熟的 flutter web 做了个网站

    目前,flutter web 还不成熟,官方不建议在生产环境中使用。于是我本着“我不入地狱谁入地狱”的觉悟,趟了趟这坑浑水。

    说实话,比想象中的坑少,并没有被坑得爬不起身。但依旧还有几个大问题还没有找到解决方案。

    先上地址

    两个地址都非常慢,无法忍受的慢,所以如果不是非常感兴趣,恐怕你是和它无缘了。

    tips:挂代理速度还是可以的
    

    既然如此,先挂几张图吧

    电影

    故事

    照片

    一言

    说点

    简单介绍一下这个小破站 - 哭一场( kuyichang ):

    • 包括电影、故事、照片、一言、说点五个板块,内容核心就是两个字:“催泪”,网站定位是帮憋屈的你哭出来,让你哼着歌进去,喊着娘出来。

    • 电影数据来自豆瓣

    • 故事、照片、一言来自网络收集

    • 说点里面的诗词 API 来自https://www.jinrishici.com/

    • 有一个切换天气的功能,使用动画实现,事实证明大量控件的 rebuild 会干死自己

    • 目前没有做适配

    需要吐槽的地方:

    • debug 是真难用

    • 图片上面不能盖一层颜色(纯色或渐变)

    • build 的 js 太大了

    • 多控件 rebuild 还是卡的

    总体感受:

    确实能很真切地感受到 web 端的不成熟,很多交互和布局都是移动端的模式,硬用在 web 上来感觉有些别扭。

    不得不夸赞的地方是,dart 用得很舒服,继承了传统语言的优点,又具有现代语言的优雅高效。

    刚开始对于 widget 的嵌套很不适应,但慢慢地也就习惯了,其实它也促使你更细化地分离组件,对于 flutter 的 widget 树 rebuild 机制来说,组件颗粒度是越小越好的。

    flutter 在 web 上的渲染还能接受,之所以不想用 flutter 写移动端,首要原因就是在移动端的渲染和原生在视觉上还是有很大差距。

    欢迎资源推荐或拍砖~

    第 1 条附言  ·  2020-01-20 20:05:04 +08:00

    雨越大越卡。上文有提到,是因为大量对象的rebuild。如果有优化想法的同学,欢迎与我交流。

    99 条回复    2020-06-12 02:21:46 +08:00
    murmur
        1
    murmur  
       2020-01-20 14:05:30 +08:00
    windows 下这渲染看着真难受。。。
    xttli123
        2
    xttli123  
       2020-01-20 14:06:56 +08:00
    很卡
    maomaomao001
        3
    maomaomao001  
       2020-01-20 14:12:07 +08:00
    mac 上非常卡 (滑动时)
    Vegetable
        4
    Vegetable  
       2020-01-20 14:14:49 +08:00
    一言那个模块,回弹太快了点,用滚轮都鬼畜了
    murmur
        5
    murmur  
       2020-01-20 14:16:49 +08:00
    另外一个问题,电影的页面似乎只支持滚轮,不支持键盘事件
    ngrok111
        6
    ngrok111  
       2020-01-20 14:18:19 +08:00
    github 地址访问速度还行,另一个半天都打不开( 土澳渣网 )
    windfarer
        7
    windfarer  
       2020-01-20 14:18:34 +08:00
    有点卡
    Tink
        8
    Tink  
       2020-01-20 14:22:32 +08:00
    图好像全挂了
    itstudying
        9
    itstudying  
       2020-01-20 14:23:32 +08:00
    下雨的效果是一阵一阵的
    zhw2590582
        10
    zhw2590582  
       2020-01-20 14:24:33 +08:00
    慢,而且控制台很多错误
    speedofstephen
        11
    speedofstephen  
       2020-01-20 14:30:08 +08:00
    好巧阿,我这几天也想着这个创意呢。感觉网易云音乐很多歌曲的精彩评论也很催泪。
    zhanziyang
        12
    zhanziyang  
       2020-01-20 14:30:56 +08:00
    太丧了,玩不下去
    CoCoMcRee
        13
    CoCoMcRee  
       2020-01-20 14:32:43 +08:00
    很好奇...怎么会如此的卡
    jayin
        14
    jayin  
       2020-01-20 14:36:13 +08:00
    还有很大的改进空间
    lookas2001
        15
    lookas2001  
       2020-01-20 14:45:34 +08:00 via Android
    卡。。卡的
    oubenruing
        16
    oubenruing  
       2020-01-20 14:51:17 +08:00
    我还以为写 flutter web,写的楼主哭了一场。
    murmur
        17
    murmur  
       2020-01-20 14:52:20 +08:00
    不知道你们说网卡还是页面卡,windows 7 代 u chrome cpu 瞬时占用突破 50%,750ti 亮机卡都有 30%负载,不过时好时坏,考虑到 windows 的 chrome 比 osx 要好,mac 卡也是应该的
    关雨保平安
    heijiangjun
        18
    heijiangjun  
       2020-01-20 15:01:50 +08:00
    简单的效果也这么卡,确实有点不能接受。话说设计挺漂亮的,楼主自己设计的吗
    heijiangjun
        19
    heijiangjun  
       2020-01-20 15:05:23 +08:00
    “flutter 在 web 上的渲染还能接受,之所以不想用 flutter 写移动端,首要原因就是在移动端的渲染和原生在视觉上还是有很大差距。“ 我用 flutter 自己写了个小应用玩,debug 模式下运行在红米 k20 上感觉挺流畅的,视觉上也和原生没太多区别啊
    pota
        20
    pota  
       2020-01-20 15:06:34 +08:00
    1.5M 的 js。。。
    Lombard
        21
    Lombard  
       2020-01-20 15:10:43 +08:00
    不知道为啥,我对这种 hover 效果有种生理上的不适
    lylijincheng
        22
    lylijincheng  
       2020-01-20 15:23:57 +08:00
    @CoCoMcRee 同好奇。。
    zokingo
        23
    zokingo  
       2020-01-20 15:24:32 +08:00
    @Lombard 是的,我也有这种感觉。画风变换太大又给人卡顿的感觉。不知道是不是单纯 PC 端的问题
    kkniub
        24
    kkniub  
       2020-01-20 15:33:18 +08:00
    (((((()))))) 是这样的吗?
    love
        25
    love  
       2020-01-20 15:48:59 +08:00 via Android
    看了标题还以为是 flutter 写 web 太痛苦了大哭了一场
    gaigechunfeng
        26
    gaigechunfeng  
       2020-01-20 16:31:25 +08:00
    我靠。为什么我看着一点都不卡啊?
    难道是我的电脑配置太牛逼了。
    mmrx
        27
    mmrx  
       2020-01-20 16:43:45 +08:00
    确实一卡一卡的,不是很流畅
    不知道是代码的问题,还是确实 flutter web 转 js 优化做得不够
    楼主行动力很强
    mgrddsj
        28
    mgrddsj  
       2020-01-20 16:45:14 +08:00 via Android
    移动端竖屏显示不出来电影图片,横屏时内容显示不全。滑动时卡得不行,Android Chrome 79 + 骁龙 835
    chanchan
        29
    chanchan  
       2020-01-20 16:53:38 +08:00
    电影简介应该用渐变缓慢翻页的动画,这样弹出来一点都不想哭
    别的动画也太突兀了,没内味儿
    murmur
        30
    murmur  
       2020-01-20 16:55:47 +08:00
    @mmrx 应该是 flutter 转 js 优化不行,edge 的调试工具看 70%的 cpu 占用都在脚本上

    建议谁给楼主优化一下,做个欢快点的主题,名字我都想好了就叫撸一场
    Cbdy
        31
    Cbdy  
       2020-01-20 17:01:43 +08:00
    f12 了一下,这个页面爬虫没法爬😂
    mmrx
        32
    mmrx  
       2020-01-20 17:05:29 +08:00
    @murmur 哈哈哈哈 @registered 建 议 改 为: 撸 一 场
    hst001
        33
    hst001  
       2020-01-20 17:15:33 +08:00
    滑动卡看起来像 bug,比较有规律
    moonrailgun
        34
    moonrailgun  
       2020-01-20 17:43:30 +08:00
    这个下雨的特效惊到我了
    sneezry
        35
    sneezry  
       2020-01-20 17:48:11 +08:00
    内容非常好!如果滚动能顺滑一点,过度动画慢一点感觉会更好
    wdaye
        36
    wdaye  
       2020-01-20 17:54:03 +08:00
    mac 打字 滑动 都卡到不行。
    snowspace
        37
    snowspace  
       2020-01-20 18:18:21 +08:00
    “移动端的渲染和原生在视觉上还是有很大差距” 差距貌似不大呀
    superpeaser
        38
    superpeaser  
       2020-01-20 18:35:22 +08:00
    看着还不错啊
    registered
        39
    registered  
    OP
       2020-01-20 18:54:46 +08:00
    @murmur 关雨保平安,😝
    registered
        40
    registered  
    OP
       2020-01-20 18:55:06 +08:00
    @xttli123 关雨保平安,😝
    registered
        41
    registered  
    OP
       2020-01-20 18:55:41 +08:00
    @maomaomao001 关雨保平安,😝
    registered
        42
    registered  
    OP
       2020-01-20 18:56:26 +08:00
    @Vegetable 额,是我考虑不周,很多年没用过鼠标了
    registered
        43
    registered  
    OP
       2020-01-20 18:57:24 +08:00
    @murmur 额,没太明白您的意思。是说电影的介绍信息的滚动吗
    registered
        44
    registered  
    OP
       2020-01-20 18:59:36 +08:00
    @ngrok111 等我有钱了,肯定换个国内的服务器,🐶
    registered
        45
    registered  
    OP
       2020-01-20 18:59:58 +08:00
    @windfarer 关雨保平安,😝
    registered
        46
    registered  
    OP
       2020-01-20 19:00:43 +08:00
    @Tink “照片”板块的图片源和其它的图片源不一样,应该不会同时挂吧
    banliyaya
        47
    banliyaya  
       2020-01-20 19:02:59 +08:00 via iPhone
    用 macbookpro 和 xr 很流畅,但是切换到下雨就明显有点顿了。除了下雨其他动画很舒服哈啊哈
    LancerComet
        48
    LancerComet  
       2020-01-20 19:04:34 +08:00
    除了下雨卡,我感觉速度还 OK,Windows 10 + Chrome,Thinkpad X1E
    Anarchy
        49
    Anarchy  
       2020-01-20 19:46:32 +08:00
    下雨比较卡,其他没什么问题 macbookpro 2015 款
    registered
        50
    registered  
    OP
       2020-01-20 20:01:33 +08:00
    @zhw2590582 嗯,发现了两个错误。一个是逻辑错误,一个是权限问题。感谢指出
    registered
        51
    registered  
    OP
       2020-01-20 20:06:01 +08:00
    @heijiangjun 谢谢,是自己设计的
    registered
        52
    registered  
    OP
       2020-01-20 20:07:53 +08:00
    @heijiangjun 我说的差距不是说性能,是视觉感受。确实和很多同学交流,他们都说没什么区别,我倔强的认为有差别,如果非要形容一下的话,就是“无质感”。
    registered
        53
    registered  
    OP
       2020-01-20 20:08:26 +08:00
    @speedofstephen 感兴趣的话可以一起来玩啊 ~
    registered
        54
    registered  
    OP
       2020-01-20 20:10:58 +08:00
    @chanchan 感谢指出。欢迎交互大佬提建议
    viewsnake
        55
    viewsnake  
       2020-01-20 20:11:10 +08:00
    非常棒的网站,加入我的收藏夹了,现在这个碎片化时代,我特别讨厌头条抖音快手那种主动推送的 APP,让你失去主动思考的灵魂,统统卸载,手机只保留支付宝和微信。
    registered
        56
    registered  
    OP
       2020-01-20 20:12:23 +08:00
    @itstudying 是的。因为如果是连续的话,对象没办法复用,会更卡,暂时做不到。
    registered
        57
    registered  
    OP
       2020-01-20 20:14:19 +08:00
    @viewsnake 哥们你这个留言像是机器人呀 ~
    kasusa
        58
    kasusa  
       2020-01-20 20:16:59 +08:00
    嗯,,好卡呀不知道为啥
    itstudying
        59
    itstudying  
       2020-01-20 20:25:54 +08:00
    想去说点啥看到需要回复诗句的下一句,想去百度搜答案发现不能复制,想去 f12 复制发现定位不到标签,最后还是来这回复了。就别为难我这个没文化的后端 boy 了,所以,用 dart 写出来就是不能定位标签的吗?还是我姿势不对
    stardust21
        60
    stardust21  
       2020-01-20 20:27:18 +08:00
    完成度挺高的了,不过 js 是真的挺大的
    itstudying
        61
    itstudying  
       2020-01-20 20:33:55 +08:00
    @itstudying #59 哦 就是都转成了 js,全都是 js 在操作 dom 呗
    registered
        62
    registered  
    OP
       2020-01-20 21:02:55 +08:00
    @mgrddsj 没有做适配哟 ~
    viewsnake
        63
    viewsnake  
       2020-01-20 21:58:02 +08:00
    @registered 为啥像机器人,难道我已经变成机器人了哈
    droiz
        64
    droiz  
       2020-01-20 21:59:52 +08:00
    transform 的计算全靠 js 啊,这 tm 真的卡
    HuHui
        65
    HuHui  
       2020-01-20 22:18:31 +08:00
    http://www.imooc.com/article/289434
    可以加个高斯模糊
    userdhf
        66
    userdhf  
       2020-01-20 22:37:43 +08:00
    f12 了一下,刷新了三观。。。还不如纯 dom。。一路嵌套,是 flutter 就这德行,还是楼主刚上手??
    yafoo
        67
    yafoo  
       2020-01-20 23:02:26 +08:00 via Android
    以前觉得 flutter 很牛逼,现在突然觉得这东西高不成低不就。
    oatw
        68
    oatw  
       2020-01-20 23:38:06 +08:00 via iPhone
    我用手机 safari 看的 点不动呀
    GPLer
        69
    GPLer  
       2020-01-21 00:46:43 +08:00 via Android
    Firefox 操作完全不卡,就是这雨怎么一阵一阵的。(
    ccraohng
        70
    ccraohng  
       2020-01-21 06:37:58 +08:00 via Android
    手机上的滚动好僵硬
    nicevar
        71
    nicevar  
       2020-01-21 08:17:30 +08:00 via Android
    没事,其实前端圈发展起来之后,这样卡的网站满天飞,油管也没比你这好多少
    mxT52CRuqR6o5
        72
    mxT52CRuqR6o5  
       2020-01-21 09:20:47 +08:00 via Android
    优化的方法就是换个技术栈,说实话 flutter 的 native 端我也没觉得性能好到哪去
    registered
        73
    registered  
    OP
       2020-01-21 09:35:19 +08:00
    @yafoo 还是新生儿。我觉得现在的问题是官方急着响应口号“适配多端”,而不是花大力气去优化
    registered
        74
    registered  
    OP
       2020-01-21 09:39:02 +08:00
    @userdhf 嵌套不是重点吧。这不是手写代码,是 build 后的代码。
    Chengxians
        75
    Chengxians  
       2020-01-21 10:32:41 +08:00
    收藏,下个月 vue copy 一份
    zxcslove
        76
    zxcslove  
       2020-01-21 10:35:27 +08:00
    标题党,楼主没哭一场,差评
    herozzm
        77
    herozzm  
       2020-01-21 10:36:36 +08:00
    得有多弱,web 都需要用 flutter
    studyro
        78
    studyro  
       2020-01-21 10:58:07 +08:00
    渲染不是基于标准的 HTML 标签,导致 VIM 插件不可用了。如果 Flutter Web 在这个基础上被推广开,那真的是灾难了。
    GopherTT
        79
    GopherTT  
       2020-01-21 11:03:51 +08:00
    左侧边栏 hover body 闪瞎我..
    xrr2016
        80
    xrr2016  
       2020-01-21 11:10:10 +08:00
    赞一个
    maxint
        81
    maxint  
       2020-01-21 11:21:22 +08:00
    很棒
    maxint
        82
    maxint  
       2020-01-21 11:22:30 +08:00
    @studyro 是直接在 canvas 上画的吗
    liuxey
        83
    liuxey  
       2020-01-21 11:28:30 +08:00
    关雨保流畅
    registered
        84
    registered  
    OP
       2020-01-21 11:41:02 +08:00
    @herozzm 那您可不是牛逼坏了
    wanguorui123
        85
    wanguorui123  
       2020-01-21 11:49:15 +08:00 via iPhone
    勇士
    xiaotianhu
        86
    xiaotianhu  
       2020-01-21 12:56:30 +08:00
    我也以为是 lz 写的哭了一场....尴尬
    xuanbg
        87
    xuanbg  
       2020-01-21 13:24:15 +08:00
    下雨似乎影响点击??
    Maiiiiii
        88
    Maiiiiii  
       2020-01-21 13:44:31 +08:00
    一言那里好像没办法用滚轮滑动
    小雨就卡的不行
    故事内容不能被选中,对于我这种喜欢选一段高亮看字的,有点别扭
    version0
        89
    version0  
       2020-01-21 14:13:05 +08:00 via Android
    @studyro 确实啊,这种唯一的用处就是做个不想被爬( SEO )的网站了吧
    milukun
        90
    milukun  
       2020-01-22 10:53:05 +08:00
    感觉并不慢 打开还挺快
    sodulty
        91
    sodulty  
       2020-01-22 14:01:31 +08:00
    啥时候能顶掉 rn 上位呢
    xjqxz2
        92
    xjqxz2  
       2020-01-22 14:31:37 +08:00
    单页应用怎么才能给爬虫们收录啊
    loginbygoogle
        93
    loginbygoogle  
       2020-03-30 17:27:52 +08:00 via iPhone
    😀
    milukun
        94
    milukun  
       2020-04-18 11:50:32 +08:00
    问一下 flutter 做的 web 是不是不存在 url 的路由一说? 只能是全部运行在一个页面
    registered
        95
    registered  
    OP
       2020-04-18 15:10:17 +08:00
    @milukun 据我所知,是这样的。但应该可以配合 NGINX 做到不同的地址对应不同的“页面”,这里的“页面”指的是 flutter 概念上的页面,不是指 web 页面。
    zcoderrr
        96
    zcoderrr  
       2020-05-15 10:48:08 +08:00
    @milukun
    @registered
    既然是 web 肯定要有 url 路由的,可以看下我写的静态博客,可以直接通过地址跳到指定文章 : http://toseetheworld.cn/#/post?title=Welcome
    仓库地址: https://github.com/zcoderr/Fluttlog
    registered
        97
    registered  
    OP
       2020-05-17 00:44:41 +08:00
    @zcoderrr nice work !之前我也这样试过,不过不知道为什么当时没成功,只能眺首页。我以为 Flutter 不支持 url 传进来的路由地址。
    39499740
        98
    39499740  
       2020-06-04 15:21:08 +08:00
    @registered 话说这个你重新 build 过么? 136 天了,不知道现在的渲染效率是不是会提高一些
    CatalinaMylove
        99
    CatalinaMylove  
       2020-06-12 02:21:46 +08:00
    我想哭 但是哭不出来

    等到思念像海

    太丧了,玩不下去
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5707 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 49ms · UTC 03:37 · PVG 11:37 · LAX 20:37 · JFK 23:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.