初始化taro项目 && 基础tabbar

# 使用 npm 安装 CLI：

$ npm install -g @tarojs/cli

解决安装过程出现sass相关的安装错误：

$ npm install -g mirror-config-china

 

使用命令创建模板项目：

$ taro init myApp

$ npm run dev:weapp

将编译好的dist文件夹导入到微信小程序开发工具预览调试。

 

自定义一个组件：

import React, { Component } from 'react'
import { View, Text } from '@tarojs/components'
import classnames from 'classnames'
import './index.scss'

interface IProps {
    current: number
    color: string
    background: any
    activedColor: string
    tabList: any
    callback: (name: string) => void
}

interface IState {
    currentIndex: number
}

export default class Tabbar extends Component<IProps, IState> {
    static defaultProps: IProps = {
        current: 0,
        color: '#333',
        background: '#fff',
        activedColor: '#11a43c',
        callback: () => { },
        tabList: [
            {
                icon: '\ue600',
                name: '首页',
                pathname: 'home'
            },
            {
                icon: '\ue682',
                name: '微聊',
                pathname: 'chat'
            },
            {
                icon: '\ue603',
                name: '我的',
                pathname: 'user'
            }
        ]
    }

    constructor(props) {
        super(props)
        this.state = {
            currentIndex: props.current
        }
    }

    componentWillMount() { }

    componentDidMount() { }

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }

    updateCurrent(index, pathname) {
        this.setState({
            currentIndex: index
        });
        this.props.callback(pathname);
    }

    render() {
        let { background, tabList } = this.props
        let { currentIndex } = this.state
        return (
            <View className="fc-tabbar fc-tabbar-fixed">
                <View className="fc-tabbar-list" style={{ backgroundColor: background }}>
                    {
                        tabList.map((item, index) => (
                            <View className={classnames('fc-tabbar-item', currentIndex == index && 'actived')} key={index} onClick={this.updateCurrent.bind(this, index, item.pathname)}>
                                <View className="fc-tabbar-icon">
                                    <Text className="iconfont">{item.icon}</Text>
                                </View>
                                <Text className="fc-tabbar-name">{item.name}</Text>
                            </View>
                        ))
                    }
                </View>
            </View>
        )
    }
}

 

@import "../../assets/styles/theme.scss";

.fc-tabbar {
    width: 100%;
    .fc-tabbar-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 80px 15px 80px;
    }

    .fc-tabbar-item {
        padding: 0 30px;

        .fc-tabbar-icon {
            position: relative;
            top: 15px;
        }
        .fc-tabbar-name {
            font-size: 24px;
        }
    }

    .fc-tabbar-item.actived {
        color: $primary-color;
    }
}

.fc-tabbar-fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 1px solid $border-color;
}