Taro实现微信小程序音乐

Taro简介

Taro 是一套遵循 React 语法规范的 多端开发 解决方案。使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、RN 等）运行的代码，组件可以使用Taro的Taro-ui。(摘至官网)

Taro-ui

Taro-ui是一款基于 Taro 框架开发的多端 UI 组件库,里面的一些组件还是挺好用的，也挺好看的，官网很详细而且还有效果图提供观看和体验。

React

React的话跟着官网走一遍基本就能开发了，看了react以后还是觉得自己喜欢vue多一点

项目流程

npm install -g @tarojs/cli

taro init myApp

npm run dev:weapp

开发小程序注意事项

（摘自官网）若使用 微信小程序预览模式 ，则需下载并使用微信开发者工具添加项目进行预览，此时需要注意微信开发者工具的项目设置

需要设置关闭 ES6 转 ES5 功能，开启可能报错

需要设置关闭上传代码时样式自动补全，开启可能报错

需要设置关闭代码压缩上传，开启可能报错

还有一些其他问题需要注意的，这里基本都指出了，我在实际开发中好像也没遇到过里面提及过的问题(�)

app.jsx

import Taro, { Component } from '@tarojs/taro'

import Index from './pages/index'

import { View, Text,Image } from '@tarojs/components'

import './app.less'

import 'taro-ui/dist/style/index.scss'

// 如果需要在 h6 环境中开启 React Devtools

// 取消以下注释：

// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h6')  {

//   require('nerv-devtools')

// }

class App extends Component {

  config = {

      pages: [

        'pages/music/index',

        'pages/index/index',

        'pages/classify/index',

        'pages/user/index',

        'pages/videoPlay/index',

        'pages/music/hotSinger/index',

        'pages/music/singerSong/index',

        'pages/music/albumList/index',

        'pages/classify/playlist/index',

        'pages/player/index',

        'pages/recommendMv/index',

        'pages/songMenu/index',

    ],

    window: {

      backgroundTextStyle: 'light',

      navigationBarBackgroundColor: '#d43c33',

      navigationBarTitleText: 'WeChat',

      navigationBarTextStyle: 'white'

    },

    tabBar: {

        color: "#666",

        selectedColor: "#b4282d",

        backgroundColor: "#fafafa",

        borderStyle: 'black',

        list: [

            {

            pagePath: "pages/music/index",

            iconPath: "./assets/tab-bar/yinyue1.png",

            selectedIconPath: "./assets/tab-bar/yinyue.png",

            text: "音乐"

            }, {

            pagePath: "pages/classify/index",

            iconPath: "./assets/tab-bar/icon1.png",

            selectedIconPath: "./assets/tab-bar/icon.png",

            text: "分类"

            }

            , {

            pagePath: "pages/index/index",

            iconPath: "./assets/tab-bar/sousuo1.png",

                function(){ //手数 http://www.fx61.com/faq/muniu/426.html 

            selectedIconPath: "./assets/tab-bar/sousuo.png",

            text: "搜索"

            }

            // , {

            // pagePath: "pages/user/index",

            // iconPath: "./assets/tab-bar/geren1.png",

            // selectedIconPath: "./assets/tab-bar/geren.png",

            // text: "个人"

            // }

        ]

    },

    requiredBackgroundModes:['audio']

  }

  componentDidMount () {}

  componentDidShow () {}

  componentDidHide () {}

  componentDidCatchError () {}

  // 在 App 类中的 render() 函数没有实际作用

  // 请勿修改此函数

    render () {

        return (

            <Index />

        )

    }

}

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

因为Taro.getBackgroundAudioManager()只支持微信小程序，所以打包成H5失效