2. 程式人生 > >taro框架的缺陷以及注意事項

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

阿新 • • 發佈：2018-12-07

https://www.jianshu.com/p/9d3318f7f219

1.不要使用 eval()

2.

禁止使用 Object 構造器

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

 

3.

不使用 Generator 函式語法

使用 Promise 或者 async functions 來實現非同步程式設計

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

4.

SX 屬性均使用單引號

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>
    )
  }
}

5.

推薦使用物件解構的方式來使用 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>
    )
  }
}

6.

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

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

7.

不要在呼叫 this.setState 時使用 this.state

由於 this.setState 非同步的緣故，這樣的做法會導致一些錯誤，可以通過給 this.setState 傳入函式來避免

this.setState({
  value: this.state.value + 1
})   // ✗ 錯誤


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

8.

map 迴圈時請給元素加上 key 屬性

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

9.

儘量避免在 componentDidMount 中呼叫 this.setState

因為在 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)} />

 

18

不能在 JSX 引數中使用物件展開符

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

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

<View {...props} />

<Custom {...props} />

 

19

不支援無狀態元件

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

function Test () {
  return <View />
}

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

const Test = () => {
  return <View />
}

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

 

20

微信小程式中 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' }
  }
}

23

在 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 // 設定轉換尺寸上限
  }
}

25

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> 

27

使用 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 的相關文件。

28

setState非同步

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

 

 

29

在 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>
    )
  }
}

30

向事件處理程式傳遞引數

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

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

31

當你通過 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>
  }
}

32

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

33

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>
    )
  }
}

35

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' /> } } 

37

利用 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;
}

38

全域性樣式類

使用外部樣式類可以讓元件使用指定的元件外樣式類，如果希望元件外樣式類能夠完全影響元件內部，可以將元件構造器中的 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;
}

 

39

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

40

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

 

41

在微信小程式中，從呼叫 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
    ...
  }
}

 

42

預載入

在微信小程式中，從呼叫 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
    ...
  }
}

 

 

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 支援度

API 微信小程式 H5 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 支援度

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 支援度

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

導航

Taro.navigateTo(OBJECT)

使用方式同 wx.navigateTo，支援 Promise 化使用。

示例程式碼：

import Taro from '@tarojs/taro'

Taro.navigateTo(params).then(...)

Taro.redirectTo(OBJECT)

使用方式同 wx.redirectTo，支援 Promise 化使用。

示例程式碼：

import Taro from '@tarojs/taro'

Taro.redirectTo(params).then(...)

Taro.switchTab(OBJECT)

使用方式同 wx.switchTab，支援 Promise 化使用。

示例程式碼：

import Taro from '@tarojs/taro'

Taro.switchTab(params).then(...)

Taro.navigateBack(OBJECT)

使用方式同 wx.navigateBack。

示例程式碼：

import Taro from '@tarojs/taro'

Taro.navigateBack({ delta: 2 })

Taro.reLaunch(OBJECT)

使用方式同 wx.reLaunch，支援 Promise 化使用。

示例程式碼：

import Taro from '@tarojs/taro'

Taro.reLaunch(params).then(...)

Taro.getCurrentPages(OBJECT)

使用方式同 getCurrentPages， 獲取當前的頁面棧，決定需要返回幾層。

示例程式碼：

import Taro from '@tarojs/taro'

Taro.getCurrentPages().length

API 支援度

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 支援度

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

位置

Taro.pageScrollTo(OBJECT)

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

示例程式碼：

import Taro from '@tarojs/taro'

Taro.pageScrollTo(params).then(...)

API 支援度

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

繪圖

Taro.createCanvasContext(canvasId, this.$scope)

使用方式同 wx.createCanvasContext。

Taro.createContext(不推薦使用)

建立並返回繪圖上下文。

Taro.drawCanvas(不推薦使用)

使用方式同 wx.drawCanvas。

API 支援度

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()
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

相關推薦

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

https://www.jianshu.com/p/9d3318f7f219 1.不要使用 eval() 2. 禁止使用 Object 構造器 let config = new Object() // ✗ 錯誤   3. 不使用 Generator 函式語法

鎖的優化以及注意事項

1.減少鎖持有的時間。 只在有必要時進行同步。 2.減少鎖的粒度 分割資料結構 concurrentHashMap對應不同的區段segment進行加鎖，減少鎖鎖定的範圍。 concurrentHashMap 首先使用無鎖的方式求和。如果失敗了那麼就使用加鎖的方式求和。（先獲取所有

socket程式設計UDP協議以及注意事項

//伺服器 #include <stdlib.h> #include <stdio.h> #include <errno.h> #include <string.h> #include <unistd.h> #include <

列隊題解以及注意事項

