目录
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 Index4、设置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',
},
],
}
})
效果：一般在设置图标时，会设置两种不同状态的图标。
五、组件
Taro的组件库大多和小程序相同。
官方文档：Taro 文档
六、API
Taro的API总体和小程序一致。
官方文档：Taro 文档
总结到此！