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失效