taro学习笔记（⼀）---taro⼊门
1、介绍
taro是⼀套遵循React语法规范的多端开发解决⽅案，实现只书写⼀套代码，通过Taro的编译⼯具，将源代码分别编译出可以在不同端（⼩程序， h5，RN等）运⾏的代码
2、安装
安装taro的脚⼿架⼯具
npm install -g @tarojs/cli
//创建app项⽬
taro init myApp
//启动项⽬
npm run dev:h5          //h5
npm run dev:weapp    //⼩程序
npm run dev:alipay    //⽀付宝⼩程序
npm run dev:swan      //百度⼩程序
npm run dev:rn        //reactNative
注意：如果是编译那么就直接把dev变成build即可
在开发⼩程序的过程中，需要调⽤开发⼯具，那么步骤是
a、先运⾏npm run dev:weapp
b、打开⼩程序开发⼯具
c、添加项⽬，注意导⼊的时候，只需要导⼊项⽬中的dist⽂件夹就可以了，因为⼩程序只认编译后的内容
d、判断当前的运⾏环境  v.TARO_ENV
3、taro项⽬⽂件结构
注意：在项⽬下还有⼀个⽂件fig.json⽂件，这个⽂件主要⽤于配置⼩程序的配置，并且该⽂件⾥的appid是体现当前的appid
在⼩程序中是区别页⾯与组件的，fig.ts是配置路由的，凡是配置到fig.ts中的均为页⾯，否则为组件，主要在
4、taro的⽣命周期函数
taro结合了⼩程序与react两者的⽣命周期函数，具体见官⽹，并且针对函数式编程做了⼀定的兼容
import React, { useEffect } from 'react'
import { View } from '@tarojs/components'
import {
useReady,
useDidShow,
useDidHide,
usePullDownRefresh
} from '@tarojs/taro'
function Index () {react native
/
/ 可以使⽤所有的 React Hooks
useEffect(() => {})
// 对应 onReady
useReady(() => {})
// 对应 onShow
useDidShow(() => {})
// 对应 onHide
useDidHide(() => {})
// Taro 对所有⼩程序页⾯⽣命周期都实现了对应的⾃定义 React Hooks 进⾏⽀持
// 详情可查阅：【Taro ⽂档】-> 【进阶指南】->【Hooks】
usePullDownRefresh(() => {})
return (
<View className='index' />
)
}
export default Index
注意：对于获取路由信息
import { View, Text } from '@tarojs/components'
import {useEffect} from 'react'
import {useReady, getCurrentInstance} from '@tarojs/taro'
import './index.less'
const App: React.FC = () => {
useEffect(() => {
console.log('effect')
}, [])
useReady(() => {
console.log('ready')
console.log(getCurrentInstance()) //获取路由信息
})
return <View>
<Text>today is good day</Text>
</View>
}
5、taro的路由功能
在taro中，路由功能是默认⾃带的，不需要开发者进⾏额外的配置，这⾥相当于通过⼩程序的配置适配了⼩程序与h5的路由问题， taro默认根据配置路径⽣成了Route，我们只需要在⼊⼝⽂件的config配置中指定好pages，然后就可以在代码中通过taro提供的API来跳转页⾯的⽬的。
在fig.ts⽂件中，⾸页相当于pages⾥的第⼀项，如果需要设置⾸页就需要放到第⼀项中
在路由跳转的过程中
页⾯之间的传参采⽤以下的⽅式进⾏传参
Taro.navigateTo({
url: '/pages/page/path/name?id=2&type=test'
})
/
/接收参数
getCurrentInstance().router.params
注意：Taro这个对象是从@tarojs/taro中获取的  import Taro, {useReady, getCurrentInstance} from '@tarojs/taro'
6、taro中样式的写法
在taro中，⼀个组件或者页⾯配置⼀个css/less/scss⽂件，⽤于定义对应模块的样式，但是在进⾏样式编写的时候要注意，如果⼤⼩以px结尾，那么就被编译成rem，所以如果需要写成指定的px那么就需要⽤PX来替代，同时也可以⽤⼩程序的rpx进⾏编写，样式编写尽量⽤flex的布局⽅式，为了适配多端尽量不要⽤⼩程序的单位rpx
在taro中为了实现模块化，引⼊的样式⽂件只对当前组件有效
7、taro中图标字体的引⼊
在taro中除了使⽤taro-ui中系统预定好的字体，同时可以引⼊字体库，具体的引⼊⽅式参见官⽅⽂档，但是有⼀个注意点，按照官⽅的写法完成后，是⽆法看到效果的，如果有⽤到指定的图标，那么需要对⼀些字体的类需要定义
  ⾸先到官⽹中对应的图标类⾥的:before⾥的content属性
  把对应的content属性写⼊icon.less指定的样式中如下图.fa-caret-down:before {
content: "\f0d7";
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。