V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
lxhcool
V2EX  ›  Vue.js

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

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