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

[ttentau1]

只做到这种程度

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

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

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

大佬们看一下，这相当于什么水平？

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

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

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

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

在此分享一下，她们分别是：

• 我是香秀🐂🍺： https://v.douyin.com/iYRAPA2L/
• 杨老虎🐯（磕穿下巴掉牙版）： https://v.douyin.com/iYRA56de/
• 条子： https://v.douyin.com/iYRAaqjr/
• 达莎Digi： https://v.douyin.com/iYRA6rwT/
• 小橙子： https://v.douyin.com/iYRAnudw/
• 南恬： https://v.douyin.com/iYRAbKm3/
• 小霸宠牛排🥩：https://v.douyin.com/iYRSosVB/
• 奶茶妹◕🌱： https://v.douyin.com/iYRACKhP/
• 我才是岚岚： https://v.douyin.com/iYRAQM1C/
• 周憬艺ziran： https://v.douyin.com/iYRAQs4h/
• 刘思瑶nice： https://v.douyin.com/iYRAaERn/
• 彭十六elf： https://v.douyin.com/iYRAHrVG/
• 李子柒：https://v.douyin.com/iYRA5B88/

[catch]

恩，细节不错

[ttentau1]

@shuxhan #65 抖音官方就有这个功能啊，可以只看关注

[ttentau1]

@crocoBaby #61 老的代码改一时半会改不完，挺多的。我前几天才把 vuex 换成 pinia....

[ttentau1]

@FreshOldMan #51 是的，这个项目只是前端的一些滑动效果和 UI 而已，没有关于音视频的内容，那个没研究过

[ttentau1]

@JingXiao #45 采集的博主，我放到正文的附言里面了

[ttentau1]

@iold #41 项目采集的博主列表，我放到正文的附言里面了

[kakki]

完成度好高，很棒！

[KillPaul]

@ttentau1 #95 哦哦，我不懂前端，只是以观众的角度看，一般那些专业一些的网站缩放窗口不会产生那样的延迟。不过已经很棒了。

[n18255447846]

挺不错的

[Dragonphy]

牛啊！

[suyuyu]

我切一下接口就成学习产品了

[suwu]

啊。你来真的啊，感觉一毛一样

[v23xowen]

牛的

[shenhuilin0]

可以私有化部署吗

[Tink]

真牛逼啊！

[EndlessMemory]

牛皮

[yrzs]

可以啊，高仿

[CHTuring]

提个建议，把 hash 路由换成 history 路由呗

[CHTuring]

@CHTuring #118 要不我来 PR 😂

[jiangcy]

🐂🍺！

[zoezz]

请问 OP 是如何将 Vue 项目转 Uniapp 打包成 apk 的，手上也有个小 Demo （ Vue 3 + Vite + Tailwindcss ）想要实际操作一下

[woody3rd]

强回来了

[8Ri72kLA9ORo6m6f]

视频滑动下一个过度比较自然，这个是如何实现的？

[8Ri72kLA9ORo6m6f]

浏览器默认不让自动播放，这个是如何解决的

[robotdiy]

相当厉害！

[ttentau1]

@shenhuilin0 #114 可以啊，你可以 fork 这个项目，然后使用 vercel 或 netlify 这种服务来托管，我就是托管在 vercel 上的，国内访问速度还不错。

[ttentau1]

@CHTuring #119 谢谢，已经合了

[ttentau1]

@zoezz #121

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

[ttentau1]

@itcong #124 静音就可以自动播放。可以后续引导用户打开音乐

[zoezz]

@ttentau1 #128 感谢 OP ，我回头试试

[CHTuring]

@ttentau1 #127 还有一个，期望快点引入 Prettier 规范格式化，并且把项目 format 一遍，不然想改动都得很畏手畏脚，一不小心就把你整页的记录刷掉了。

[HashV2]

厉害！ fork 了

[ttentau1]

@itcong #123

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

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

3 、在页面中，始终保持 5 个视频左右，每个视频都设置了预加载。屏幕当前显示的视频总是第三个。往上滑动会用 jQuery 在最后添加一个视频，并把最前面的一个视频删除掉，往下滑动同理

[tthem]

大佬太牛了！

[toan]

高仿的可以！很厉害！

[cherishwinner334]

牛哇，18 年做到今天是终于开源了。比起功能，我觉得更难得的是坚持。

[cherishwinner334]

看了项目 commit 确实 18 年到现在 是不容易的啊，坚持可贵

[gargar]

很顺滑。另赞坚持👍

[nonewind]

