Taro React小程序开发框架总结

news2024/11/30 8:36:29

一、安装

二、目录结构

三、创建一个自定义页面

四、路由

1、API

2、传参

3、获取路由参数

4、设置TabBar

五、组件

六、API

Taro非常好用的小程序框架，React开发者无缝衔接上。

一、安装

官方文档：Taro 文档

注意，项目创建好以后记得初始化一下。

运行以下命令后，项目会构建对应的项目包。这里并不会直接打开微信开发者工具这些，需要手动导入。

打开开发者工具，点击导入，选择对应的taro项目目录即可，其他开发者工具类似：

你会在开发者工具中看到项目原本的效果：此时，代表项目编译成功。

二、目录结构

官方文档：Taro 文档

三、创建一个自定义页面

1、配置app.config.ts: 配置到第一项会成为首页。

2、在src/pages目录下创建你的页面：

我的案例代码：

/**
 * @author Dragon Wu
 * @since 2024/11/25 19:02
 */
import React, {useState} from 'react';
import {View, Text, Button} from "@tarojs/components";

function Custom() {
  const [data, setData] = useState("Hello world")
  const repeat = () => {
    setData(prev => prev + "Hello world")
  }

  return (
    <View>
      <Text>{data}</Text>
      <Button onClick={repeat}>点我</Button>
    </View>
  );
}

export default Custom;

编译成功，小程序效果：

另外，官方还提供了一些小程序的hook:

官方文档：Taro 文档

import React, { useEffect } from 'react'
import { View } from '@tarojs/components'
import { useReady, useDidShow, useDidHide, usePullDownRefresh } from '@tarojs/taro'

function Index() {
// 可以使用所有的 React Hooks
useEffect(() => {})

// 对应 onReady
useReady(() => {})

// 对应 onShow
useDidShow(() => {})

// 对应 onHide
useDidHide(() => {})

// Taro 对所有小程序页面生命周期都实现了对应的自定义 React Hooks 进行支持
// 详情可查阅：【Hooks】
usePullDownRefresh(() => {})

return <View className="index" />
}

export default Index

四、路由

官方文档：Taro 文档

1、API

官方文档：Taro 文档

// 跳转到目的页面，打开新页面
Taro.navigateTo({
  url: '/pages/page/path/name',
})

// 跳转到目的页面，在当前页面打开
Taro.redirectTo({
  url: '/pages/page/path/name',
})

2、传参

// 传入参数 id=2&type=test
Taro.navigateTo({
  url: '/pages/page/path/name?id=2&type=test',
})

3、获取路由参数

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

class Index extends Component {
  // 建议在页面初始化时把 getCurrentInstance() 的结果保存下来供后面使用，
  // 而不是频繁地调用此 API
  $instance = getCurrentInstance()

  componentDidMount() {
    // 获取路由参数
    console.log(this.$instance.router.params) // 输出 { id: 2, type: 'test' }
  }

  render() {
    return <View className="index" />
  }
}

export default Index

4、设置TabBar

属性列表：Taro 文档

参考文档：Taro 文档

找到app.config.ts，配置TabBar属性即可：

我这里的图片放在src/assets目录下

export default defineAppConfig({
  pages: [
    "pages/custom/index", //第一项会显示为首页
    'pages/index/index',
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'black'
  },
  tabBar: {
    color: '#000',
    selectedColor: '#56abe4',
    backgroundColor: '#fff',
    borderStyle: 'white',
    list: [
      {
        pagePath: 'pages/custom/index',
        selectedIconPath: 'assets/home.png',
        iconPath: 'assets/home.png',
        text: '页面1',
      },
      {
        pagePath: 'pages/index/index',
        selectedIconPath: 'assets/Self.png',
        iconPath: 'assets/Self.png',
        text: '页面2',
      },
    ],
  }
})

效果：一般在设置图标时，会设置两种不同状态的图标。