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

用 Vue 仿了一个抖音,大佬们看下算是什么水平?

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

    只做到这种程度

    演示地址: https://dy.ttentau.top/

    注意:PC 浏览器请用手机模式访问。先按 F12 调出控制台,再按 Ctrl+Shift+M 切换到手机模式

    项目地址: https://github.com/zyronon/douyin

    大佬们看一下,这相当于什么水平?

    第 1 条附言  ·  222 天前

    刚用uniapp的5+app 打了个安卓包

    下载地址:test-5-app.apk

    第一次用uniapp的这个功能,打出来的包还挺小的,只有6M的样子,apk用起来感觉还可以,有些小瑕疵img,返回按钮需要特殊处理才行

    第 2 条附言  ·  222 天前

    看到有V友说视频不错,问博主是哪些

    在此分享一下,她们分别是:

    169 条回复    2024-04-04 00:19:25 +08:00
    1  2  
    catch
        101
    catch  
       222 天前
    恩,细节不错
    ttentau1
        102
    ttentau1  
    OP
       222 天前
    @shuxhan #65 抖音官方就有这个功能啊,可以只看关注
    ttentau1
        103
    ttentau1  
    OP
       222 天前
    @crocoBaby #61 老的代码改一时半会改不完,挺多的。我前几天才把 vuex 换成 pinia....
    ttentau1
        104
    ttentau1  
    OP
       222 天前
    @FreshOldMan #51 是的,这个项目只是前端的一些滑动效果和 UI 而已,没有关于音视频的内容,那个没研究过
    ttentau1
        105
    ttentau1  
    OP
       222 天前
    @JingXiao #45 采集的博主,我放到正文的附言里面了
    ttentau1
        106
    ttentau1  
    OP
       222 天前
    @iold #41 项目采集的博主列表,我放到正文的附言里面了
    kakki
        107
    kakki  
       222 天前
    完成度好高,很棒!
    KillPaul
        108
    KillPaul  
       222 天前
    @ttentau1 #95 哦哦,我不懂前端,只是以观众的角度看,一般那些专业一些的网站缩放窗口不会产生那样的延迟。不过已经很棒了。
    n18255447846
        109
    n18255447846  
       221 天前
    挺不错的
    Dragonphy
        110
    Dragonphy  
       221 天前
    牛啊!
    suyuyu
        111
    suyuyu  
       221 天前
    我切一下接口就成学习产品了
    suwu
        112
    suwu  
       221 天前
    啊。你来真的啊,感觉一毛一样
    v23xowen
        113
    v23xowen  
       221 天前
    牛的
    shenhuilin0
        114
    shenhuilin0  
       221 天前 via Android
    可以私有化部署吗
    Tink
        115
    Tink  
       221 天前
    真牛逼啊!
    EndlessMemory
        116
    EndlessMemory  
       221 天前
    牛皮
    yrzs
        117
    yrzs  
       221 天前
    可以啊,高仿
    CHTuring
        118
    CHTuring  
       221 天前
    提个建议,把 hash 路由换成 history 路由呗
    CHTuring
        119
    CHTuring  
       221 天前
    @CHTuring #118 要不我来 PR 😂
    jiangcy
        120
    jiangcy  
       221 天前
    🐂🍺!
    zoezz
        121
    zoezz  
       221 天前
    请问 OP 是如何将 Vue 项目转 Uniapp 打包成 apk 的,手上也有个小 Demo ( Vue 3 + Vite + Tailwindcss )想要实际操作一下
    woody3rd
        122
    woody3rd  
       221 天前
    强回来了
    8Ri72kLA9ORo6m6f
        123
    8Ri72kLA9ORo6m6f  
       221 天前
    视频滑动下一个过度比较自然,这个是如何实现的?
    8Ri72kLA9ORo6m6f
        124
    8Ri72kLA9ORo6m6f  
       221 天前
    浏览器默认不让自动播放,这个是如何解决的
    robotdiy
        125
    robotdiy  
       221 天前
    相当厉害!
    ttentau1
        126
    ttentau1  
    OP
       221 天前
    @shenhuilin0 #114 可以啊,你可以 fork 这个项目,然后使用 vercel 或 netlify 这种服务来托管,我就是托管在 vercel 上的,国内访问速度还不错。
    ttentau1
        127
    ttentau1  
    OP
       221 天前
    @CHTuring #119 谢谢,已经合了
    ttentau1
        128
    ttentau1  
    OP
       221 天前   ❤️ 1
    @zoezz #121

    你先下载个 HbuilderX ,然后新建一个 5+App ,再把 Vue 打包生成 dist 目录下的所有文件复制到刚刚创建的 5+App 目录下面( index.html 直接覆盖)。最后在 HbuilderX 里面运行到手机看看效果,还行的话就可以直接打包了

    ttentau1
        129
    ttentau1  
    OP
       221 天前
    @itcong #124 静音就可以自动播放。可以后续引导用户打开音乐
    zoezz
        130
    zoezz  
       221 天前
    @ttentau1 #128 感谢 OP ,我回头试试
    CHTuring
        131
    CHTuring  
       221 天前
    @ttentau1 #127 还有一个,期望快点引入 Prettier 规范格式化,并且把项目 format 一遍,不然想改动都得很畏手畏脚,一不小心就把你整页的记录刷掉了。
    HashV2
        132
    HashV2  
       221 天前
    厉害! fork 了
    ttentau1
        133
    ttentau1  
    OP
       221 天前
    @itcong #123

    1 、滑动我是监听了 touchstart 、touchmove 、touchend 这三个事件,自己判断滑动方向、是否消费事件、滑动距离。

    2 、删除和增加视频,不可以使用 Vue 的 v-for 来更新,v-for 的数组有变动,Vue 会删除 div ,再迅速添加回来。这样会导致正在播放到一半的视频,由于被删除了,又被添加回来了,就会从 0 开始播放。实际表现出来就是每滑动一次视频就卡一下

    3 、在页面中,始终保持 5 个视频左右,每个视频都设置了预加载。屏幕当前显示的视频总是第三个。往上滑动会用 jQuery 在最后添加一个视频,并把最前面的一个视频删除掉,往下滑动同理
    tthem
        134
    tthem  
       221 天前 via Android
    大佬太牛了!
    toan
        135
    toan  
       221 天前
    高仿的可以!很厉害!
    cherishwinner334
        136
    cherishwinner334  
       221 天前
    牛哇,18 年做到今天是终于开源了。比起功能,我觉得更难得的是坚持。
    cherishwinner334
        137
    cherishwinner334  
       221 天前   ❤️ 1
    看了项目 commit 确实 18 年到现在 是不容易的啊,坚持可贵
    gargar
        138
    gargar  
       221 天前 via iPhone
    很顺滑。另赞坚持👍
    nonewind
        139
    nonewind  
       221 天前
    大佬 牛牛牛 !!!!
    loveinj
        140
    loveinj  
       221 天前
    又一个大佬诞生了
    xiao8276
        141
    xiao8276  
       221 天前
    @ttentau1 牛逼
    wxb2dyj
        142
    wxb2dyj  
       221 天前
    apk 下载不了了,pc 端手机模式下打不开了
    pendulum
        143
    pendulum  
       221 天前
    不兼容 pc ,鼠标/触摸板滚动没反应
    ttentau1
        144
    ttentau1  
    OP
       221 天前
    @wxb2dyj #142
    apk 下载地址被 uni 限制了,我在 github 的 release 也有发布: https://github.com/zyronon/douyin/releases
    pc 端手机模式打不开是什么意思?
    ttentau1
        145
    ttentau1  
    OP
       221 天前
    @pendulum #143 是的,需要调整到手机模式才能使用
    iold
        146
    iold  
       221 天前
    开源中国发了一片公众号
    phithon
        147
    phithon  
       221 天前
    有点厉害
    Wxh16144
        148
    Wxh16144  
       221 天前   ❤️ 1
    灰厂可行,可以参考 jellyfin 做一个后端之类的,给那些 NAS 小姐姐做个抖音 哈哈哈
    cruzzz
        149
    cruzzz  
       221 天前
    我香蕉直播宣布就是你了!
    Wataru
        150
    Wataru  
       221 天前
    请问一下 OP ,为什么 V2EX 超级增强更新后变成 V2EX next 了,而且原本你发布的那个账号被 ban 了
    Wataru
        151
    Wataru  
       221 天前
    @shzbkzo #57 大小号切换自己评论自己么
    xumiao
        152
    xumiao  
       221 天前
    很强,完成度很高
    ttentau1
        153
    ttentau1  
    OP
       221 天前
    @Wataru #150 对的,脚本改名字了,超级增强不好听,感觉像抄的一样。原来那个号骂一个喷子被封了
    ttentau1
        154
    ttentau1  
    OP
       221 天前
    @iold #146 我还纳闷儿今天怎么热度依然不减,star 猛增

    中午的时候我还考虑给阮一峰投稿来着
    ttentau1
        155
    ttentau1  
    OP
       221 天前
    @cherishwinner334 #137 谢谢支持,的确做了很久,刚入行时起的项目,断断续续的在写,只要闲下来了就会想起这个项目,今天把它完善算是完成当时的梦想吧
    ttentau1
        156
    ttentau1  
    OP
       220 天前
    @KillPaul #108
    是的,毕竟不是商业项目,只是一个开源项目

    检测是特意为 PC 浏览器做的。

    因为手机上打开网站就可以使用,而 PC 打开时,代码会记录窗口高度宽度,用于无限滑动的计算,然后再需要按 F12 调出控制台,这时窗口高宽度会变动。再按 Ctrl + Shift + M 调用出手机模式,这时窗口高宽度再次变动,导致一开始计算高宽高不再适用于当前的计算了,就会出错。

    所以就会有人来问,怎么调出手机模式显示不完整啊无法使用等等问题。

    所以我直接检测到窗口变化就重新刷新页面了,这算是一个现阶段的妥协方案。

    真正商业使用,肯定不会这么搞,或者干脆做两套
    ttentau1
        157
    ttentau1  
    OP
       220 天前
    @ixinshang #93 可以做一个后端,包括上传,发布,推荐啊这些。但是不敢开源,怕被人拿去搞黄色
    ttentau1
        158
    ttentau1  
    OP
       220 天前
    @jethroX #53 要不外包给我做吧
    ttentau1
        159
    ttentau1  
    OP
       220 天前
    @1217950746 #23 只是前端,我想不会。swiper 就可以做出类似的效果
    ttentau1
        160
    ttentau1  
    OP
       220 天前
    @1217950746 #23 如果我做出一整套开源,被拿去 18+了,那肯定会被抓
    shenhuilin0
        161
    shenhuilin0  
       220 天前 via Android
    部署用了一下,如果想添加自己的视频,还是太复杂了。需要修改 json 什么的
    huihuiHK
        162
    huihuiHK  
       220 天前
    大佬水平
    ttentau1
        163
    ttentau1  
    OP
       220 天前
    @shenhuilin0 #161 不是的,我是用了一个第三方库拦截了所有 api 请求。在拦截请求里面返回的是我本地 json 数据。如果你想添加自己的视频,应该用后端实现 api 接口,或者在 api 拦截器里面返回你自己的数据
    lidawn
        164
    lidawn  
       220 天前
    真不错,忍不住看了好几遍
    ttentau1
        165
    ttentau1  
    OP
       220 天前
    1217950746
        166
    1217950746  
       220 天前
    @ttentau1 #160 我感觉国内做开源挺难的,存粹用爱发电,还容易被喷,然后运气不好还可能喝茶
    forever0y
        167
    forever0y  
       220 天前
    流量爆了会好解决吗? CDN 支持得住吗?前端真心不错
    ttentau1
        168
    ttentau1  
    OP
       220 天前
    @forever0y #167 vercel100G 快用完了,正在研究,怎么给 netlify 套 cdn ,让国内访问
    ttentau1
        169
    ttentau1  
    OP
       220 天前
    @forever0y #167 刚刚用七牛云 cdn 套 netlify 试了试,流量跑的贼凶。我随便刷刷就跑了一百多 M ,吓的我赶紧关了 cdn ,不然被人盗刷欠几千账单乐子就大了

    现在我自己的域名重定向到了 netlify 了,国内无法访问的问题是无法解决了
    1  2  
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1759 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 16:39 · PVG 00:39 · LAX 08:39 · JFK 11:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.