Taro是一套遵循 React语法规范 的 多端开发 解决方案。
使用Taro,我们可以只书写一套代码,再通过Taro工具,将源码分别编译出可以在不同端【微信、百度、支付宝、字节跳动、H5、React-Native等】运行代码。
开发前注意:
小程序
若使用微信小程序预览模式,则需下载并使用微信开发者工具添加项目进行预览,此时需要注意微信开发者工具的项目设置:
-需要设置关闭ES5转ES6功能,开启可能报错;
-需要设置关闭上传代码时样式自动补全,开启可能报错;
-需要设置关闭代码压缩上传,开启可能报错;
React Native
如果支持React Native端,秀才用Flex布局并且样式选择器仅支持类选择器,且不支持组合器。
-使用Flex布局;
-基于BEM写样式;
-采用style属性覆盖组件样式;
RN中view标签默认主轴方向是column,如果不将其他端改成与RN一致,就需要在所有display:flex;的地方都显示声明主轴方向。
其他注意事项:
1、运行时报缺少包,需要在.rn_temp目录里安装;
2、文字要包在Text组件里,否则不显示;
3、position:fixed;React Native不支持;
4、Animation和transform React Native 动画不支持;
5、React Native 与H5/小程序的flex布局相关属性的默认值有差异;
API
API说明:
Taro的API包括Taro的内置API以及小程序的端能力API的封装。
其中对小程序的端能力API的封装,主要基于微信小程序的API规范,对于其他小程序类似的API,会在Taro中适配为小程序API的规范格式,并且都挂载在Taro命名空间下。
Taro.Component:
Taro.Component是一个抽象基础类,因此直接引用Taro.Component几乎没意义。相反,你通常继承自他,并至少定义一个render()方法。
class Demo extends Component {
render() {
return <h1>Hello World!</h1>
}
}
这里Taro和React不一样的地方在于没有暴露出一个createClass的方法,你只能用ES6的class类来创建Taro组件。
组件生命周期:
1、装载【Mounting】
这些方法会在组件实例被创建和插入DOM中时被调用:
-constructor()
-componentWillMount()
-render()
-componentDidMount()
2、更新【updateing】
属性或状态的改变会触发一次更新。当一个组件在被重新渲染时,这些方法会被重新调用:
-componentWillReceiveProps()
-shouldComponentUpdate()
-componentWillUpdate()
-render()
-componentDidUpdate()
3、卸载【Unmounting】
componentWillUnMount()
4、其他API
每一个组件还提供了其他API
-setState()
-forceUpdate()
5、类属性
-defaultProps
6、实例属性
-props
-state
-config【小程序属性】
环境判断:
Trao.ENV_TYPE
-ENV_TYPE.WEAPP 微信小程序环境
-ENV_TYPE.SWAN 百度小程序环境
-ENV_TYPE.ALPAY 支付宝小程序环境
-ENV_TYPE.TT 字节跳动小程序环境
-ENV_TYPE.WEB web【H5】环境
-ENV_TYPE.RN React Native 环境
Taro.getEnv()
消息机制
组件库
-首字母大些与驼峰式命名
-组件的事件传递都要以on开头