一道十分interesting的題目 這道題顯然要使用資料結構維護。但是n的規模十分大。我們便可以開n棵線段樹，動態開點。但是最後一列比較特殊，所以我們再開一棵線段樹維護最後一列。至於怎麼操作？我們考慮權值線段樹。權值線段樹一般是維護：權值為[L,r]的數有多少是滿足某種條件的。本道題目中我們維護區間[L，

Tomcat下載以及安裝、eclipse工具配置tomcat9的具體步驟以及注意事項！！！

      （小白經驗，大咖勿噴） 開始學前端的一些技術了，最讓人頭疼的就是環境的配置以及必要軟體的安裝，比如資料庫mysql、伺服器Tomcat、eclipse工具等等。  自己也度娘了很多大咖的經驗，但看到的教程以及經驗都很久了，我下載安裝的又是最新版

JS中setInterval()和clearInterval()的使用以及注意事項 （實用，贊）

原文出處：https://blog.csdn.net/YDesire/article/details/81124331 延伸閱讀：clearInterval(timer)和timer = null的區別 setInterval()： 間隔指定的毫秒數不停地執行指定的程式碼，定時器 clear

微服務架構組成以及注意事項

（一）、架構分解 閘道器叢集：資料的聚合、實現對接入客戶端的身份認證、防報文重放與防資料篡改、功能呼叫的業務鑑權、響應資料的脫敏、流量與併發控制等 業務叢集：一般情況下移動端訪問和瀏覽器訪問的閘道器需要隔離，防止業務耦合 Local Cache：由於客戶端訪問業務可能需要呼叫多個服務聚合，所以本地快

JUnit4測試類使用，以及注意事項

 專案的目錄配置檔案：  建立測試類： import org.activiti.engine.*; import org.activiti.engine.identity.User; import org.activiti.engine.impl.persiste

Android NDK中socket的用法以及注意事項分析

Android NDK中使用socket的整個過程分為以下幾部分：第一部分: 建立socket並繫結IP和埠 複製程式碼程式碼如下: #include <sys/select.h> #include <sys/socket.h> #include <arpa/

如何啟動單節點zookeeper以及注意事項

1、安裝jdk，因為zookeeper是基於java進行開發的； 2、將zookeeper解壓之後，再zookeeper目錄下conf目錄下有一個zoo_sample.cfg，將它改名成zoo.cfg，因為zookeeper啟動時自動載入的是zoo.cfg檔案； 3、安裝單機版本只需要更改z

SWIFT4.0學習01 - 函式的命名、呼叫以及注意事項

swift語法中函式的使用大概分為以下幾種: swift中函式的命名格式 無返回值函式 有引數有返回值的函式 多個返回值的函式 如何定義外部引數名 如何忽略引數名 如何給引數設定預設值 如何定義可變引數 修改外部引數的值,Inout關鍵字的使用 函式的型別 函式

docker命令以及注意事項

docker #檢視docker執行程序 docker ps #檢視docker的所有服務 docker ps -a #docker下載映象 docker pull centos #預設為最新的版本 #docker檢視映象 docker image #docker刪除 docker rmi im

初次使用Mybatis的理解以及注意事項

原生的開發模式 　　使用原生模式開發的時候，通常是這個過程： 　　1、通常會建立實體類，每一個實體類對應一張表。 　　2、為一個實體類建立一個dao的介面 　　3、建立一個實現dao介面的實現類 　　4、建立一個處理業務邏輯service介面 　　5、建立一個類，用來實現service介面。 　

Android筆記----listview顯示原理以及注意事項

 listview顯示原理 (瞭解)     1.要考慮listview顯示的條目數    getcount     2.考慮listview每個條目顯示的內容   getview     3.考慮每個item的高度，因為螢幕的多樣化     4.還要考慮listvie

Android 混合開發以及注意事項以及h5上圖片在android機器上不顯示問題

因為這個app地嵌入h5做導航，所以需要呼叫android的互動進行獲取定位資訊和其他一些功能，做的效果是H5調Android打電話以及呼叫android手機相簿選擇圖片，現在總結下： 一.打電話以及定位: 1.定義h5呼叫的名稱: webView.addJavascriptInt

rac相關命令以及注意事項

重啟HAS: crsctl stop has -f crsctl start has crsctl start cluster crs_stat -t 資料庫中檢視兩節點叢集資訊： show parameter cluster 檢視記憶體相關大小 show sppar

Java筆記：成員變數，區域性變數，類變數，例項變數以及注意事項

區域性變數：方法中定義的變數。 成員變數（類似C中的全域性變數）：成員變數定義在方法體和語句塊之外。成員變數就概括描述了類中的變數，不區分static。是以下變數的統稱。 類變數（靜態變數）：獨立於方法之外的變數，屬於類本身。需要static修飾，事實上，類變數就是以static修飾的獨立於方法之外的成員

FPGA nios編寫LCD12864的驅動程式過程以及注意事項，本人親自踩坑，重要！！！

LCD12864引腳如下： FPGA開發板得提供，3.3v電壓，5v電壓，普通io都是3.3v電壓 DB：資料腳，得用雙向io,因為程式裡面需要讀取液晶的應答（普通io3.3v可以） E: 輸出引

程式設計師找工作的個人經驗教訓以及注意事項

也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！                                                                                                

便於計算的rem使用方法，以及注意事項

一、相容性。 目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支援了rem（大膽用吧，目前幾乎所有手機瀏覽器都支援rem） 二、什麼是rem。 rem是相對於根元素html字型大小來計算的，即( 1rem = html字型大小 )