taro框架的缺陷以及注意事項

本文轉載自查看原文 2020-10-05 22:57 2952 taro/ React

1.不要使用 eval()

禁止使用 Object 構造器

let config = new Object() // ✗ 錯誤

不使用 Generator 函數語法

function* helloWorldGenerator() { // ✗ 錯誤
yield 'hello';
yield 'world';
return 'ending';
}

import Taro, { Component } from '@tarojs/taro'
import { View, Input } from '@tarojs/components'
class MyComponent extends Component {
render () {
return (
< View className='test'> // ✓ 正確
< Text className="test_text">12</Text> // ✗ 錯誤
</ View>
)
}
}

推薦使用對象解構的方式來使用 state、props

import Taro, { Component } from '@tarojs/taro'
import { View, Input } from '@tarojs/components'
class MyComponent extends Component {
state = {
myTime: 12
}
render () {
const { isEnable } = this.props // ✓ 正確
const { myTime } = this.state // ✓ 正確
return (
< View className='test'>
{isEnable && < Text className='test_text'>{myTime}</Text>}
</ View>
)
}
}

不要以 class/id/style 作為自定義組件的屬性名

<Hello class='foo' /> // ✗ 錯誤
<Hello id='foo' /> // ✗ 錯誤
<Hello style='foo' /> // ✗ 錯誤

不要在調用 this.setState 時使用 this.state

this.setState({
value: this.state.value + 1
}) // ✗ 錯誤
this.setState(prevState => ({ value: prevState.value + 1 })) // ✓ 正確

map 循環時請給元素加上 key 屬性

list.map( item => {
return (
<View className='list_item' key={item.id}>{item.name}</View>
)
})

盡量避免在 componentDidMount 中調用 this.setState

import Taro, { Component } from '@tarojs/taro'
import { View, Input } from '@tarojs/components'
class MyComponent extends Component {
state = {
myTime: 12
}
componentDidMount () {
this.setState({ // ✗ 盡量避免，可以在 componentWillMount 中處理
name: 1
})
}
render () {
const { isEnable } = this.props
const { myTime } = this.state
return (
< View className='test'>
{isEnable && < Text className='test_text'>{myTime}</Text>}
</ View>
)
}
}

10.

不要在 componentWillUpdate/componentDidUpdate/render 中調用 this.setState

import Taro, { Component } from '@tarojs/taro'
import { View, Input } from '@tarojs/components'
class MyComponent extends Component {
state = {
myTime: 12
}
componentWillUpdate () {
this.setState({ // ✗ 錯誤
name: 1
})
}
componentDidUpdate () {
this.setState({ // ✗ 錯誤
name: 1
})
}
render () {
const { isEnable } = this.props
const { myTime } = this.state
this.setState({ // ✗ 錯誤
name: 11
})
return (
< View className='test'>
{isEnable && < Text className='test_text'>{myTime}</Text>}
</ View>
)
}
}

不要定義沒有用到的 state

11.

組件最好定義 defaultProps

import Taro, { Component } from '@tarojs/taro'
import { View, Input } from '@tarojs/components'
class MyComponent extends Component {
static defaultProps = {
isEnable: true
}
state = {
myTime: 12
}
render () {
const { isEnable } = this.props
const { myTime } = this.state
return (
<View className='test'>
{isEnable && <Text className='test_text'>{myTime}</Text>}
</View>
)
}
}

12.taro注意：

不能在包含 JSX 元素的 map 循環中使用 if 表達式

以下代碼會被 ESLint 提示警告，同時在 Taro（小程序端）也不會有效：

numbers.map( (number) => {
let element = null
const isOdd = number % 2
if (isOdd) {
element = <Custom />
}
return element
})

以下代碼不會被警告，也應當在 Taro 任意端中能夠運行：

numbers.map( (number) => {
let isOdd = false
if (number % 2) {
isOdd = true
}
return isOdd && <Custom />
})

13.

盡量在 map 循環中使用條件表達式或邏輯表達式

numbers.map( (number) => {
const isOdd = number % 2
return isOdd ? <Custom /> : null
})
numbers.map( (number) => {
const isOdd = number % 2
return isOdd && <Custom />
})

