Taro小程序开发总结

1,645 阅读3分钟

使用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峰会总结]