Taro React 使用總結

Taro 是一個開放式跨端跨框架解決方案，支持使用 React/Vue/Nerv 等框架來開發 微信 / 京東 / 百度 / 支付寶 / 字節跳動 / QQ 小程序 / H5 等應用。現如今市面上端的形態多種多樣，Web、React Native、微信小程序等各種端大行其道，當業務要求同時在不同的端都要求有所表現的時候，針對不同的端去編寫多套代碼的成本顯然非常高，這時候只編寫一套代碼就能夠適配到多端的能力就顯得極為需要。

在 Taro 中使用 React，入口組件必須導出一個 React 組件。在入口組件中我們可以設置全局狀態或訪問小程序入口實例的生命周期

import React, { Component } from 'react'

// 假設我們要使用 Redux
import { Provider } from 'react-redux'
import configStore from './store'

// 全局樣式
import './app.css'

const store = configStore()

class App extends Component {
  // 可以使用所有的 React 組件方法
  componentDidMount () {}

  // 對應 onLaunch
  onLaunch () {}

  // 對應 onShow
  componentDidShow () {}

  // 對應 onHide
  componentDidHide () {}

  render () {
    // 在入口組件不會渲染任何內容，但我們可以在這里做類似於狀態管理的事情
    return (
      <Provider store={store}>
        /* this.props.children 是將要被渲染的頁面 */
        {this.props.children}
      </Provider>
    )
  }
}

export default App

Taro 3.x 以后版本 Taro路由傳參無法使用this.$router.params獲取參數

具體用法

import Taro, {getCurrentInstance} from '@tarojs/taro'

在用的地方

let { id } = getCurrentInstance().router.params

這樣就可以用到了

taro Image組件引入圖片的方式

1、ES6 圖片引入圖片

import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'

2、網絡圖片

<Image style='width:300px;height:100px;background: #fff;' src='https://storage.360buyimg.com/mtd/home/111543234387022.jpg'/>

3、本地資源圖片

<Image className="unit-info-tax-tip" src={require('../../../../images/icon_03.png')} />

4、行內樣式 要用``把url()里面的內容引起來

<View style={{ background: `url(${ require('@/assets/img/demo.png') })` }}></View>