Taro
Taro 是一套遵循 React 语法规范的多端开发解决方案。
将原生微信小程序转为Taro代码,对转换后的Taro代码用 React 的方式进行二次开发或是转为其他平台的代码,优化小程序的开发体验。
特性
Taro 遵循 React 语法规范,它采用与 React 一致的组件化思想,组件生命周期与 React 保持一致,同时支持使用 JSX 语法,让代码具有更丰富的表现力,使用 Taro 进行开发可以获得和 React 一致的开发体验。
代码示例:
import Taro, { Component } from "@tarojs/taro";
import { View, Button } from "@tarojs/components";
export default class Index extends Component {
constructor() {
super(...arguments);
this.state = {
title: "首页",
list: [1, 2, 3]
};
}
componentWillMount() {}
componentDidMount() {}
componentWillUpdate(nextProps, nextState) {}
componentDidUpdate(prevProps, prevState) {}
shouldComponentUpdate(nextProps, nextState) {
return true;
}
add = e => {
// dosth
};
render() {
return (
<View className="index">
<View className="title">{this.state.title}</View>
<View className="content">
{this.state.list.map(item => {
return <View className="item">{item}</View>;
})}
<Button className="add" onClick={this.add}>
添加
</Button>
</View>
</View>
);
}
}
转换后二次开发
假设已有一个转换后文件如下:
import { View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import withWeapp from '@tarojs/with-weapp'
import './index.scss'
var app = Taro.getApp()
@withWeapp('Page')
class _C extends Taro.Component {
state = {}
componentWillMount(e) {
var orderId = e.id
this.data.orderId = orderId
}
componentDidShow() {
var that = this
Taro.request({
url: 'https://api.it120.cc/' + app.globalData.subDomain + '/order/detail',
data: {
token: Taro.getStorageSync('token'),
id: that.data.orderId
},
success: res => {
Taro.hideLoading()
if (res.data.code != 0) {
Taro.showModal({
title: '错误',
content: res.data.msg,
showCancel: false
})
return
}
that.setData({
orderDetail: res.data.data,
logisticsTraces: res.data.data.logisticsTraces.reverse()
})
}
})
}
config = {
navigationBarTitleText: '物流详情'
}
render() {
const {
orderDetail: orderDetail,
logisticsTraces: logisticsTraces
} = this.state
return (
<View className="container">
<View className="top-sec">
<View className="a-row">
<View className="label">物流单号</View>
<View className="text">{orderDetail.logistics.trackingNumber}</View>
</View>
<View className="a-row">
<View className="label">物流公司</View>
<View className="text">{orderDetail.logistics.shipperName}</View>
</View>
</View>
<View className="sec-wrap">
<View className="details-info">
<View className="line-box" />
{logisticsTraces.map((item, index) => {
return (
<View className="a-row" key={index}>
<View className="dot">
<View
className="active-dot"
hidden={index == 0 ? false : true}
>
<View className="yuan-red" />
</View>
<View
className="default-dot"
hidden={index == 0 ? true : false}
/>
</View>
<View className="info">
<View className="date-box">{item.AcceptTime}</View>
<View className="text">{item.AcceptStation}</View>
</View>
</View>
)
})}
</View>
</View>
</View>
)
}
}
export default _C
它看起来就像普通的 Taro 组件,最重要的区别就在于 @withWeapp() 这个装饰器,你可以将它理解为转换代码的运行时,@withWeapp() 会增加一些原来 Taro 没有方法和属性,例如:
this.setData
转换后的 this.setData 的 API 相当于小程序的 this.setData 的 polyfill,他和 this.setState 最大的区别就在于,this.setData 之后 data 的数据是同步更新,而渲染是异步更新,而 setState 两者都是异步的。
this.data 和 this.properties
this.data 和 this.properties 相当于 Taro 的 this.state 和 this.props 的 alias,当它们的数据更新时,对应的 state 和 props 也会同步更新。