仿写网易云音乐基础版

技术要点

• tarojs
• trro-ui
• react
• redux redux-redux

小程序线上体验码

注 开发中，目前是简单的基础架构、可使用网易云账号进行登陆。

体验码

线上码

后台服务

后台服务是基于 NeteaseCloudMusicApi 提供接口，部署在阿里云上。采用node + nginx部署，有兴趣的可以自行了解。

目前项目的基础目录结构

├── README.md
├── babel.config.js
├── config
│   ├── dev.js
│   ├── index.js
│   └── prod.js
├── dist
│   ├── app.js
│   ├── app.js.map
│   ├── app.json
│   ├── app.wxss
│   ├── assets
│   │   └── images
│   ├── base.wxml
│   ├── common.js
│   ├── common.js.map
│   ├── common.wxss
│   ├── comp.js
│   ├── comp.js.map
│   ├── comp.json
│   ├── comp.wxml
│   ├── pages
│   │   ├── funny
│   │   ├── home
│   │   ├── login
│   │   ├── person
│   │   ├── recommendResource
│   │   ├── search
│   │   └── songList
│   ├── project.config.json
│   ├── runtime.js
│   ├── runtime.js.map
│   ├── taro.js
│   ├── taro.js.map
│   ├── utils.wxs
│   ├── vendors.js
│   └── vendors.js.map
├── package-lock.json
├── package.json
├── project.config.json
├── project.private.config.json
├── sitemap.json
├── src
│   ├── api
│   │   ├── auth.js
│   │   ├── common.js
│   │   ├── index.js
│   │   ├── music.js
│   │   └── user.js
│   ├── app.config.js
│   ├── app.js
│   ├── app.scss
│   ├── assets
│   │   ├── css
│   │   └── images
│   ├── component
│   │   ├── musicItem
│   │   ├── musicPlay
│   │   └── tabBar
│   ├── index.html
│   ├── pages
│   │   ├── funny
│   │   ├── home
│   │   ├── login
│   │   ├── musicCalendar
│   │   ├── person
│   │   ├── recommendResource
│   │   ├── search
│   │   └── songList
│   ├── store
│   │   ├── actionType.js
│   │   ├── index.js
│   │   ├── reducer
│   │   └── reducer.js
│   └── utils
│       ├── area.js
│       └── system.js

已经实现的页面

主要页面

• 登陆
• 首页
• 个人中心
• 推荐歌单

其他相关

• 搞笑
• 美女图片

其他组件、api

• 音乐播放封装
• api封装、接口封装
• redux封装

基本页面展示 （将持续开发中、有兴趣的一起加入)

项目的初始化

具体参考tarojs文档

cli工具安装

npm install -g @tarojs/cli
或者使用 yarn 方式
yarn global add @tarojs/cli

使用taro命令初始化项目

taro init newApp

初始化完成后,安装相关依赖

npm install 
or 
npm i

运行项目

需要在微信开发者平台，注册自己的小程序，拿到appid, 使用微信开发者工具打开自己的项目。运行一下命令，可以看到相应的UI页面了

npm run dev:weapp

• 完成以上步骤，项目初始化已经完成

taro-ui的使用

具体可以参考 taro-ui官方文档, 本次项目采用按需引用.

npm install taro-ui

使用demo

import React, { useEffect, useState } from 'react'
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtList, AtListItem, AtAvatar } from "taro-ui" // 按需引入
import { getUserInfo } from '@/api/user'
import './person.scss'

const Person = () => {
  const [profile, setProfile] = useState()
  useEffect(() => {
    getaccountInfo()
  }, [])

  const getaccountInfo = async () => {
    const result = await getUserInfo()
    setProfile(result.profile)
  }

  if (!profile) return null
  return (
    <View className='person'>
      <View className='person-bg' style={{ background: `url(${profile.backgroundUrl})`, backgroundSize: 'cover' }}>
        <View className='avatar'>
          <AtAvatar image={profile.avatarUrl} circle size='large' />
        </View>
        <View className='signature'>{profile.signature}</View>
      </View>
      <AtList
        hasBorder={false}
        customStyle={{ boxSizing: 'border-box' }}
      >
        <AtListItem title='昵称' extraText={profile.nickname} />
        {/* <AtListItem title='地址' /> */}
        <AtListItem title='性别' extraText={profile.gender ? '男' : '女'} />
      </AtList>
    </View>

  )
}

export default Person

按需引入需要引入CSS

可以在src文件下新建一个文件目录

• src
  • assets
    • css
      • modules.scss

引入taro-ui css

@import "~taro-ui/dist/style/components/card.scss";
@import "~taro-ui/dist/style/components/avatar.scss";
@import "~taro-ui/dist/style/components/list.scss";

将css 模块引入到app.scss中

@import "@/assets/css/module.scss";

相关辅助库

• ahooks
• dayjs