14不能使用 Array#map 之外的方法操作 JSX 數組

15.

先處理好需要遍歷的數組，然后再用處理好的數組調用 map 方法。

numbers.filter(isOdd).map( (number) => <View />)
for (let index = 0; index < array.length; index++) {
// do you thing with array
}
const element = array.map(item => {
return <View />
})

16.

不能在 JSX 參數中使用匿名函數

以下代碼會被 ESLint 提示警告，同時在 Taro（小程序端）也不會有效：

<View onClick={ () => this.handleClick()} />
<View onClick={ (e) => this.handleClick(e)} />
<View onClick={ () => ({})} />
<View onClick={ function () {}} />
<View onClick={ function (e) {this.handleClick(e)}} />

17.

以下代碼不會被警告，也應當在 Taro 任意端中能夠運行：

<View onClick={ this.hanldeClick} />
<View onClick={ this.props.hanldeClick} />
<View onClick={ this.hanldeClick.bind(this)} />
<View onClick={ this.props.hanldeClick.bind(this)} />

不能在 JSX 參數中使用對象展開符

以下代碼會被 ESLint 提示警告，同時在 Taro（小程序端）也不會有效：

<View {...this.props} />
<View {...props} />
<Custom {...props} />

不支持無狀態組件

以下代碼會被 ESLint 提示警告，同時在 Taro（小程序端）也不會有效：

function Test () {
return <View />
}
function Test (ary) {
return ary.map(() => <View />)
}
const Test = () => {
return <View />
}
const Test = function () {
return <View />
}

微信小程序中 onLaunch 通常帶有一個參數 options，在 Taro 中你可以在所有生命周期和普通事件方法中通過 this.$router.params 訪問到，在其他端也適用

21 render中不要寫邏輯

22.

路由傳參

我們可以通過在所有跳轉的 url 后面添加查詢字符串參數進行跳轉傳參，例如

// 傳入參數 id= 2&type=test
Taro.navigateTo({
url: '/pages/page/path/name?id= 2&type=test'
})

這樣的話，在跳轉成功的目標頁的生命周期方法里就能通過 this.$router.params 獲取到傳入的參數，例如上述跳轉，在目標頁的 componentWillMount 生命周期里獲取入參

class C extends Taro.Component {
componentWillMount () {
console.log( this.$router.params) // 輸出 { id: 2, type: 'test' }
}
}

在 Taro 中尺寸單位建議使用 px、 百分比 %，Taro 默認會對所有單位進行轉換。在 Taro 中書寫尺寸按照 1:1 的關系來進行書寫，即從設計稿上量的長度 100px，那么尺寸書寫就是 100px，當轉成微信小程序的時候，尺寸將默認轉換為 100rpx，當轉成 H5 時將默認轉換為以 rem 為單位的值。

如果你希望部分 px 單位不被轉換成 rpx 或者 rem ，最簡單的做法就是在 px 單位中增加一個大寫字母，例如 Px 或者 PX 這樣，則會被轉換插件忽略。

結合過往的開發經驗，Taro 默認以 750px 作為換算尺寸標准，如果設計稿不是以 750px 為標准，則需要在項目配置 config/index.js 中進行設置，例如設計稿尺寸是 640px，則需要修改項目配置 config/index.js 中的 designWidth配置為 640：

const config = {
projectName: 'myProject',
date: '2018-4-18',
designWidth: 640,
....
}

目前 Taro 支持 750、 640 、 828 三種尺寸設計稿，他們的換算規則如下：

const DEVICE_RATIO = {
'640': 2.34 / 2,
'750': 1,
'828': 1.81 / 2
}

24.

小程序樣式中引用本地資源

在小程序的樣式中，默認不能直接引用本地資源，只能通過網絡地址、Base64 的方式來進行資源引用，為了方便開發，Taro 提供了直接在樣式文件中引用本地資源的方式，其原理是通過 PostCSS 的 postcss-url 插件將樣式中本地資源引用轉換成 Base64 格式，從而能正常加載。

Taro 默認會對 10kb 大小以下的資源進行轉換，如果需要修改配置，可以在 config/index.js 中進行修改，配置位於 weapp.module.postcss。

具體配置如下

