# 使用 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; }