网易云音乐UniApp项目教程

最新推荐文章于 2024-08-31 08:14:31 发布

任铃冰Flourishing

最新推荐文章于 2024-08-31 08:14:31 发布

阅读量327

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00529/article/details/141012878

版权

网易云音乐UniApp项目教程

netease-music-uniappVue3 + vite + pinia + ts 实现网易云音乐小程序、h5 等多端应用，基于 uni-app项目地址:https://gitcode.com/gh_mirrors/ne/netease-music-uniapp

1. 项目的目录结构及介绍

netease-music-uniapp/
├── common/
│   ├── api.js
│   ├── util.js
│   └── ...
├── components/
│   ├── music-list.vue
│   ├── player.vue
│   └── ...
├── pages/
│   ├── index/
│   │   ├── index.vue
│   │   └── ...
│   ├── playlist/
│   │   ├── playlist.vue
│   │   └── ...
│   └── ...
├── static/
│   ├── images/
│   │   ├── logo.png
│   │   └── ...
│   └── ...
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── uni.scss

目录结构介绍

common/: 存放公共的API和工具函数。
components/: 存放可复用的Vue组件。
pages/: 存放应用的各个页面。
static/: 存放静态资源，如图片等。
App.vue: 应用的根组件。
main.js: 应用的入口文件。
manifest.json: 应用的配置文件。
pages.json: 页面路由和全局配置文件。
uni.scss: 全局样式文件。

2. 项目的启动文件介绍

`main.js`

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

启动文件介绍

main.js 是项目的入口文件，负责初始化Vue实例并挂载到应用中。
引入了根组件 App.vue，并配置了一些Vue的全局设置。

3. 项目的配置文件介绍

`manifest.json`

{
  "name": "netease-music-uniapp",
  "description": "A UniApp project for NetEase Music",
  "version": "1.0.0",
  "author": "imzusheng",
  "uni-app": {
    "scripts": {
      "dev": "uni -p h5",
      "build": "uni build -p h5"
    }
  }
}

`pages.json`

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/playlist/playlist",
      "style": {
        "navigationBarTitleText": "歌单"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "网易云音乐",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}