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 (
Child.props:{props.userName}
)
}
//导出组件
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 (
{msg}
{userName}
)
}路由
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 '图片地址'
//在后续函数中，使用路由跳转
路由跳转
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'})
}
//在按钮中使用路由跳转函数
【运算符】
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')
})