// 小程序端樣式引用本地資源內聯
url: {
enable: true,
config: {
limit: 10240 // 設定轉換尺寸上限
}
}

JavaScript 表達式也可以嵌套：

render () {
const todos = ['finish doc', 'submit pr', 'nag dan to review'];
return (
<ul>
{todos.map((todo) => <Text>{todo}</Text>)}
</ul>
)
}

26 條件判斷

<View> {showHeader && <Header />} <Content /> </View>

使用 PropTypes 檢查類型

隨着應用日漸龐大，你可以通過類型檢查捕獲大量錯誤。要檢查組件的屬性，你需要配置特殊的 propTypes 屬性：

import PropTypes from 'prop-types';
class Greeting extends Component {
render() {
return (
<h1> Hello, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: PropTypes.string
};

如上例，Taro 與 React 一樣，也支持PropTypes 檢查類型，目前在小程序端還有些問題，但在 H5 端可以使用，用法和在 React 里一樣。更多可參照React 的相關文檔。

setState異步

// 假設我們之前設置了 this.state.counter = 0
updateCounter () {
this.setState({
counter: 1
}, () => {
// 在這個函數內你可以拿到 setState 之后的值
})
}

在 Taro 中另一個不同是你不能使用 catchEvent 的方式阻止事件冒泡。你必須明確的使用 stopPropagation。例如，阻止事件冒泡你可以這樣寫：

class Toggle extends React.Component {
constructor (props) {
super(props)
this.state = {isToggleOn: true}
}
onClick = (e) => {
e.stopPropagation()
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}))
}
render () {
return (
<button onClick={ this.onClick}>
{ this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
)
}
}

向事件處理程序傳遞參數

通常我們會為事件處理程序傳遞額外的參數。例如，若是 id 是你要刪除那一行的 id，以下兩種方式都可以向事件處理程序傳遞參數：

<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

當你通過 bind 方式向監聽函數傳參，在類組件中定義的監聽函數，事件對象 e 要排在所傳遞參數的后面。

class Popper extends Component {
constructor () {
super(...arguments)
this.state = { name:'Hello world!' }
}
// 你可以通過 bind 傳入多個參數
preventPop (name, test, e) { //事件對象 e 要放在最后
e.preventDefault()
}
render () {
return <Button onClick={this.preventPop.bind(this, this.state.name, 'test')}></Button>
}
}

父組件控制狀態值來決定子組件的條件渲染

Keys

但是在上面的代碼，你會得到一個報錯：提醒你當循環一個數組時應該提供 keys。Keys 可以在 DOM 中的某些元素被增加或刪除的時候幫助 Nerv/小程序識別哪些元素發生了變化。因此你應當給數組中的每一個元素賦予一個確定的標識。

const numbers = [...Array(100).keys()] // [0, 1, 2, ..., 98, 99]
const listItems = numbers.map((number) => {
return <Text
key={ String(number)}
class='li'
>
我是第 { number + 1} 個數字
</Text>
})

34不同數組中可以使用相同的key

數組元素中使用的 key 在其兄弟之間應該是獨一無二的。然而，它們不需要是全局唯一的。當我們生成兩個不同的數組時，我們可以使用相同的 key：

class App extends Componenet {
state = {
posts: [
{ id: 1, title: 'Hello World', content: 'Welcome to learning Taro!'},
{ id: 2, title: 'Installation', content: 'You can install Taro from npm.'}
]
}
render () {
const { posts } = this.state
const sidebar = (
<View>
{posts.map((post) =>
<Text key={post.id}>
{post.title}
</Text>
)}
</View>
)
const content = posts.map((post) => {
return <View key={post.id}>
<Text>{post.title}</Text>
<Text>{post.content}</Text>
</View>
})
return (
<View>
{sidebar}
<View class="divider" />
{content}
</View>
)
}
}

Children

在我們設計組件時，有些組件通常不知道自己的子組件會有什么內容，例如 Sidebar 和 Dialog 這樣的容器組件。

我們建議在這樣的情況使用 this.props.children 來傳遞子元素：

class Dialog extends Component {
render () {
return (
< View className='dialog'>
< View className='header'>Welcome!</View>
< View className='body'>
{ this.props.children}
</ View>
< View className='footer'>-- divider --</View>
</ View>
)
}
}

