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(, document.getElementById('app'))

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

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。