lxhcool
V2EX  ›  Vue.js

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

  •  2
     
  •   lxhcool · Aug 7, 2020 · 10984 views
    This topic created in 2285 days ago, the information mentioned may be changed or developed.

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

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

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