Taro基础知识学习

一、安装及使用

CLI工具安装

需要使用 npm 或者 yarn 全局安装 @tarojs/cli

复制代码
//使用 npm 安装 CLI
npm install -g @tarojs/cli

//使用 yarn 安装 CLI
yarn global add @tarojs/cli

//使用 cnpm 安装 CLI
cnpm install -g @tarojs/cli

//使用npm info查看Taro的版本信息
npm info @tarojs/cli

初始化项目

复制代码
taro init 【项目名】

安装依赖

复制代码
//进入项目所在文件夹
cd [项目名]

//使用 yarn 安装依赖
yarn

//使用 npm 安装依赖
npm install

//使用 pnpm 安装依赖
pnpm install

在微信小程序端运行程序

复制代码
//使用yarn
yarn dev:weapp

//使用npm
npm run dev:weapp

项目目录

├── dist 编译结果目录

├── config 配置目录

├── dev.js 开发时配置

├── index.js 默认配置

└── prod.js 打包时配置

├── src 源码目录

├── pages 页面文件目录

├── index index页面目录

├── index.js index页面逻辑

└── index.css index页面样式

├── app.css 项目总通用样式

└── app.js 项目入口文件

└── package.json 项目配置文件

└──.editorconfig 编辑器格式化

└──.eslintrc Eslint配置

└──.gitignore 配置不上传的文件,不进行版本管理

└──yarn.lock 锁定版本

二、配置页面路由

在【app.config.ts】中配置页面路由

复制代码
export default defineAppConfig({
  pages: [
    //新加入的页面
    'pages/hhx/index',
    'pages/index/index',

  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'black'
  }
})

【子组件的编写与传值】

新建页面【children.jsx】

复制代码
import { View, Text } from '@tarojs/components'

function Child(props) {         //props参数接收父组件传递过来的数据
    return (
        <View>
            <Text>Child.props:{props.userName}</Text>
        </View>
    )
}

//导出组件
export default Child

在父组件中引入,即可使用子组件【index.jsx】

复制代码
import React, { useState } from 'react'
import { View, Text } from '@tarojs/components'
import { useLoad, } from '@tarojs/taro'
import Child from './children'
import './index.less'

export default function Index () {
  useLoad(() => {
    console.log('Page loaded.')
  })

  const msg = '早安,世界!'

  const [ userName ] = useState('hhx')

  return (
    <View className='index'>
      <Text> {msg} </Text>
      <Child />
      <Text> {userName} </Text>
      <Child userName={userName} />
    </View>
  )
}

路由

taro的路由是写在【app.config.js】/【app.config.ts】

复制代码
export default defineAppConfig({
  pages: [                                                        // 页面路由
    'pages/index/index',
    'pages/order/order',
  ],
  window: {                                                       // 窗口
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: '订单',
    navigationBarTextStyle: 'black'
  },
  tabBar: {                                                       // 底部导航栏
    color: '#999',
    selectedColor: '#333',
    backgroundColor: '#fff',
    borderStyle: 'white',
    list: [
      {
        pagePath: 'pages/index/index',                             // 页面路径
        text: '首页',                                              // 文字
        iconPath: 'assets/images/index-unselected.png',            // 未选中图标
        selectedIconPath: 'assets/images/index-selected.png'       // 选中图标
      },
      {
        pagePath: 'pages/order/order',
        text: '订单',
        iconPath: 'assets/images/order-unselected.png',
        selectedIconPath: 'assets/images/order-selected.png'
      }
    ] 
  }
})

静态资源引入

【工具的引入】

复制代码
//写工具函数
export function print1(){
    console.log('这是个打印机!')
}

export function print2(){
    console.log('这是个复读机!')
}

在页面中引用工具

复制代码
import { print1, print2 } from '../../Tools'

//这里工具是函数,需要用{}进行包裹,不是组件,组件不需要{}包裹

【图片的引入】

复制代码
//先定义后续要使用的图片的名字,因为后续编译之后,图片的路径会发生变化,所以后续使用图片要用图片的名字

import {Image} from '@tarojs/components'
import 【图片名】 from '图片地址'

//在后续函数中,使用<Image />标签进行使用
<Image src={图片名} />

路由跳转

路由跳转

naviagateTo('pages/blogs/blogs') 小程序、h5、react-nactive都支持的跳转方式

redirectTo('pages/blogs/blogs') 不记录上一页,支持三端

switchTab('pages/blogs/blogs') 支持三端,要使用switchTab跳转,需要在app.json

中配置tabBar

navigateBack() 返回上一页,支持三端

reLaunch('pages/blogs/blogs') 关闭当前页面,重新打开一个新页面,支持三端

getCurrentPages() 获取当前页面栈,可以用于页面返回,不支持H5

具体实践

复制代码
//定义路由跳转函数

const goIndex1 = () => {
        Taro.navigateTo({ url: '/pages/index/index'})
}

//在按钮中使用路由跳转函数

<Button onClick={goIndex1}>返回首页</Button>

【运算符】

taro中不支持if else语句,需要使用三元运算符、短路运算符进行替代

三元运算符

{变量===条件?值1:值2}

短路运算符

{变量===条件 && 值1 || 值2}

【Taro Hooks】

在 Taro 中使用 Hooks API 很简单,Taro 的专有 Hooks(例如 usePageScroll, useReachBottom)从 @tarojs/taro 中引入,框架自己的 Hooks (例如 useEffect, useState)从对应的框架引入

复制代码
import { usePageScroll, useReachBottom } from '@tarojs/taro' // Taro 专有 Hooks
import { useState, useEffect } from 'react' // 框架 Hooks (基础 Hooks)

//onLaunch 生命周期钩子 等同于 App的入口

useLaunch(() => {
  console.log('onLaunch')
})

//等同于页面的 onUnload 生命周期钩子

useUnload(() => {
  console.log('onUnload')
})
相关推荐
future141213 分钟前
C#学习日记
开发语言·学习·c#
DIY机器人工房37 分钟前
0.96寸OLED显示屏 江协科技学习笔记(36个知识点)
笔记·科技·stm32·单片机·嵌入式硬件·学习·江协科技
我是小哪吒2.03 小时前
书籍推荐-《对抗机器学习:攻击面、防御机制与人工智能中的学习理论》
人工智能·深度学习·学习·机器学习·ai·语言模型·大模型
✎ ﹏梦醒͜ღ҉繁华落℘3 小时前
WPF学习(四)
学习·wpf
✎ ﹏梦醒͜ღ҉繁华落℘3 小时前
WPF学习(动画)
学习·wpf
循环过三天4 小时前
3-1 PID算法改进(积分部分)
笔记·stm32·单片机·学习·算法·pid
生如夏花℡4 小时前
HarmonyOS学习记录3
学习·ubuntu·harmonyos
之歆4 小时前
Python-封装和解构-set及操作-字典及操作-解析式生成器-内建函数迭代器-学习笔记
笔记·python·学习
幽络源小助理5 小时前
SpringBoot基于JavaWeb的城乡居民基本医疗信息管理系统
java·spring boot·学习
虾球xz6 小时前
CppCon 2018 学习:EFFECTIVE REPLACEMENT OF DYNAMIC POLYMORPHISM WITH std::variant
开发语言·c++·学习