大佬 牛牛牛 !!!!

[loveinj]

又一个大佬诞生了

[xiao8276]

@ttentau1 牛逼

[wxb2dyj]

apk 下载不了了，pc 端手机模式下打不开了

[pendulum]

不兼容 pc ，鼠标/触摸板滚动没反应

[ttentau1]

@wxb2dyj #142
apk 下载地址被 uni 限制了，我在 github 的 release 也有发布： https://github.com/zyronon/douyin/releases
pc 端手机模式打不开是什么意思？

[ttentau1]

@pendulum #143 是的，需要调整到手机模式才能使用

[iold]

开源中国发了一片公众号

[phithon]

有点厉害

[Wxh16144]

灰厂可行，可以参考 jellyfin 做一个后端之类的，给那些 NAS 小姐姐做个抖音 哈哈哈

[cruzzz]

我香蕉直播宣布就是你了！

[Wataru]

请问一下 OP ，为什么 V2EX 超级增强更新后变成 V2EX next 了，而且原本你发布的那个账号被 ban 了

[Wataru]

@shzbkzo #57 大小号切换自己评论自己么

[xumiao]

很强，完成度很高

[ttentau1]

@Wataru #150 对的，脚本改名字了，超级增强不好听，感觉像抄的一样。原来那个号骂一个喷子被封了

[ttentau1]

@iold #146 我还纳闷儿今天怎么热度依然不减，star 猛增

中午的时候我还考虑给阮一峰投稿来着

[ttentau1]

@cherishwinner334 #137 谢谢支持，的确做了很久，刚入行时起的项目，断断续续的在写，只要闲下来了就会想起这个项目，今天把它完善算是完成当时的梦想吧

[ttentau1]

@KillPaul #108
是的，毕竟不是商业项目，只是一个开源项目

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

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

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

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

真正商业使用，肯定不会这么搞，或者干脆做两套

[ttentau1]

@ixinshang #93 可以做一个后端，包括上传，发布，推荐啊这些。但是不敢开源，怕被人拿去搞黄色

[ttentau1]

@jethroX #53 要不外包给我做吧

[ttentau1]

@1217950746 #23 只是前端，我想不会。swiper 就可以做出类似的效果

[ttentau1]

@1217950746 #23 如果我做出一整套开源，被拿去 18+了，那肯定会被抓

[shenhuilin0]

部署用了一下，如果想添加自己的视频，还是太复杂了。需要修改 json 什么的

[huihuiHK]

大佬水平

[ttentau1]

@shenhuilin0 #161 不是的，我是用了一个第三方库拦截了所有 api 请求。在拦截请求里面返回的是我本地 json 数据。如果你想添加自己的视频，应该用后端实现 api 接口，或者在 api 拦截器里面返回你自己的数据

[lidawn]

真不错，忍不住看了好几遍

[ttentau1]

@lidawn #164

给你

我是香秀🐂🍺： https://v.douyin.com/iYRAPA2L/
杨老虎🐯（磕穿下巴掉牙版）： https://v.douyin.com/iYRA56de/
条子： https://v.douyin.com/iYRAaqjr/
达莎 Digi： https://v.douyin.com/iYRA6rwT/
小橙子： https://v.douyin.com/iYRAnudw/
南恬： https://v.douyin.com/iYRAbKm3/
小霸宠牛排🥩： https://v.douyin.com/iYRSosVB/
奶茶妹◕🌱： https://v.douyin.com/iYRACKhP/
我才是岚岚： https://v.douyin.com/iYRAQM1C/
周憬艺 ziran： https://v.douyin.com/iYRAQs4h/
刘思瑶 nice： https://v.douyin.com/iYRAaERn/
彭十六 elf： https://v.douyin.com/iYRAHrVG/
李子柒： https://v.douyin.com/iYRA5B88/

[1217950746]

@ttentau1 #160 我感觉国内做开源挺难的，存粹用爱发电，还容易被喷，然后运气不好还可能喝茶

[forever0y]

流量爆了会好解决吗？ CDN 支持得住吗？前端真心不错

[ttentau1]

@forever0y #167 vercel100G 快用完了，正在研究，怎么给 netlify 套 cdn ，让国内访问

[ttentau1]

@forever0y #167 刚刚用七牛云 cdn 套 netlify 试了试，流量跑的贼凶。我随便刷刷就跑了一百多 M ，吓的我赶紧关了 cdn ，不然被人盗刷欠几千账单乐子就大了

现在我自己的域名重定向到了 netlify 了，国内无法访问的问题是无法解决了