使用Taro的原因
Taro的优点总结如下图:
社区稳定、活跃,新版本迭代速度很快,有没有心动!Taro与其他多端编译的方案对比
小程序的开发框架主要的区别和重心在于:DSL 以及 多端适配。相较于其他方案,Taro解决方式更优。
开始
Taro维护团队-凹凸实验室,背靠大厂,迭代稳定切速度很快,前两天刚发布2.0版本。整个Taro采用React完整的开发体系,如果你有React的开发经验,可完全无压力上手。文档简单易读,快速上手。Taro传送门
如何快速开始一个项目:
1、使用npm 或者 yarn 全局安装 @tarojs/cli
# 1、npm 安装 CLI
$ npm install -g @tarojs/cli
# 2、OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# 3、OR 安装了 cnpm,使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli
2、利用cli创建项目
使用命令创建项目模版:
taro init Taro-Demo
还可以手动选择需要配置的模版
项目完成之后,Taro会默认开始安装项目所需要的依赖,你也可以自己在手动安装:
# 1、使用 yarn 安装依赖
$ yarn
# 2、OR 使用 cnpm 安装依赖
$ cnpm install
# 3、OR 使用 npm 安装依赖
$ npm install
以上,我们就完成一个Taro项目模版的创建
运行
不同的命令,Taro会对应编译成不同端的代码,然后可以在开发工具里浏览效果,这里以微信小程序为例子。
微信小程序需要我们先下载微信开发者工具,然后在项目根目录编译预览(去掉--watch将不会监听文件修改,并会对代码压缩打包)
# 1、yarn
$ yarn dev:weapp
$ yarn build:weapp
# 2、npm script
$ npm run dev:weapp
$ npm run build:weapp
# 3、仅限全局安装
$ taro build --type weapp --watch
$ taro build --type weapp
# 4、npx 用户也可以使用
$ npx taro build --type weapp --watch
$ npx taro build --type weapp
运行成功效果:
项目结构
├── config 配置目录
| ├── dev.js 开发时配置
| ├── index.js 默认配置
| └── prod.js 打包时配置
├── src 源码目录
| ├── components 公共组件目录
| ├── pages 页面文件目录
| | ├── index index 页面目录
| | | ├── index.jsx index 页面逻辑
| | | └── index.scss index 页面样式
| ├── utils 公共方法库
| ├── app.scss 项目总通用样式
| └── app.jsx 项目入口文件
└── package.json
开发问题总结
1-开发规范
除了遵守自己公司内的规范,Taro也有属于自己的开发规范
2-编码顺序
Taro组件包含静态属性、类、生命周期,而且公司commit引入husky规范,所以对书写顺序也有要求(顺序从上到下)
1、static 静态方法
2、constructor
3、componentWillMount
4、componentDidMount
5、componentWillReceiveProps
6、shouldComponentUpdate
7、componentWillUpdate
8、componentDidUpdate
9、componentWillUnmount
10、事件或回调
11、render
3-用对象解构来使用state、props
import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
export default class TaroDemo extends Taro.Component {
constructor(props) {
super(props)
this.state={
demoData: 0
}
}
render () {
const { isChecked } = this.props // ✓ 正确
const { demoData } = this.state // ✓ 正确
return (
<View className='demo'>
{isChecked && <Text className='demo__time'>{demoData}</Text>}// 条件渲染
</View>
)
}
}
4-不能在调用this.setState时直接使用this.state
因为this.setState是异步操作,这样的做法会导致错误,可以直接在函数通过结构的方法使用
this.setState({
value: this.state.value + 1
}) // 错误
const {value} = this.state
this.setState({
value: value + 1
}) // 正确
5-使用map时需要给元素添加key属性(编译器也会提示警告⚠️),key必须是String类型
list.map(item => {
return (
<View className='list__item' key={item.id}>{item.product__name}</View>
)
})
6-事件绑定均以on开头
在 Taro 中所有默认事件如 onClick、onTouchStart 等等,均以 on 开头
import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
export default class TaroDemo extends Taro.Component {
constructor(props) {
super(props)
this.state={
demoData: 0
}
}
handleChecked = (e) => {
console.log(e)
}
render () {
const { isChecked } = this.props // ✓ 正确
const { demoData } = this.state // ✓ 正确
return (
<View className='demo' onClick = { () => this.handleChecked() }> // 正确
{isChecked && <Text className='demo__time'>{demoData}</Text>}// 条件渲染
</View>
)
}
}
7-封装需要引用渲染的函数时,必须rander开头
封装需要引用渲染的函数时,必须rander开头,否则不会生效
isNone=(value) => {
return (
<View class='render'>
<Text>{value}</Text>
</View>
)
} //错误
renderIsNone=(value) => {
return (
<View className='render'>
<Text className='render__text'>{value}</Text>
</View>
)
} //正确
8-不能直接操作源数据
直接去操作修改引用型数据类型,源数据会被污染,深拷贝数据解决问题
handleDelete = (item) => {
item.id = 0 //错误
const {_item} = {...item}
_item.id = 0 //正确
}
以上仅为个人总结,欢迎指正,以便修改。
参考文章
nervjs.github.io/taro/docs/R… [Taro-官方文档]
developers.weixin.qq.com/miniprogram… [微信-官方文档]
juejin.cn/post/684490… [掘金社区-Taro官网文档总结]
juejin.cn/post/684490… [凹凸实验室-GMTC峰会总结]