简介#
Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 等应用。现如今市面上端的形态多种多样,Web、React Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。
特性
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>
);
}
}
由于微信小程序端的限制,有极少数 JSX 的优秀用法暂时不能得到很好地支持,同时,为了遵循 React 语法,Taro 在写法上也有一些自己的规范,具体可以参考:Taro 开发最佳实践 。
学习资源:
w3cschool - taro
taro官方文档