這樣就能允許其它組件在 JSX 中嵌套任意子組件傳遞給 Dialog:

class App extends Component {
render () {
return (
< View className='container'>
< Dialog>
< View className="dialog-message">
Thank you for using Taro.
</ View>
</ Dialog>
</ View>
)
}
}

在 <Dialog /> JSX 標簽內的任何內容都會作為它的子元素(Children)都會傳遞到它的組件。

36 refs rechart 元素綁定初始化

class MyComponent extends Component { componentDidMount () { // 如果 ref 的是小程序原生組件，那只有在 didMount 生命周期之后才能通過 // this.refs.input 訪問到小程序原生組件 if (process.env.TARO_ENV === 'weapp') { // 這里 this.refs.input 訪問的時候通過 `wx.createSeletorQuery` 取到的小程序原生組件 } else if (process.env.TARO_ENV === 'h5') { // 這里 this.refs.input 訪問到的是 `@tarojs/components` 的 `Input` 組件實例 } } render () { return <Input ref='input' /> } }

利用 externalClasses 定義段定義若干個外部樣式類。這個特性從小程序基礎庫版本 1.9.90 開始支持。

/* CustomComp.js */
export default CustomComp extends Component {
static externalClasses = ['my-class']
render () {
return <View className="my-class">這段文本的顏色由組件外的 class 決定</View>
}
}

/* MyPage.js */
export default MyPage extends Component {
render () {
return <CustomComp my-class="red-text" />
}
}

/* MyPage.scss */
.red-text {
color: red;
}

全局樣式類

使用外部樣式類可以讓組件使用指定的組件外樣式類，如果希望組件外樣式類能夠完全影響組件內部，可以將組件構造器中的 options.addGlobalClass 字段置為 true。這個特性從小程序基礎庫版本 2.2.3 開始支持。

/* CustomComp.js */
export default CustomComp extends Component {
static options = {
addGlobalClass: true
}
render () {
return <View className="red-text">這段文本的顏色由組件外的 class 決定</View>
}
}

/* 組件外的樣式定義 */
.red-text {
color: red;
}

使用 this.$componentType 來判斷當前 Taro.Component 是頁面還是組件

this.$componentType 可能取值分別為 PAGE 和 COMPONENT，開發者可以根據此變量的取值分別采取不同邏輯。

在微信小程序中，從調用 Taro.navigateTo、Taro.redirectTo 或 Taro.switchTab 后，到頁面觸發 componentWillMount 會有一定延時。因此一些網絡請求可以提前到發起跳轉前一刻去請求。

Taro 提供了 componentWillPreload 鈎子，它接收頁面跳轉的參數作為參數。可以把需要預加載的內容通過 return 返回，然后在頁面觸發 componentWillMount 后即可通過 this.$preloadData 獲取到預加載的內容。

class Index extends Component {
componentWillMount () {
console.log( 'isFetching: ', this.isFetching)
this.$preloadData
.then(res => {
console.log( 'res: ', res)
this.isFetching = false
})
}
componentWillPreload (params) {
return this.fetchData(params.url)
}
fetchData () {
this.isFetching = true
...
}
}

預加載

class Index extends Component {
componentWillMount () {
console.log( 'isFetching: ', this.isFetching)
this.$preloadData
.then(res => {
console.log( 'res: ', res)
this.isFetching = false
})
}
componentWillPreload (params) {
return this.fetchData(params.url)
}
fetchData () {
this.isFetching = true
...
}
}

43 全局變量

全局變量

在 Taro 中推薦使用 Redux 來進行全局變量的管理，但是對於一些小型的應用， Redux 就可能顯得比較重了，這時候如果想使用全局變量，推薦如下使用。

新增一個自行命名的 JS 文件，例如 global_data.js，示例代碼如下

const globalData = {}
export function set (key, val) {
globalData[key] = val
}
export function get (key) {
return globalData[key]
}

隨后就可以在任意位置進行使用啦

import { set as setGlobalData, get as getGlobalData } from './path/name/global_data'
setGlobalData( 'test', 1)
getGlobalData( 'test')

44 上傳下載

上傳、下載

Taro.uploadFile(OBJECT)

使用方式同 wx.uploadFile，支持 Promise 化使用。

示例代碼：

import Taro from '@tarojs/taro'
const uploadTask = Taro.uploadFile(params).then(...)

Taro.downloadFile(OBJECT)

使用方式同 wx.downloadFile，支持 Promise 化使用。

示例代碼：

import Taro from '@tarojs/taro'
Taro.downloadFile(params).then(...)

45 端能力api

圖片

Taro.chooseImage(OBJECT)

使用方式同 wx.chooseImage，支持 Promise 化使用。

示例代碼：

import Taro from '@tarojs/taro'
Taro.chooseImage(params).then(...)

Taro.previewImage(OBJECT)

使用方式同 wx.previewImage，支持 Promise 化使用。

示例代碼：

import Taro from '@tarojs/taro'
Taro.previewImage(params).then(...)

Taro.getImageInfo(OBJECT)

使用方式同 wx.getImageInfo，支持 Promise 化使用。

示例代碼：

import Taro from '@tarojs/taro'
Taro.getImageInfo(params).then(...)

Taro.saveImageToPhotosAlbum(OBJECT)

使用方式同 wx.saveImageToPhotosAlbum，支持 Promise 化使用。

示例代碼：

import Taro from '@tarojs/taro'
Taro.saveImageToPhotosAlbum(params).then(...)

46 端能力api

Taro.showToast(OBJECT)

Taro.showToast({ title: '成功', icon: 'success', duration: 2000 }) .then(res => console.log(res))

Taro.showLoading(OBJECT)

顯示 loading 提示框, 需主動調用 Taro.hideLoading 才能關閉提示框，支持 Promise 化使用。

OBJECT 參數說明：

參數	類型	必填	說明
title	String	是	提示的內容
mask	Boolean	否	是否顯示透明蒙層，防止觸摸穿透，默認：false
success	Function	否	接口調用成功的回調函數
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

示例代碼：

import Taro from '@tarojs/taro'
Taro.showLoading({
title: 'loading'
})
.then( res => console.log(res))

Taro.hideToast()

隱藏消息提示框

Taro.hideLoading()

隱藏 loading 提示框

Taro.showModal(OBJECT)

import Taro from '@tarojs/taro' // 注意：無論用戶點擊確定還是取消，Promise 都會 resolve。 Taro.showModal({ title: 'xxx', content: 'hello world', }) .then(res => console.log(res.confirm, res.cancel))

Taro.showActionSheet(OBJECT)

顯示操作菜單，支持 Promise 化使用。

設置導航條

Taro.setNavigationBarTitle(OBJECT)

使用方式同 wx.setNavigationBarTitle，支持 Promise 化使用。

示例代碼：

import Taro from '@tarojs/taro'
Taro.setNavigationBarTitle(params).then(...)

Taro.showNavigationBarLoading()

在當前頁面顯示導航條加載動畫。

Taro.hideNavigationBarLoading()

隱藏導航條加載動畫。

Taro.setNavigationBarColor(OBJECT)

使用方式同 wx.setNavigationBarColor，支持 Promise 化使用。

示例代碼：

import Taro from '@tarojs/taro'
Taro.setNavigationBarColor(params).then(...)

API	微信小程序	ReactNative
Taro.setNavigationBarTitle	✔️	✔️
Taro.showNavigationBarLoading	✔️	✔️
Taro.hideNavigationBarLoading	✔️	✔️
Taro.setNavigationBarColor	✔️	✔️(不支持 animation 參數)

設置 tabBar

Taro.setTabBarBadge(OBJECT)

使用方式同 wx.setTabBarBadge，支持 Promise 化使用。

示例代碼：

import Taro from '@tarojs/taro'
Taro.setTabBarBadge(params).then(...)

Taro.removeTabBarBadge(OBJECT)

使用方式同 wx.removeTabBarBadge，支持 Promise 化使用。

示例代碼：

import Taro from '@tarojs/taro'
Taro.removeTabBarBadge(params).then(...)

Taro.showTabBarRedDot(OBJECT)

使用方式同 wx.showTabBarRedDot，支持 Promise 化使用。

示例代碼：

import Taro from '@tarojs/taro'
Taro.showTabBarRedDot(params).then(...)

Taro.hideTabBarRedDot(OBJECT)

使用方式同 wx.hideTabBarRedDot，支持 Promise 化使用。

示例代碼：

import Taro from '@tarojs/taro'
Taro.hideTabBarRedDot(params).then(...)

Taro.setTabBarStyle(OBJECT)

使用方式同 wx.setTabBarStyle，支持 Promise 化使用。

示例代碼：

import Taro from '@tarojs/taro'
Taro.setTabBarStyle(params).then(...)

Taro.setTabBarItem(OBJECT)

使用方式同 wx.setTabBarItem，支持 Promise 化使用。

示例代碼：

import Taro from '@tarojs/taro'
Taro.setTabBarItem(params).then(...)

Taro.showTabBar(OBJECT)

使用方式同 wx.showTabBar，支持 Promise 化使用。

示例代碼：

import Taro from '@tarojs/taro'
Taro.showTabBar(params).then(...)

Taro.hideTabBar(OBJECT)

使用方式同 wx.hideTabBar，支持 Promise 化使用。

示例代碼：

import Taro from '@tarojs/taro'
Taro.hideTabBar(params).then(...)

API	微信小程序	H5	ReactNative
Taro.setTabBarBadge	✔️
Taro.removeTabBarBadge	✔️
Taro.showTabBarRedDot	✔️
Taro.hideTabBarRedDot	✔️
Taro.setTabBarStyle	✔️
Taro.setTabBarItem	✔️
Taro.showTabBar	✔️
Taro.hideTabBar	✔️

設置置頂信息

Taro.setTopBarText(OBJECT)

使用方式同 wx.setTopBarText，支持 Promise 化使用。

示例代碼：

import Taro from '@tarojs/taro'
Taro.setTopBarText(params).then(...)

API	微信小程序	H5	ReactNative
Taro.setTopBarText	✔️

API	微信小程序	H5	ReactNative
Taro.navigateTo	✔️	✔️	✔️
Taro.redirectTo	✔️	✔️	✔️
Taro.switchTab	✔️		✔️
Taro.navigateBack	✔️	✔️	✔️
Taro.reLaunch	✔️		✔️
Taro.getCurrentPages	✔️		✔️

動畫

Taro.createAnimation(OBJECT)

使用方式同 wx.createAnimation。

示例代碼：

import Taro from '@tarojs/taro'
const animation = Taro.createAnimation({
transformOrigin: "50% 50%",
duration: 1000,
timingFunction: "ease",
delay: 0
})

API	微信小程序	H5	ReactNative
Taro.createAnimation	✔️

位置

Taro.pageScrollTo(OBJECT)

使用方式同 wx.pageScrollTo，支持 Promise 化使用。

示例代碼：

import Taro from '@tarojs/taro'
Taro.pageScrollTo(params).then(...)

API	微信小程序	H5	ReactNative
Taro.pageScrollTo	✔️

繪圖

Taro.createCanvasContext(canvasId, this.$scope)

使用方式同 wx.createCanvasContext。

Taro.createContext(不推薦使用)

創建並返回繪圖上下文。

Taro.drawCanvas(不推薦使用)

使用方式同 wx.drawCanvas。

API	微信小程序	H5	ReactNative
Taro.createCanvasContext	✔️
Taro.createContext	✔️
Taro.drawCanvas	✔️

下拉刷新

Taro.startPullDownRefresh(OBJECT)

使用方式同 wx.startPullDownRefresh，支持 Promise 化使用。

示例代碼：

import Taro from '@tarojs/taro'
Taro.startPullDownRefresh(params).then(...)

Taro.stopPullDownRefresh()

停止當前頁面下拉刷新。

示例代碼：

import Taro from '@tarojs/taro'
Taro.stopPullDownRefresh()

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 AsyncTask的缺陷和注意事項 minio 注意事項 currentRowChanged 的注意事項 FiddlerCore注意事項 onReachBottom 注意事項 mysqldump 使用及其注意事項 bootstrap注意事項（五）表單 uniapp開發注意事項 vundle安裝注意事項 SqlBulkCopy使用注意事項