Taro React小程序开发框架 总结

目录

一、安装

二、目录结构

三、创建一个自定义页面

四、路由

1、API

2、传参

3、获取路由参数

4、设置TabBar

五、组件

六、API


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

一、安装

官方文档:Taro 文档

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

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

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

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

二、目录结构

官方文档:Taro 文档

三、创建一个自定义页面

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

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

我的案例代码:

javascript 复制代码
/**
 * @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 文档

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

// 跳转到目的页面,在当前页面打开
Taro.redirectTo({
  url: '/pages/page/path/name',
})
2、传参
javascript 复制代码
// 传入参数 id=2&type=test
Taro.navigateTo({
  url: '/pages/page/path/name?id=2&type=test',
})
3、获取路由参数
javascript 复制代码
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目录下

javascript 复制代码
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 文档

总结到此!

相关推荐
天农学子10 分钟前
elementui el-input修改字体样式
前端·javascript·css·elementui
布兰妮甜1 小时前
Zustand:一个轻量级的React状态管理库
前端·react.js·zustand
Beekeeper&&P...1 小时前
@RequestBody和前端的关系以及,如何在前后端之间传递数据?
java·前端
那就可爱多一点点2 小时前
在 Taro 中实现系统主题适配:亮/暗模式
taro
h周杰偷2 小时前
vue 预览pdf 【@sunsetglow/vue-pdf-viewer】开箱即用,无需开发
前端·vue.js·pdf
小孙姐2 小时前
3——VUE侦听器和计算属性
前端·javascript·vue.js
bin91533 小时前
【热门主题】000067 React前端框架:探索高效Web开发之路
前端框架
nbsaas-boot3 小时前
消息队列场景下的前端设计:如何优化用户体验
前端·ux
sususugaa3 小时前
前端框架Vue3——响应式数据,v-on,v-show和v-if,v-for,v-bind
开发语言·前端·vue.js·前端框架