网易云音乐移动端案例总结 ｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第23天。

一、成品展示：

二、主要的开发流程

• 本地接口项目部署
• 项目初始化
• 需求分析
• 路由准备
• 页面布局
• 网络请求封装
• 实现功能
• vant适配

三、some重点记录

1、本地接口项目部署

首先，需要找到网易云音乐 NodeJS 版 API，
指路：网易云音乐 NodeJS 版 API (neteasecloudmusicapi.js.org),

根据官方文档教程安装项目到本地并启动，启动很重要，不然接口无法调用成功！（版本有更新，可能存在api接口的变化）

原理：

前端请求本地的node项目, node服务器伪装请求去拿网易云音乐服务器数据转发回给自己前端。反向代理就是用本地开启cors的服务器去转发请求拿到数据。

2、项目初始化

1、初始化项目:

vue create cloud-music

2、下载必备包:

yarn add axios vant vue-router

3、引入初始文件:

引入reset.css和flexible.js ,实现样式初始化和适配问题，并引入到main.js

4、配置按需自动引入vant

查看vant官方文档，有多种引入方式，
具体查看：Vant 2 - 轻量、可靠的移动端组件库 (gitee.io))

yarn add babel-plugin-import  -D

3、需求分析

如开头的成品展示环节所示， 创建路由所需要的页面组件，其中views下的页面组件4个：Layout(布局, 顶部导航和底部导航) 、Home首页、Search搜索页、Play歌曲播放。

4、路由准备

1、准备路由配置router/index.js, 显示不同路由页面。默认显示Layout, 然后Layout默认显示二级路由的首页，导出路由对象

// 路由-相关模块
import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/views/Layout'
import Home from '@/views/Home'
import Search from '@/views/Search'
import Play from '@/views/Play'

Vue.use(VueRouter)
const routes = [
    {
        path: '/',
        redirect: '/layout'
    },
    {
        path: '/layout',
        component: Layout,
        redirect: '/layout/home',
        children: [
            {
                path: 'home',
                component: Home,
                meta: { // meta保存路由对象额外信息的
                    title: "首页"
                }
            },
            {
                path: 'search',
                component: Search,
                meta: {
                    title: "搜索"
                }
            }
        ]
    },
    {
        path: '/play',
        component: Play
    }
]

const router = new VueRouter({
    routes
})

export default router

2、main.js - 引入路由对象, 注册到new Vue中

import router from '@/router'

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

3、App.vue中留好router-view显示路由页面

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

持续更新...