搭建taro-demo

taro是由凹凸实验室 发布一套遵循 React 语法规范的多端统一开发框架

1. 安装taro

$ npm install -g @tarojs/cli

2. 搭建脚手架

$ taro init myApp

详情可以到taro官网查看

3. 改造src下的目录结构

目录设置

/service service服务，如接口

/template 公共组件模块

/utils  存放工具类 tools.js

/static  静态资源 图片 css

/pages 页面

4. 编写组件 （banner组件）

在template下新建一个banner.js

 SwiperItem, View, Swiper, Image 是taro已经封装好的组件

import Taro, { Component } from '@tarojs/taro'

import { SwiperItem, View, Swiper, Image } from '@tarojs/components'

export default class Banner extends Component {

  // 添加一个类构造函数来初始化状态 this.state：

  constructor (props) {

    super(props)

    this.state = {

      data: this.props.data

    }

  }

  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {

    const SwiperItems = this.state.data.map((post, i) => {

      return <SwiperItem className='item' key={i}>

        <View>

          <Image className='image' src={post} mode='widthFix'></Image>

        </View>

      </SwiperItem>

    })

    return (

      <Swiper

        className='swiper-banner'

        indicatorColor='#999'

        indicatorActiveColor='#333'

        circular

        indicatorDots

        autoplay

      >

        { SwiperItems }

      </Swiper> 

    )

  }

}

5. 在pages/index/index.js下面使用

import { Banner } from '../../template/banner'  // 导入banner

// 输出 首先定义一个imageList 图片数组  ['1.jpg','2,jpg','3.jpg']

render () {

    return (

      <View className='index'>

        <Banner data={this.state.imageList}></Banner> 

      </View>

    )

  }

6. 封装service 

taro有一个Taro.request(OBJECT) 

在service下创建config.js, service.js, api.js

config 控制基础变了 如域名等..

service封装get.post等..

api 调用service的接口，实现具体的接口，统一管理

config service api

7. 调用service

import API from '../../service/api' //导入api

在componentDidMount 请求接口

componentDidMount () {

    let params = {

      page_no: 1,

      page_size: 2

    }

    API.getList(params).then(res => {

      console.log(res)

    })

  }

react 生命周期