Taro實(shí)現(xiàn)微信小程序音樂(lè)

Taro簡(jiǎn)介

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到阿拉山口網(wǎng)站設(shè)計(jì)與阿拉山口網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站制作、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、主機(jī)域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋阿拉山口地區(qū)。

Taro 是一套遵循React語(yǔ)法規(guī)范的 多端開(kāi)發(fā) 解決方案。使用Taro，我們可以只書(shū)寫(xiě)一套代碼，再通過(guò)Taro的編譯工具，將源代碼分別編譯出可以在不同端（微信小程序、H5、RN等）運(yùn)行的代碼，組件可以使用Taro的Taro-ui。(摘至官網(wǎng))

?

Taro-ui

Taro-ui是一款基于Taro框架開(kāi)發(fā)的多端UI組件庫(kù),里面的一些組件還是挺好用的，也挺好看的，官網(wǎng)很詳細(xì)而且還有效果圖提供觀看和體驗(yàn)。

?

React

React的話跟著官網(wǎng)走一遍基本就能開(kāi)發(fā)了，看了react以后還是覺(jué)得自己喜歡vue多一點(diǎn)

?

項(xiàng)目流程

npm install -g @tarojs/cli

taro init myApp

npm run dev:weapp

?

開(kāi)發(fā)小程序注意事項(xiàng)

（摘自官網(wǎng)）若使用 微信小程序預(yù)覽模式 ，則需下載并使用微信開(kāi)發(fā)者工具添加項(xiàng)目進(jìn)行預(yù)覽，此時(shí)需要注意微信開(kāi)發(fā)者工具的項(xiàng)目設(shè)置

?

需要設(shè)置關(guān)閉 ES6 轉(zhuǎn)ES5功能，開(kāi)啟可能報(bào)錯(cuò)

需要設(shè)置關(guān)閉上傳代碼時(shí)樣式自動(dòng)補(bǔ)全，開(kāi)啟可能報(bào)錯(cuò)

需要設(shè)置關(guān)閉代碼壓縮上傳，開(kāi)啟可能報(bào)錯(cuò)

還有一些其他問(wèn)題需要注意的，這里基本都指出了，我在實(shí)際開(kāi)發(fā)中好像也沒(méi)遇到過(guò)里面提及過(guò)的問(wèn)題(?)

?

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環(huán)境中開(kāi)啟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: "音樂(lè)"

????????????}, {

????????????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(){ //手?jǐn)?shù)?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: "個(gè)人"

????????????// }

????????]

????},

????requiredBackgroundModes:['audio']

??}

?

??componentDidMount () {}

?

??componentDidShow () {}

?

??componentDidHide () {}

?

??componentDidCatchError () {}

?

??// 在App類中的render()函數(shù)沒(méi)有實(shí)際作用

??// 請(qǐng)勿修改此函數(shù)

????render () {

????????return (

????????????<Index />

????????)

????}

}

?

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

?

因?yàn)門(mén)aro.getBackgroundAudioManager()只支持微信小程序，所以打包成H5失效

文章標(biāo)題：Taro實(shí)現(xiàn)微信小程序音樂(lè)
轉(zhuǎn)載來(lái)于：http://www.muchs.cn/article10/ghoido.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、服務(wù)器托管、App開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)