首页 注册 登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
› Vue.js
广告
lxhcool
V2EX  ›  Vue.js

vue 做了个 pc 端的网易云音乐

  •  2      
  •   lxhcool · 2020-08-07 17:37:24 +08:00 · 9109 次点击
    这是一个创建于 1567 天前的主题，其中的信息可能已经有所发展或是发生改变。

    很久以前就很想做一个音乐类型的网站，有做过移动端，小程序端，基本中途放弃，想着最近有时间就想着做了一个功能比较完整的项目.

    项目使用 VUE UI 框架是 ElementUl css 预处理使用的 stylus 自定义图标 iconfont gitee 地址： https://gitee.com/lxhcool/desktop-nicemusic 线上地址： http://nicenav.cn/desktop-music

    第 1 条附言  ·  2020-08-19 16:07:43 +08:00
    搜索页面已更新
    增加最近播放列表
    解决部分 bug
  • Vue
  • gitee
  • 预览
  • 网易
    70 条回复  •  2020-09-03 10:48:37 +08:00
    falcon05
        1
    falcon05  
       2020-08-07 17:39:58 +08:00
    牛逼啊
    ethanSong
        2
    ethanSong  
       2020-08-07 17:44:08 +08:00
    b 站昨天刷到的是不是你 老哥
    zachlhb
        3
    zachlhb  
       2020-08-07 17:47:53 +08:00 via Android   ❤️ 3
    这应该叫 web 端，PC 端还以为是客户端呢
    learningman
        4
    learningman  
       2020-08-07 17:50:44 +08:00
    placeholder 都没有。。。我就看到网页在我面前缓缓展开
    gz911122
        5
    gz911122  
       2020-08-07 17:51:29 +08:00
    @zachlhb pc 端已经被 web pc 端占领了, 以用于区分 h5..
    lxhcool
        6
    lxhcool  
    OP
       2020-08-07 17:52:09 +08:00
    @ethanSong b 站，什么时候，哪里
    nismison2
        7
    nismison2  
       2020-08-07 18:27:55 +08:00
    大概看了一下，确实挺不错的，不过碰到了两个 bug
    1 、当前有音乐在播放的时候去播放 MV，音乐不会暂停，而是同时播放
    2 、搜索框输入以后字体是白色的，看不到文字，Ctrl + A 以后能看到输入框是有内容的
    baiduyixia
        8
    baiduyixia  
       2020-08-07 18:28:49 +08:00
    建议网易云音乐官方直接复制你这个覆盖上线
    1358208301
        9
    1358208301  
       2020-08-07 18:31:25 +08:00 via Android
    确实比官方那个看着舒服
    ASalieri
        10
    ASalieri  
       2020-08-07 18:45:20 +08:00
    啊这，挺好，用惯了网易云的看着倒是没什么区别，点下载键好像没反应？
    qile1
        11
    qile1  
       2020-08-07 19:24:52 +08:00 via Android
    加个微信联系下可否？有个前端业务看看可以帮做下不 wx：cWlsZTcwNjA=
    Dganzh
        12
    Dganzh  
       2020-08-07 19:24:53 +08:00
    好奇，数据哪来的
    ombr4
        13
    ombr4  
       2020-08-07 19:31:43 +08:00
    好用啊，膜拜一下。
    RingoTC
        14
    RingoTC  
       2020-08-07 20:01:20 +08:00
    考虑用 electron 封装一下吗？或者做成 PWA ？
    iFollow
        15
    iFollow  
       2020-08-07 20:03:40 +08:00
    做的真好！以后在 PC 上改用这个了 ~
    longjiahui
        16
    longjiahui  
       2020-08-07 20:12:09 +08:00
    ui 好好看啊
    AngusFish
        17
    AngusFish  
       2020-08-07 20:21:20 +08:00
    搜索功能是不是有问题，白色背景，输入的字也是白色的，回车之后也没反应
    Immortal
        18
    Immortal  
       2020-08-07 20:25:39 +08:00
    挑个刺
    loading 太生硬了 给人感觉一卡一卡的 加个 loading 动画也好
    EKkoGG
        19
    EKkoGG  
       2020-08-07 20:40:11 +08:00
    好好看~ 羡慕
    agdhole
        20
    agdhole  
       2020-08-07 20:56:16 +08:00
    UI 真美
    agdhole
        21
    agdhole  
       2020-08-07 20:57:59 +08:00
    搜索框不能用
    canonlemon
        22
    canonlemon  
       2020-08-07 21:10:39 +08:00
    真不错，但个人觉得这个更漂亮： https://github.com/sl1673495/vue-netease-music
    jaylong
        23
    jaylong  
       2020-08-07 21:47:35 +08:00
    虽然功能还不完善 但 UI 是真舒服
    kaiki
        24
    kaiki  
       2020-08-07 21:57:40 +08:00
    搜索打字是白的，回车无效
    crystom
        25
    crystom  
       2020-08-07 21:59:19 +08:00
    虽然很强，但是好像好久之前就有人做过了
    chenstack
        26
    chenstack  
       2020-08-07 23:20:27 +08:00
    发现把自己的歌单 id 粘贴过去会报 error，为什么呢
    daimubai
        27
    daimubai  
       2020-08-07 23:50:22 +08:00
    我想问下这种会涉及到版权之类的问题吗
    1002xin
        28
    1002xin  
       2020-08-08 00:18:31 +08:00
    除了没有响应式，其他没毛病
    maxxfire
        29
    maxxfire  
       2020-08-08 07:51:26 +08:00
    厉害，好多歌可以听，
    leafre
        30
    leafre  
       2020-08-08 08:45:45 +08:00
    bug 太多
    zhiyzellda
        31
    zhiyzellda  
       2020-08-08 09:18:50 +08:00 via Android
    @zachlhb 在上面加入一个不可打开网址栏，不可调出 chrome://flags 的 chromium 内核。
    运行此内核后强制打开此网站。
    就是 PC 客户端了 （狗头保命🐶
    wolver
        32
    wolver  
       2020-08-08 10:34:36 +08:00
    UI 很有虾米音乐和 nicetheme 那味哈哈
    lxhcool
        33
    lxhcool  
    OP
       2020-08-08 10:54:00 +08:00
    搜索功能已经完成还没有上传，ui 部分参考的虾米音乐，后面会添加加载动画，有时间会继续完善功能，主要是练手项目哈哈哈，谢谢大家的支持，项目已经开源，有其它需求可以自己更改，然后 api 使用的是 binaryify 大神的，
    地址： https://binaryify.github.io/NeteaseCloudMusicApi/#/
    lxhcool
        34
    lxhcool  
    OP
       2020-08-08 10:56:47 +08:00
    @chenstack 可以去个人中心看自己的歌单
    lxhcool
        35
    lxhcool  
    OP
       2020-08-08 10:57:22 +08:00
    @daimubai 不商用应该没有什么问题，已经申请开源了
    lxhcool
        36
    lxhcool  
    OP
       2020-08-08 10:58:37 +08:00
    @baiduyixia 太看得起我了，苦笑
    lxhcool
        37
    lxhcool  
    OP
       2020-08-08 10:59:38 +08:00
    @ASalieri 下载准备去掉，不然会侵权的
    lxhcool
        38
    lxhcool  
    OP
       2020-08-08 11:00:03 +08:00
    @Dganzh binaryify
    jjplay
        39
    jjplay  
       2020-08-08 11:01:17 +08:00
    thinkphp 上线了 还没关闭开发者模式 =。=
    guojam
        40
    guojam  
       2020-08-08 12:13:11 +08:00
    好看 建议官方跟进
    chenstack
        41
    chenstack  
       2020-08-08 12:20:28 +08:00
    @lxhcool 我登录后打开自己的歌单也是 error
    Jianzs
        42
    Jianzs  
       2020-08-08 12:36:27 +08:00
    发现 Bug，instance.js 第 54 行应该是 reject 吧（前端小白随便说说
    vkbo
        43
    vkbo  
       2020-08-08 13:12:19 +08:00
    @Jianzs 肯定是手抖写错了，可以去提个 PR 哈哈
    vkbo
        44
    vkbo  
       2020-08-08 13:15:25 +08:00
    @learningman 你想说的是 loading 吧？ ElementUI 提供了 v-loding 的指令，用起来挺方便的，建议作者用起来，提升用户体验。（ Web App 很漂亮，正在上面听歌摸鱼呢）
    alendia
        45
    alendia  
       2020-08-08 13:19:55 +08:00 via iPhone
    期待响应式
    VVValent
        46
    VVValent  
       2020-08-08 13:33:48 +08:00
    登陆界面这个效果叫啥呀
    lxhcool
        47
    lxhcool  
    OP
       2020-08-08 13:43:50 +08:00
    @VVValent vue-kinesis
    lxhcool
        48
    lxhcool  
    OP
       2020-08-08 13:56:36 +08:00
    @Jianzs 这个是原先项目有些接口 code 返回不是 200 的情况忘记处理了
    DefoliationM
        49
    DefoliationM  
       2020-08-08 14:15:29 +08:00
    看着不错, 功能好像不太全, 个人目前在用这个: https://github.com/Rocket1184/electron-netease-cloud-music
    iConnect
        50
    iConnect  
       2020-08-08 14:33:40 +08:00 via Android
    难道是我才发现楼主是女生吗？难怪 UI 比那些糙男工程师设计的优雅很多！
    cat9life
        51
    cat9life  
       2020-08-08 14:39:39 +08:00
    UI 好看其他不重要
    lxhcool
        52
    lxhcool  
    OP
       2020-08-08 14:55:42 +08:00
    @cat9life 击掌
    jzphx
        53
    jzphx  
       2020-08-08 16:19:27 +08:00
    我词穷了，打开的一瞬间只能说一句牛逼
    AmberJiang
        54
    AmberJiang  
       2020-08-08 16:31:24 +08:00
    看着不错 厉害 不过点击 视频 显示 error 。。。😂
    ligiggy
        55
    ligiggy  
       2020-08-08 20:56:45 +08:00
    niubi
    junbaor
        56
    junbaor  
       2020-08-08 22:01:41 +08:00
    完成度很高，点赞
    FakerLeung
        57
    FakerLeung  
       2020-08-08 23:51:08 +08:00
    不能看歌单列表？点了没反应。顺便说一句，做的真好看。
    jaydenWang
        58
    jaydenWang  
       2020-08-09 09:48:32 +08:00   ❤️ 1
    想了解一下数据从哪获取的
    LoLeon
        59
    LoLeon  
       2020-08-10 10:09:38 +08:00
    上一首 /播放 /下一首 这三个按钮的位置会被 歌曲名称 的空间占用而改变位置, 这点好像用户体验不太好.
    lxhcool
        60
    lxhcool  
    OP
       2020-08-10 11:04:14 +08:00
    @LoLeon 看了还真是，没注意哈哈哈，到时候改一下
    lxhcool
        61
    lxhcool  
    OP
       2020-08-10 11:04:48 +08:00
    @jaydenWang binaryify
    SpringSagit
        62
    SpringSagit  
       2020-08-10 14:12:28 +08:00
    牛逼啊
    ethanSong
        63
    ethanSong  
       2020-08-10 16:18:10 +08:00
    @lxhcool 不是，我只顾着看标题了网易云了，我是在 B 站看到个跟网易云一模一样的，你这个看起来更舒服
    recosong
        64
    recosong  
       2020-08-10 16:51:08 +08:00
    厉害 求网页版咸鱼
    flowfire
        65
    flowfire  
       2020-08-10 17:21:12 +08:00
    加个 letsencrypt 的证书不好吗。。。那个红锁看着我难受
    Norths
        66
    Norths  
       2020-08-11 14:55:34 +08:00
    可以可以！
    Netizen2
        67
    Netizen2  
       2020-08-15 23:42:59 +08:00
    真的不错，收藏了！
    bbzhang
        68
    bbzhang  
       2020-08-16 17:05:35 +08:00
    牛逼牛逼！👍
    jujuul
        69
    jujuul  
       2020-09-02 21:46:27 +08:00
    请问歌曲的时长是怎么获取的呢？我看了好几个获取歌曲信息的 api，都取不到长度
    lxhcool
        70
    lxhcool  
    OP
       2020-09-03 10:48:37 +08:00
    @jujuul 时长接口有返回的，转换一下就行了，audio.duration 这个也可以获取到
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1188 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 18:21 · PVG 02:21 · LAX 10:21 · JFK 13:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.