taro-mbox

taro-mbox是一个用taro实现的音乐类微信小程序项目（仿QQ音乐）

可能有朋友还没听说过taro, 不知道taro是什么。
下面是引用taro官方介绍：

多端统一开发框架，支持用 React 的开发方式编写一次代码，生成能运行在微信/百度/支付宝/字节跳动小程序、H5、React Native 等的应用。

公司项目主要是用的 vue, react用的较少不过写起taro来感觉真的是很棒，因为taro的文档写的很详细，项目开始前花一两天仔细看看官方文档就好。

下面是项目效果图

推荐页	排行榜	搜索页

列表页.gif

下面是项目部分代码

页面(首页)代码是这样子滴

// 引入 Taro 和 Component
import Taro, { Component } from '@tarojs/taro'
// 引入 Taro 提供的组件
import { View } from '@tarojs/components'
// 引入自定义组件
import { Topbar, Recommend, RankingList, Search } from '@components'
import { connect } from '@tarojs/redux'
import { getRankingData } from '@utils/request'
import './index.scss'

@connect(state => state.activeTab, {})
export default class Index extends Component {
  config = {
    navigationBarTitleText: '首页'
  }
  
  constructor() {
    super(...arguments)
    this.state = {
      topList: [],
      tabIndex: 0
    }
  }
  
  componentWillReceiveProps(nextProps) {
    this.setState({
      tabIndex: nextProps.tabIndex
    })
  }

  async componentWillMount () { 
    const resp = await getRankingData()
    const { topList } = resp.data
    this.setState({
      topList
    })
  }

  render () {
    const { tabIndex } = this.state
    // jsx中写组件
    return (
      <View className='index'>
        <Topbar active={0} />
        {tabIndex === 0 && <Recommend />}
        {tabIndex === 1 && <RankingList topList={this.state.topList} />}
        {tabIndex === 2 && <Search />}
      </View>
    )
  }
}

组件(顶部导航)代码

import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { connect } from '@tarojs/redux'
import * as actions from '@actions/activeTab'
import './index.scss'

@connect(state => state.activeTab, actions)

export default class Topbar extends Component {
  constructor() {
    super(...arguments)
    this.state = {
      activeIndex: 0
    }
  }
 // 设置默认的props
  static defaultProps = {
    active: 1,
    tabList: [
      {value: 0, label: '推荐'},
      {value: 1, label: '排行榜'},
      {value: 2, label: '搜索'}
    ]
  }

  componentWillMount() {
    this.setState({
      activeIndex: this.props.active 
    }, () => {
      this.props.dispatchTabChange(this.props.active)
    })
  }

  onClickTab (index) {
    this.setState({
      activeIndex: index
    }, () => {
      this.props.dispatchTabChange(index)
    })
  }

  getClsName (index) {
    return 'flex-1 tab-item' + (this.state.activeIndex === index ? ' active' : '')
  }

  render() {
    const tabs = this.props.tabList.map((tab, index) => {
      return (
        <Text 
          className={this.getClsName(index)}
          onClick={this.onClickTab.bind(this, index)}
          key={tab.value}
        >
        {tab.label}
        </Text>
      )
    })

    return (
      <View className='tab-box flex-box'>
        {tabs}
      </View>
    )
  }
}

解决的坑

taro原本是不支持在小程序中注入全局的SCSS代码的，如果是H5的话是可以配置的。后来我在项目中找到了一种可行的方案，使得小程序也能支持这个功能。提交了PR，从taro v1.2.25开始支持。
只需要在plugins.sass添加下面连个属性即可

plugins: {
    sass: {
    resource: path.resolve(__dirname, '..', 'src/styles/variable.scss'),
    projectDirectory: path.resolve(__dirname, '..')
  }
}

有兴趣的可以看文档如何设置。

感兴趣的朋友可以点击 taro-mbox 去github看看源码吧
如果觉得这个项目对你有帮助请点个 star 呗！

微信小程序	H5
clone代码到开发者工具运行

音乐类微信小程序 taro-mbox（仿QQ音乐）