Taro React小程序开发框架总结

一、安装

二、目录结构

三、创建一个自定义页面

四、路由

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',},],}
})

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