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 (
)
}
}
Taro.render(
因为Taro.getBackgroundAudioManager()只支持微信小程序，所以打包成H5失效