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