Taro 介绍

燃烧的冰2022-06-19  2.8K+

Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用。 现如今市面上端的形态多种多样,Web、React Native、微信小程序等各种端大行其道。

 

当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

 

Taro 3 可以支持转换到 H5、ReactNative 以及任意小程序平台。

目前官方支持转换的平台如下:

  • H5 ReactNative
  • 微信小程序
  • 京东小程序
  • 百度小程序
  • 支付宝小程序
  • 字节跳动小程序
  • QQ 小程序
  • 钉钉小程序
  • 企业微信小程序
  • 支付宝 IOT 小程序
  • 飞书小程序 

在 Taro 3 中可以使用完整的 React / Vue / Vue3 / Nerv 开发体验

 

示例代码(1)class 继承的形式

import React, { Component } from 'react'
import { View, Text } from '@tarojs/components'

export default class Index extends Component {
  state = {
    msg: 'Hello World!'
  }

  config = {
    navigationBarTitleText: '首页',
  }

  componentWillMount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    return (
      <View className='index'>
        <Text>{this.state.msg}</Text>
      </View>
    )
  }
}

示例代码(2)function 形式,React 讲究万物皆组件,两种方式根据自己喜好。wellcms 小程序使用的是这种方式。

Hook 这个单词的意思是"钩子"。

React Hooks 的意思是,组件尽量写成纯函数,如果需要外部功能和副作用,就用钩子把外部代码"钩"进来。 React Hooks 就是那些钩子。 

useState()用于为函数组件引入状态(state)。纯函数不能有状态,所以把状态放在钩子里面。

  1. useState()中的参数就是定义变量的初始值
  2. useState()返回的是一个数组,数组的第一个值为变量,就是上面实例中的pageTitle;第二个值是一个来更新这个pageTitle变量的方法(方法名为:set+变量名,例如上面实例中的setPageTitle) 
import {useState, useEffect} from 'react';
import Taro from '@tarojs/taro';
import {View, Text} from '@tarojs/components';
import './index.scss';

export default function Index() {

  const [pageTitle, setPageTitle] = useState('Hello World!');
  //const pageTitle = 'Hello World';

  Taro.setNavigationBarTitle({
    title: '首页'
  });

  return (
    <View className='index'>
      <Text>{pageTitle}</Text>
    </View>
  )
}

快速在IDE创建页面

Taro create --name 页面名称
转载请注明原文地址:http://www.wellcms.cn/read-262.html
3