跳至主要內容
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?

4563博客

全新的繁體中文 WordPress 網站
  • 首頁
  • 用不成熟的 flutter web 做了个网站 – 哭一场
未分類
5 4 月 2020

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

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

資深大佬 : registered 44

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

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

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

先上地址:

  • 放在 github.io 上的:https://dev.kuyichang.com

  • 放在垃圾服务器上面的:http://www.kuyichang.com

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

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

既然如此,先挂几张图吧

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

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

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

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

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

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

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

  • 电影数据来自豆瓣

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

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

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

  • 目前没有做适配

需要吐槽的地方:

  • debug 是真难用

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

  • build 的 js 太大了

  • 多控件 rebuild 还是卡的

总体感受:

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

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

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

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

欢迎资源推荐或拍砖~

大佬有話說 (92)

  • 資深大佬 : murmur

    windows 下这渲染看着真难受。。。

  • 資深大佬 : xttli123

    很卡

  • 資深大佬 : maomaomao001

    mac 上非常卡 (滑动时)

  • 資深大佬 : Vegetable

    一言那个模块,回弹太快了点,用滚轮都鬼畜了

  • 資深大佬 : murmur

    另外一个问题,电影的页面似乎只支持滚轮,不支持键盘事件

  • 資深大佬 : ngrok111

    github 地址访问速度还行,另一个半天都打不开( 土澳渣网 )

  • 資深大佬 : windfarer

    有点卡

  • 資深大佬 : Tink

    图好像全挂了

  • 資深大佬 : itstudying

    下雨的效果是一阵一阵的

  • 資深大佬 : zhw2590582

    慢,而且控制台很多错误

  • 資深大佬 : speedofstephen

    好巧阿,我这几天也想着这个创意呢。感觉网易云音乐很多歌曲的精彩评论也很催泪。

  • 資深大佬 : zhanziyang

    太丧了,玩不下去

  • 資深大佬 : CoCoMcRee

    很好奇…怎么会如此的卡

  • 資深大佬 : jayin

    还有很大的改进空间

  • 資深大佬 : lookas2001

    卡。。卡的

  • 資深大佬 : oubenruing

    我还以为写 flutter web,写的主哭了一场。

  • 資深大佬 : murmur

    不知道你们说网卡还是页面卡,windows 7 代 u chrome cpu 瞬时占用突破 50%,750ti 亮机卡都有 30%负载,不过时好时坏,考虑到 windows 的 chrome 比 osx 要好,mac 卡也是应该的
    关雨保平安

  • 資深大佬 : heijiangjun

    简单的效果也这么卡,确实有点不能接受。话说设计挺漂亮的,主自己设计的吗

  • 資深大佬 : heijiangjun

    “flutter 在 web 上的渲染还能接受,之所以不想用 flutter 写移动端,首要原因就是在移动端的渲染和原生在视觉上还是有很大差距。“ 我用 flutter 自己写了个小应用玩,debug 模式下运行在红米 k20 上感觉挺流畅的,视觉上也和原生没太多区别啊

  • 資深大佬 : pota

    1.5M 的 js。。。

  • 資深大佬 : Lombard

    不知道为啥,我对这种 hover 效果有种生理上的不适

  • 資深大佬 : lylijincheng

    @CoCoMcRee 同好奇。。

  • 資深大佬 : zokingo

    @Lombard 是的,我也有这种感觉。画风变换太大又给人卡顿的感觉。不知道是不是单纯 PC 端的问题

  • 資深大佬 : kkniub

    (((((()))))) 是这样的吗?

  • 資深大佬 : love

    看了标题还以为是 flutter 写 web 太痛苦了大哭了一场

  • 資深大佬 : gaigechunfeng

    我靠。为什么我看着一点都不卡啊?
    难道是我的电脑配置太牛逼了。

  • 資深大佬 : mmrx

    确实一卡一卡的,不是很流畅
    不知道是代码的问题,还是确实 flutter web 转 js 优化做得不够
    主行动力很强

  • 資深大佬 : mgrddsj

    移动端竖屏显示不出来电影图片,横屏时内容显示不全。滑动时卡得不行,Android Chrome 79 + 骁龙 835

  • 資深大佬 : chanchan

    电影简介应该用渐变缓慢翻页的动画,这样弹出来一点都不想哭
    别的动画也太突兀了,没内味儿

  • 資深大佬 : murmur

    @mmrx 应该是 flutter 转 js 优化不行,edge 的调试工具看 70%的 cpu 占用都在脚本上

    建议谁给主优化一下,做个欢快点的主题,名字我都想好了就叫撸一场

  • 資深大佬 : Cbdy

    f12 了一下,这个页面爬虫没法爬

  • 資深大佬 : mmrx

    @murmur 哈哈哈哈 @registered 建 议 改 为: 撸 一 场

  • 資深大佬 : hst001

    滑动卡看起来像 bug,比较有规律

  • 資深大佬 : moonrailgun

    这个下雨的特效惊到我了

  • 資深大佬 : sneezry

    内容非常好!如果滚动能顺滑一点,过度动画慢一点感觉会更好

  • 資深大佬 : wdaye

    mac 打字 滑动 都卡到不行。

  • 資深大佬 : snowspace

    “移动端的渲染和原生在视觉上还是有很大差距” 差距貌似不大呀

  • 資深大佬 : superpeaser

    看着还不错啊

  • 主 資深大佬 : registered

    @murmur 关雨保平安,

  • 主 資深大佬 : registered

    @xttli123 关雨保平安,

  • 主 資深大佬 : registered

    @maomaomao001 关雨保平安,

  • 主 資深大佬 : registered

    @Vegetable 额,是我考虑不周,很多年没用过鼠标了

  • 主 資深大佬 : registered

    @murmur 额,没太明白您的意思。是说电影的介绍信息的滚动吗

  • 主 資深大佬 : registered

    @ngrok111 等我有钱了,肯定换个国内的服务器,

  • 主 資深大佬 : registered

    @windfarer 关雨保平安,

  • 主 資深大佬 : registered

    @Tink “照片”板块的图片源和其它的图片源不一样,应该不会同时挂吧

  • 資深大佬 : banliyaya

    用 macbookpro 和 xr 很流畅,但是切换到下雨就明显有点顿了。除了下雨其他动画很舒服哈啊哈

  • 資深大佬 : LancerComet

    除了下雨卡,我感觉速度还 OK,Windows 10 + Chrome,Thinkpad X1E

  • 資深大佬 : Anarchy

    下雨比较卡,其他没什么问题 macbookpro 2015 款

  • 主 資深大佬 : registered

    @zhw2590582 嗯,发现了两个错误。一个是逻辑错误,一个是权限问题。感谢指出

  • 主 資深大佬 : registered

    @heijiangjun 谢谢,是自己设计的

  • 主 資深大佬 : registered

    @heijiangjun 我说的差距不是说性能,是视觉感受。确实和很多同学交流,他们都说没什么区别,我倔强的认为有差别,如果非要形容一下的话,就是“无质感”。

  • 主 資深大佬 : registered

    @speedofstephen 感兴趣的话可以一起来玩啊 ~

  • 主 資深大佬 : registered

    @chanchan 感谢指出。欢迎交互大佬提建议

  • 資深大佬 : viewsnake

    非常棒的网站,加入我的收藏夹了,现在这个碎片化时代,我特别讨厌头条抖音快手那种主动推送的 APP,让你失去主动思考的灵魂,统统卸载,手机只保留支付宝和微信。

  • 主 資深大佬 : registered

    @itstudying 是的。因为如果是连续的话,对象没办法复用,会更卡,暂时做不到。

  • 主 資深大佬 : registered

    @viewsnake 哥们你这个留言像是机器人呀 ~

  • 資深大佬 : kasusa

    嗯,,好卡呀不知道为啥

  • 資深大佬 : itstudying

    想去说点啥看到需要回复诗句的下一句,想去百度搜答案发现不能复制,想去 f12 复制发现定位不到标签,最后还是来这回复了。就别为难我这个没文化的后端 boy 了,所以,用 dart 写出来就是不能定位标签的吗?还是我姿势不对

  • 資深大佬 : stardust21

    完成度挺高的了,不过 js 是真的挺大的

  • 資深大佬 : itstudying

    @itstudying #59 哦 就是都转成了 js,全都是 js 在操作 dom 呗

  • 主 資深大佬 : registered

    @mgrddsj 没有做适配哟 ~

  • 資深大佬 : viewsnake

    @registered 为啥像机器人,难道我已经变成机器人了哈

  • 資深大佬 : droiz

    transform 的计算全靠 js 啊,这 tm 真的卡

  • 資深大佬 : HuHui

    http://www.imooc.com/article/289434
    可以加个高斯模糊

  • 資深大佬 : userdhf

    f12 了一下,刷新了三观。。。还不如纯 dom。。一路嵌套,是 flutter 就这德行,还是主刚上手??

  • 資深大佬 : yafoo

    以前觉得 flutter 很牛逼,现在突然觉得这东西高不成低不就。

  • 資深大佬 : oatw

    我用手机 safari 看的 点不动呀

  • 資深大佬 : GPLer

    Firefox 操作完全不卡,就是这雨怎么一阵一阵的。(

  • 資深大佬 : ccraohng

    手机上的滚动好僵硬

  • 資深大佬 : nicevar

    没事,其实前端圈发展起来之后,这样卡的网站满天飞,油管也没比你这好多少

  • 資深大佬 : mxT52CRuqR6o5

    优化的方法就是换个技术栈,说实话 flutter 的 native 端我也没觉得性能好到哪去

  • 主 資深大佬 : registered

    @yafoo 还是新生儿。我觉得现在的问题是官方急着响应口号“适配多端”,而不是花大力气去优化

  • 主 資深大佬 : registered

    @userdhf 嵌套不是重点吧。这不是手写代码,是 build 后的代码。

  • 資深大佬 : Chengxians

    收藏,下个月 vue copy 一份

  • 資深大佬 : zxcslove

    标题党,主没哭一场,差评

  • 資深大佬 : herozzm

    得有多弱,web 都需要用 flutter

  • 資深大佬 : studyro

    渲染不是基于标准的 HTML 标签,导致 VIM 插件不可用了。如果 Flutter Web 在这个基础上被推广开,那真的是灾难了。

  • 資深大佬 : GopherTT

    左侧边栏 hover body 闪瞎我..

  • 資深大佬 : xrr2016

    赞一个

  • 資深大佬 : maxint

    很棒

  • 資深大佬 : maxint

    @studyro 是直接在 canvas 上画的吗

  • 資深大佬 : liuxey

    关雨保流畅

  • 主 資深大佬 : registered

    @herozzm 那您可不是牛逼坏了

  • 資深大佬 : wanguorui123

    勇士

  • 資深大佬 : xiaotianhu

    我也以为是 lz 写的哭了一场….尴尬

  • 資深大佬 : xuanbg

    下雨似乎影响点击??

  • 資深大佬 : Maiiiiii

    一言那里好像没办法用滚轮滑动
    小雨就卡的不行
    故事内容不能被选中,对于我这种喜欢选一段高亮看字的,有点别扭

  • 資深大佬 : version0

    @studyro 确实啊,这种唯一的用处就是做个不想被爬( SEO )的网站了吧

  • 資深大佬 : milukun

    感觉并不慢 打开还挺快

  • 資深大佬 : sodulty

    啥时候能顶掉 rn 上位呢

  • 資深大佬 : xjqxz2

    单页应用怎么才能给爬虫们收录啊

文章導覽

上一篇文章
下一篇文章

AD

其他操作

  • 登入
  • 訂閱網站內容的資訊提供
  • 訂閱留言的資訊提供
  • WordPress.org 台灣繁體中文

51la

4563博客

全新的繁體中文 WordPress 網站
返回頂端
本站採用 WordPress 建置 | 佈景主題採用 GretaThemes 所設計的 Memory
4563博客
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?
在這裡新增小工具