Taro小程式開發總結

啊就是我發表於2020-01-12

使用Taro的原因

Taro的優點總結如下圖：

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小程式開發總結

還可以手動選擇需要配置的模版

專案完成之後，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
複製程式碼

執行成功效果：

Taro小程式開發總結

專案結構

├── 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.im/post/5d6b1a… [掘金社群-Taro官網文件總結]

juejin.im/post/5e0dd5… [凹凸實驗室-GMTC峰會總結]

相關文章