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的接口，实现具体的接口，统一管理
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 生命周期
