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='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>