Taro Music 项目教程

Taro Music 项目教程

taro-music🎉基于taro + taro-ui + redux + react-hooks + typescript 开发的网易云音乐小程序,taro3已升级完毕，目前正在使用react-hooks重构中（不定时更新）项目地址:https://gitcode.com/gh_mirrors/ta/taro-music

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

lsqy/taro-music/
├── config/
├── screenshot/
├── scripts/
├── src/
├── style/
├── .editorconfig
├── .eslintrc
├── .gitattributes
├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js
├── global.d.ts
├── package.json
├── project.config.json
└── tsconfig.json

• config/: 存放项目的配置文件。
• screenshot/: 存放项目的截图。
• scripts/: 存放项目的脚本文件。
• src/: 存放项目的主要源代码。
• style/: 存放项目的样式文件。
• .editorconfig: 编辑器配置文件。
• .eslintrc: ESLint 配置文件。
• .gitattributes: Git 属性配置文件。
• .gitignore: Git 忽略配置文件。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• babel.config.js: Babel 配置文件。
• global.d.ts: 全局类型定义文件。
• package.json: 项目依赖和脚本配置文件。
• project.config.json: 项目配置文件。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

项目的启动文件主要是 src/app.tsx，这是 Taro 项目的入口文件，负责初始化应用和配置全局状态。

// src/app.tsx
import Taro, { Component, Config } from '@tarojs/taro'
import '@tarojs/async-await'
import { Provider } from '@tarojs/redux'
import dva from './utils/dva'
import models from './models'
import './app.scss'
import './assets/iconfont/iconfont.css'

const dvaApp = dva.createApp({
  initialState: {},
  models: models,
})
const store = dvaApp.getStore()

class App extends Component {
  config: Config = {
    pages: [
      'pages/index/index',
      'pages/login/index',
      // 其他页面
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'Taro Music',
      navigationBarTextStyle: 'black'
    }
  }

  componentDidMount () {}

  componentDidShow () {}

  componentDidHide () {}

  componentDidCatchError () {}

  render () {
    return (
      <Provider store={store}>
        {this.props.children}
      </Provider>
    )
  }
}

Taro.render(<App />, document.getElementById('app'))

3. 项目的配置文件介绍

babel.config.js

Babel 配置文件，用于配置 Babel 转译器。

module.exports = {
  presets: [
    ['taro', {
      framework: 'react',
      ts: true
    }]
  ]
}

tsconfig.json

TypeScript 配置文件，用于配置 TypeScript 编译器。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom"]
  },
  "include": [
    "src"
  ]
}

project.config.json

小程序项目配置文件，用于配置小程序的开发工具和项目信息。

{
  "miniprogramRoot": "./dist",
  "projectname": "taro-music",

taro-music🎉基于taro + taro-ui + redux + react-hooks + typescript 开发的网易云音乐小程序,taro3已升级完毕，目前正在使用react-hooks重构中（不定时更新）项目地址:https://gitcode.com/gh_mirrors/ta/taro-music