前端Taro框架开发

千锋教育_前端Taro框架开发教程视频（错过后悔一年）

https://www.bilibili.com/video/BV1W7411v7LU

P1 千锋web前端教程：第01集-taro框架介绍

taro 剃喔 / ˈtɛroʊ

京东凹凸实验室 打造一款 Taro框架有了taro可以提升开发效率，又可以使得技术栈得以统一节约资源的同时，又让开发简洁有效

Taro框架特点
遵循react的语法规范，可以用jsx语法规范开发小程序的应用
支持组件化开发
支持TypeScript语言开发
很强的开发体验，开发流程自动化，顺畅、快捷

P2千锋web前端教程：第02集-taro简介与项目创建

Taro是一套遵循React语法规范的 多端开发 解决方案使用Taro，只需要书写一套代码，在通过Taro的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、RN等）运行的代码。

安装Taro开发工具@tarojs/cli
使用npm或者yarn全局安装，或者直接使用npx
npm install -g @tarojs/cli
yarn global add @tarojs/cli

https://docs.taro.zone/docs/GETTING-STARTED

使用命令创建模板
taro init myApp

npm run dev:h5 WEB
npm run dev:weapp 微信小程序
npm run dev:alipay 支付宝小城
npm run dev:swan 百度小程序
npm run dev:rn ReactNative

Taro v3.6.32 支持vue react 鸿蒙

---

P3千锋web前端教程：第03集-taro项目目录介绍

---

P4千锋web前端教程：第04集-生命周期与state

状态更新一定是异步的
同React一致，更新数据必须调用setState方法，若直接赋值是不会更新组件

import React from 'react'
import Taro , { Component } from '@tarojs/taro';
import { View, Text , Button} from '@tarojs/components';

export default class Index extends React.Component {

   config = {
       navigationBarTitleText: ''
  }

  state={}

  componentWillMount () {}
  componentDidMount () {} 
  componentWillReceiveProps (nextProps,nextContext) {} 
  componentWillUnmount () {} 
  componentDidShow () {} //react里面这个钩子函数是不存在
  componentDidHide () {} //react里面这个钩子函数是不存在
  componentDidCatchError () {} 
  componentDidNotFound () {} 
  render() {
    return (
      <View>
        <Text>hello taro!!</Text>
      </View>
    );
  }
}

2.x 还是类组件 可以这些生命周期 https://juejin.cn/post/6968696518769377317

三、Taro中的生命周期

生命周期	描述	可用位置
onLaunch	在小程序环境中对应 app 的 onLaunch	入口组件
componentDidShow	程序/页面，启动或切前台时触发。在小程序环境中对应页面的 onShow。	入口组件、页面组件
onShow	页面，启动或切前台时触发。	页面组件
componentDidHide	程序/页面，切后台或隐藏时触发；在小程序环境中对应页面的 onHide。	入口组件、页面组件
onHide	页面，隐藏或切后台时触发。	页面组件
onLoad	在小程序环境中对应页面的 onLoad	页面组件
onReady	在小程序环境中对应页面的 onReady	页面组件
componentWillMount	页面将要挂载时触发	入口组件、页面组件
componentDidMount	页面挂载时触发	入口组件、页面组件
shouldComponentUpdate	页面props/state修改时触发，应返回boolean类型，决定是否触发页面重新render	入口组件、页面组件
componentDidUpdate	页面重新render后触发	入口组件、页面组件
componentWillUnMount	页面将要卸载时触发	入口组件、页面组件

可以看到，Taro中的生命周期，包含了小程序和React的生命周期。

生命周期 api https://docs.taro.zone/docs/test-utils/life-cycle/

https://www.cnblogs.com/Ewarm/p/13405617.html

P5千锋web前端教程：第05集-props属性讲解

https://docs.taro.zone/docs/apis/taro.hooks/useLoad

useLoad

onload

react生命周期

P6 千锋web前端教程：第06集-taro路由配置与传参

Taro中路由功能是自带的，不需要开发者进行额外的路由配置这里相当于通过小程序的配置适配了小程序与H5的路由问题Taro默认根据配置路径生成了Route我们只需要在入口文件的config配置中指定好pages，就可以在代码中通过Taro提供的API来跳转到目的页面了

switchTab
reLaunch
redirectTo
Taro.navigateTo
navigateBack

快捷键 tarocc

P7千锋web前端教程：第07集-资源文件处理

在Taro中可以像在webpack那样自由的引用静态资源，而且不需要安装任何的loader可以直接通过import语法去引用样式文件图片引入必须要通过import方式进行引入

import { View, Text,Image } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
import './index.scss'
import img from '../../img/1.jpg'

export default function Index() {

  useLoad(() => {
    console.log('Page loaded.')
  })

  return (
    <View className='index'>
      <Text>Hello taro!</Text>
      <Image src={require('../../img/1.jpg')}></Image>
      <Image src={img}></Image>
    </View>
  )
}

.index{
    img{
        // margin-top: 50px; //小写px 转rem
        margin-top: 50PX; //大写px 不转
    }
}

P8 千锋web前端教程：第08集-条件列表渲染与Child..
P9千锋web前端教程：第09集-事件处理与运行时环境
P10千锋web前端教程：第10集-问答模块案例01

Taro.getStorageSync

Taro. setStorageSync(key, str)

P11 千锋web前端教程：第11集-问答模块案例022
P12千锋web前端教程：第12集-问答模块案例031
P13千锋web前端教程：第13集-问答模块案例041
P14 千锋web前端教程：第14集-问答模块...1