taro使用教程（详细版）

taro使用教程（详细版）
Taro框架的简介和开篇介绍

Taro是由京东凹凸实验室推出的框架，目的就是解决多端混乱的局面，也是当下比较新兴的一个框架。
当我们按照一种模式一种代码进行开发，开发完成后，项目就有了在任何终端显示的能力，这是一种想想都很爽的。那具体Taro有那些优点，请看下面的图片。

目前Taro支持的终端
- 微信小程序
- H5 移动端Web页面
- 百度小程序
- 支付宝小程序
- 快应用
- ReactNative
- 字节跳动小程序
- QQ轻应用
  是目前支持小程序最多的前端框架，并且支持ReactNatvie，说明我们可以轻易的生成媲美原生的APP应用。所以公司的应用如果想全网推广，占用最多的流量入口的话，使用Taro就完全没有问题。
  有熟悉uni的同学会讲uni也有这样类似的功能，生成多端应用的功能，而且还有专属的编辑器，调试很方便，下边就放一个taro与uni-app以及其他例如mpvue等的对比图
  
  由此可见，Taro 的强大之处，以及Taro框架在前端的技术的占比会越来越高。而且用统一的框架、统一的API、统一的代码规范以及统一的代码结构，是多么棒的开发体验。
  一次开发就可以完成所有主流平台的布局，人力和时间成本压缩到最低，感觉节省了一个亿哦。
下边我们就一起来揭秘Taro这神奇的面纱把

 Taro的环境搭建和Hello World

前置知识

学习这个前端框架，你需要一些前置知识：
- HTML、CSS，JavaScript这三个是基础知识，最起码要了解能作出简单的静态页面
- 理解MVVM框架，如果会React框架是最好的
- 了解ES6相关语法，作为一个当下流行的框架以及2020年的前端开发用ES6让代码规范起来，对项目开发和管理更加的方便
Taro编译工具的介绍

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

所以说这里的Taro编译工具是非常重要的，这里附带一张图。

Taro开发环境的安装

1.第一步是安装@tarojs/cli（脚手架工具），也有教开发工具的。

这个你可以使用npm或者yarn进行全局安装，命令如下：

npm的安装方式
```
npm install -g @tarojs/cli
```
yarn的安装方式
```
yarn global add @tarojs/cli
```
打开命令行后，输入上边的命令。

2.安装完成后，就可以用脚手架创建项目，命令如下：
```
taro init taro-dome
```
这里有个小坑就是如果你使用npm来安装脚手架的时候，有很大机率会失败，这些失败多是因为国内网络环境限制的。有两种解决方案，第一是"fangqiang"来进行安装，第二种是使用yarn来进行暗转，我这里就使用了yarn。

Hello World程序

通过上边的创建项目，我们的项目已经建立好了，然后就是运行项目，命令如下：
```
cd taro-dome
npm run dev:h5
```
在这里运行的是h5模式的，如果要运行小程序的根据package.json中的script设置可知相应的运行方式。

运行后页面会在浏览器显示Hello World，默认的端口为10086，如图：

Taro生成小程序代码并预览

Taro可以生成多端代码，在上一节只生成了h5的显示，这次我们就先来进行生成小程序代码，并进行预览。

生成微信小程序的代码
```
npm run dev:weapp
```
输入完命令后，taro编译器自动为我们生成小程序代码到dist目录中。

这里边的app.js、app.json以及app.wxss 这都是微信小程序所对应的文件，有过微信小程序开发的肯定觉得很熟悉，这就是Taro的强大之处，也是Taro框架的开发者肯定是个webpack开发的大牛，编译生成对应的终端的代码，而不是一个壳子嵌套。

在微信开发者工具中预览项目

开发小程序的肯定知道微信开发者工具，如果你是初学的这里给你一个下载的链接，方便下载学习：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
下载后安装步骤很简单，跟安装QQ几乎一样。
安装完成后，你需要注册一个账号，这个自己按照提示注册就可以了。

注册后导入一个小程序项目

需要注意的是这不是新建，而是导入一个项目。目录选择的是你的taro项目刚才编译后生成的dist目录
AppId如果有在公众平台注册可以填，没有默认是一个测试号直接导入即可。

导入后你就可以看到在微信开发者工具中显示Hello World！了。

注意坑点

千万不要在微信开发者工具中修改dist目录，因为这个文件是由taro编译而来的；
如果要修改在taro的原项目修改，然后通过编译将修改的内容编译到dist文件中

 Taro的目录介绍

在目录介绍前肯定会有疑惑，Taro是多端统一框架，前边我们利用编译工具生成了h5和微信小程序的代码，那么其他的支付宝小程序、百度小程序等又是如何生成？
这些的答案都在项目的package.json文件中的scripts部分当中：
```
"scripts": {
    "build:weapp": "taro build --type weapp",
    "build:swan": "taro build --type swan",
    "build:alipay": "taro build --type alipay",
    "build:tt": "taro build --type tt",
    "build:h5": "taro build --type h5",
    "build:rn": "taro build --type rn",
    "build:qq": "taro build --type qq",
    "build:quickapp": "taro build --type quickapp",
    "dev:weapp": "npm run build:weapp -- --watch",
    "dev:swan": "npm run build:swan -- --watch",
    "dev:alipay": "npm run build:alipay -- --watch",
    "dev:tt": "npm run build:tt -- --watch",
    "dev:h5": "npm run build:h5 -- --watch",
    "dev:rn": "npm run build:rn -- --watch",
    "dev:qq": "npm run build:qq -- --watch",
    "dev:quickapp": "npm run build:quickapp -- --watch"
  },
```
我们就以dev为例解释下dev: 后边的都是哪一个平台的
- weapp 微信小程序
- h5 手机web用于公众号和浏览器等
- swan 百度小程序
- alipay 支付宝小程序
- tt 字节跳动小程序
- qq QQ小程序
- jd 京东小程序
- quickapp 快应用
- rn React Native
  这些类型执行都和微信小程序的一样，都是将: 后的改成相对应的模式即可
```
npm run dev:weapp
或
yarn dev:weapp
```
下边就介绍下Taro的项目目录结构

dist目录

这个目录在上边生成微信小程序代码时已经见到了，是我们在预览时自动生成的，每次进行预览都会根据我们预览的终端不同，编译成不同代码。

每次编译时都会删除以前的代码，这个小伙伴么要注意一下。

config目录

这个就是项目的一些配置，这些配置以后会不断深入学习，但是现在还不了解，可以先不进行配置。否则会影响项目的运行。

node_modules

项目所需的依赖包，就是使用npm install进行安装的包，一般不需要修改。

src目录

这个是最重要的，这个是我们的源码目录，开发的所有代码都在这个里边。

下边给一个官方的目录结构说明
```
├── dist                   编译结果目录
├── config                 配置目录
|   ├── dev.js             开发时配置
|   ├── index.js           默认配置
|   └── prod.js            打包时配置
├── src                    源码目录
|   ├── pages              页面文件目录
|   |   ├── index          index 页面目录
|   |   |   ├── index.js   index 页面逻辑
|   |   |   └── index.css  index 页面样式
|   ├── app.css            项目总通用样式
|   └── app.js             项目入口文件
└── package.json
```
Taro使用Hooks的新特性

React Hooks的优缺点

既然我们要用Hooks来写，我们就要了解React Hooks的优缺点，为什么要用Hooks，那么我们就来看下Hooks的优缺点吧！
这个优缺点是通过和传统的React.Component进行对比得出的。

React Hooks的优点
1. 更容易复用代码
2. 清爽的代码风格
3. 代码量更少
4. 更容易发现无用的状态和函数
5. 更容易拆分组件
React Hooks的缺点
1. 状态不同步
2. 副作用代码从主动式变成响应式
如何避免React Hooks的常见问题
1. 不要在useEffect里面写太多的依赖项，划分这些依赖项成多个useEffect，这样更好维护
2. 如果你碰到状态不同步的问题，可以考虑下手动传递参数到函数。如：
```
   // showCount的count来自父级作用域 
   const [count,setCount] = useState(xxx); 
   function showCount(){ console.log(count) } 
   
   // showCount的count来自参数 
   const [count,setCount] = useState(xxx); 
   function showCount(c){ console.log(c) }
```
1. 一定要加入eslint-plugin-react-hooks这个插件，并且重视它的警告
2. 使用useRef来保存你的引用并在re-render的时候主动更新ref的对应属性，这样可以避免“引用是旧”的这个烦人的问题，但这种方式hack味道浓郁。
使用Hooks来改写Index组件

在src/pages/index/index.jsx文件：
原文件：
```
import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less'

export default class Index extends Component {

  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  config = {
    navigationBarTitleText: '首页'
  }

  render () {
    return (
      <View className='index'>
        <Text>Hello world!</Text>
      </View>
    )
  }
}

修改成hooks方式：
```
```
import Taro, { useState } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less'

function Index(){
  
  const [userName] = useState('Hello Taro!')

  return (
    <View>
      <Text>{userName}</Text>
    </View>
  )
}

export default Index
```
如果你对React Hooks不熟悉的话，这里有一套免费的Hooks学习视频教程：https://www.jspang.com/detailed?id=59
如果您对React也不太熟悉的话，没关系这边有一整套的React学习视频，学习完后上手项目没有问题的：https://jspang.com/detailed?id=56

Taro中组件传值

使用Taro 的一个好处就是要可以用组件化的方式进行编程，所以编写组件在Taro中是每天都需要作的工作。
下边我们先来创建一个自组件，然后进行组件的传值，Taro的组件传值跟React的一样利用props，因此如果你对React的组件传值比较熟悉的化，这里很容易理解。

在Taro项目中的src/pages/index文件夹下面建立一个Child组件

child.jsx组件
```
import { View, Text } from '@tarojs/components'
function Child(){
  return ( 
    <View><Text>我是子组件</Text></View>
  )
}

然后在Index组件中引入，这里给出全部代码方便学习
```
```
import Taro, { useState } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less'
import Child from "./child"

function Index(){
  
  const [userName] = useState('Hello Taro!')

  return (
    <View>
      <Text>{userName}</Text>
      <Child></Child>
    </View>
  )
}

export default Index
```
父组件向子组件传值

在上边说过，Taro的传值跟React的一样，父组件向子组件传值是通过props进行；
在Taro中也是可以这样传值的，现在修改index.jsx代码，把userName传递给子组件。
```
import Taro, { useState } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less'
import Child from "./child"

function Index(){
  
  const [userName] = useState('Hello Taro!')

  return (
    <View>
      <Text>{userName}</Text>
      <Child userInfo={userName} ></Child>
    </View>
  )
}

export default Index
```
传递后，子组件要增加props参数，然后才能用props进行接收。
```
import { View, Text } from '@tarojs/components'
function Child(props){
  return ( 
    <View>
        <Text>我是子组件</Text>
        <View><Text>接收来自父组件的值:{props.userInfo}</Text></View>
    </View>
  )
}

export default Child

这个组件间的传值非常的简单，当我们会用组件的形式编写页面和组件时，你就可以作一些小东西了。
```
但现在你可以看到，我们把页面和组件放到了一个文件夹下，并且都使用了jsx扩展名。
那Taro时如何区分那些是组件，那些是页面的？
其实它是通过自身的路由来区分的，只要配置路由的，就是页面，没配置的就默认是组件。
下边我们来看下Taro中的路由吧！

Taro 路由配置和介绍

Taro中的路由和React 的路由不同，它是通过app.jsx中的pages来配置的，并且谁配置在第一个数组位置，谁就是默认打开的首页。

首先配置路由

新建一个页面

在/src/pages/文件夹下，建立一个/blog文件夹，在文件夹下面建立一个blog.jsx文件，写入下面的代码:
```
import {View , Text} from '@tarojs/components'
function Blog(){
    return (
        <View>
            <Text>Blog Page</Text>
        </View>
    )
}
export default Blog
```
路由配置

有了页面之后就可以到/src/app.jsx下，然后在pages的数组里面加入代码。
```
pages: [
    'pages/blog/blog',
    'pages/index/index'
],
```
这里需要注意一点，就是你不需要用import引入Blog页面，这个Taro为我们自动做好了。修改完成后，可以到浏览器中看一下，可以看到默认页面已经变成了Blog页面了。

页面间的跳转

页面跳转的方法

Taro提供了6个相关的导航API，我们可以使用这些API进行跳转，需要注意的是这些有些是小程序专用的。
- navigateTo: 最基本的跳转方式，可以返回上级页面。三端都支持的，小程序、H5、React Native。
- redirectTo：不记录上集页面，直接跳转。三端都支持的，小程序、H5、* React Native。
- switchTab： Tab之间进行切换，这个要配合Taro的导航栏一起使用，三端都支持的，小程序、H5、React Native。
- navigateBack: 返回上一级页面，这个在小程序中常使用，三端都支持的，小程序、H5、React Native。
- relaunch：关闭所有额面，打开到应用内某个页面。三端都支持的，小程序、H5、React Native。
- getCurrentPages: 获取当前页面信息所用，这个H5是不支持的。（注意）
页面跳转Demo

做个Demo，我们从Blog页面，跳转到Index页面，我们的程序如何来编写。

为了方便学习这里给出blog.jsx的全部代码：
```
import Taro from '@tarojs/taro'
import {View , Text ,Button} from '@tarojs/components'
function Blog(){
    const gotoIndex=()=>{
        Taro.navigateTo({url:'/pages/index/index'})
    }
    return (
        <View>
            <Text>Blog Page</Text>
            <Button onClick={gotoIndex}>我要去Index页面</Button>
        </View>
    )
}
export default Blog
```
这样我们就实现了Taro中路由的跳转。

Taro路由传参

Taro的路由传参利用查询字符串的形式

Taro中进行传参，一般会使用查询字符串的形式，也就是在跳转的url上，加一个?问号的形式，然后后边跟上参数。

现在我们就在Blog.jsx页面用，useState的形式声明一个变量，再通过跳转把值带到Index.jsx页面。
```
import Taro ,{useState}from '@tarojs/taro'
import {View , Text ,Button} from '@tarojs/components'
function Blog(){

    const  [blogTitle,setBlogTitle]=useState('JSPang Blog')

    const gotoIndex=()=>{
        Taro.navigateTo({url:'/pages/index/index?blogTitle='+blogTitle})
    }
    return (
        <View>
            <Text>Blog Page</Text>
            <Button onClick={gotoIndex}>我要去Index页面</Button>
        </View>
    )
}
export default Blog
```
接收传递参数并显示在页面上

在参数已经可以传递了，那如何在Index.jsx进行接收那，其实也非常简单。只要使用this.$router.params就可以进行接收。

当然我们要接收参数，可以在useEffect()中进行（useEffect是React Hooks的方法，不了解的同学请去了解下），
```
useEffect(()=>{
setBlogTitle(this.$router.params.blogTitle)
},[])
```
为了更好的学习，这给出接收的全部代码，
index.jsx的代码：
```
import Taro, {  useState ,useEffect} from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import Child from './child.jsx'
import './index.less'

function Index(props){
  const [userName ,setUserName] = useState('Hello World!!!!')
  const [blogTitle,setBlogTitle] = useState('')
  useEffect(()=>{
    setBlogTitle(this.$router.params.blogTitle)
  },[])
  return ( 
    <View>
        <Text>{userName}</Text>
        <Child userName={userName}></Child>
        <View>{blogTitle}</View>
    </View>
  )

}

export default Index
```
多参数的传递和接收

多个参数和多个参数的接收，传递的时候只要用&进行链接就可以了，比如下面这样。（有前端开发经验的同学，对这个肯定不会陌生）
```
Taro.navigateTo({url:'/pages/index/index?blogTitle='+blogTitle+'&introduce='+introduce})
```
为了学习方便，这里给出blog,jsx的全部代码：
```
import Taro ,{useState}from '@tarojs/taro'
import {View , Text ,Button} from '@tarojs/components'
function Blog(){
introduce
    const  [blogTitle,setBlogTitle]=useState('JSPangBlog')
    const  [introduce,setIntroduce]=useState('111111')

    const gotoIndex=()=>{
        Taro.navigateTo({url:'/pages/index/index?blogTitle='+blogTitle+'&introduce='+introduce})
    }
    return (
        <View>
            <Text>Blog Page</Text>
            <Button onClick={gotoIndex}>我要去Index页面</Button>
        </View>
    )
}
export default Blog

接收参数跟单参数接收方法一样，不作过多介绍，直接给出代码，
```
index.jsx代码：
```
import Taro, {  useState ,useEffect} from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import Child from './child.jsx'
import './index.less'

function Index(props){
  const [userName ,setUserName] = useState('Hello World!!!!')
  const [blogTitle,setBlogTitle] = useState('')
  const  [introduce,setIntroduce]=useState('')
  useEffect(()=>{
    setBlogTitle(this.$router.params.blogTitle)
    setIntroduce(this.$router.params.introduce)
  },[])
  return ( 
    <View>
        <Text>{userName}</Text>
        <Child userName={userName}></Child>
        <View>{blogTitle}</View>
        <View>{introduce}</View>
    </View>
  )

}

export default Index
```
JavaScript资源引入的方法

JavaScript的引入和React的引入方式差不多，比如现在我们定义了一个方法叫做XieDaJiao（谢大脚），然后再定义一个方法叫liuying（刘英）。

在/src目录下，新建一个/tools文件夹，然后在文件夹下边建立一个index.js文件，输入下面的代码。
```
export function xiedajiao(){
    console.log('我是谢大脚')
}

export function liuying(){
    console.log('我是刘英')
}


建立完成后，我们在blog.jsx文件中引入这个，需要用ES的解构的方式引入：
```
```
import {xiedajiao,liuying} from '../../tools'
```
然后使用的方法，也是利用在useEffect中运行，如下：
```
useEffect(()=>{
    xiedajiao()
    liuying()
},[])
```
引入图片的方式

Taro引入图片的方式有两种： import xxx from ‘…’ 然后用将xxx放到相应的src的方式和直接在src中用require方式
下方是blog.jsx的代码，是用import的方式：
```
import Taro ,{useState ,useEffect}from '@tarojs/taro'
import {View , Text ,Button,Image} from '@tarojs/components'
import {xiedajiao,liuying} from '../../tools'
import newbbd  from '../../static/newbbd0001.jpg'

function Blog(){

    useEffect(()=>{
        xiedajiao()
        liuying()
    },[])



    const  [blogTitle,setBlogTitle]=useState('JSPangBlog')
    const  [introduce,setIntroduce]=useState('111111')
    const gotoIndex=()=>{
        Taro.navigateTo({url:'/pages/index/index?blogTitle='+blogTitle+'&introduce='+introduce})
    }
    return (
        <View>
            <Text>Blog Page111</Text>
            <Button onClick={gotoIndex}>我要去Index页面</Button>
            <View>
                <Image src={newbbd} width="100px" height="100px" />
            </View>
        </View>
    )
}
```
如果想用require的方式，将Image组件的src属性改为：
```
<Image src={require('../../static/newbbd0001.jpg')} width="100px" height="100px" />
```
更多资源的引入方式，可以来看下Taro资源引入的文档：http://taro-docs.jd.com/taro/docs/static-reference.html

JSX的列表渲染

在开始介绍远程数据请求前，先对JSX的列表渲染做下介绍，给JSX不熟悉的朋友提供便利。

构建数组对象

先使用JS的基本语法，打开blog.jsx文件然后再blog方法里编写代码：
```
const girls = [
    {id:1,name:'胡一菲'},
    {id:2,name:'陈美嘉'},
    {id:3,name:'诸葛大力'},
    {id:4,name:'咖喱酱'}
]
```
在JSX代码中渲染列表

blog.jsx的全部代码
```
import Taro ,{useState ,useEffect}from '@tarojs/taro'
import {View , Text ,Button,Image} from '@tarojs/components'
import {xiedajiao,liuying} from '../../tools'

function Blog(){

    useEffect(()=>{
        xiedajiao()
        liuying()
    },[])
    ·
	const girls = [
	    {id:1,name:'胡一菲'},
	    {id:2,name:'陈美嘉'},
	    {id:3,name:'诸葛大力'},
	    {id:4,name:'咖喱酱'}
	]
	
    const  [blogTitle,setBlogTitle]=useState('JSPangBlog')
    const  [introduce,setIntroduce]=useState('111111')
    const gotoIndex=()=>{
        Taro.navigateTo({url:'/pages/index/index?blogTitle='+blogTitle+'&introduce='+introduce})
    }
    return (
        <View>
            <Text>Blog Page111</Text>
            <Button onClick={gotoIndex}>我要去Index页面</Button>
            <View>
            { girls.map((item,index)=>{
			    return (
			        <View>{item.name}</View>
			    )
			}) }
			</View>
        </View>
    )
}
```
在JSX中使用逻辑判断

在JSX中使用逻辑判断，不能像下边这样用判断：
```
<view>
    {
        if(zhujueNum===1){
            return ('张伟')
        }else{
            return('吕子乔')
        }
    }
</view>
```
需要使用判断要用三目运算符：
```
<view>
    男主角是：{zhujueNum==1?'张伟':'吕子乔'}
</view>
```
或者也可以使用，短路运算符：
```
<view>
    男主角是：{zhujueNum==1 && '张伟' || '吕子乔'}
</view>
```
请求远程数据

Taro的远程数据请求，利用Taro的request的方式，这里给出request的参数文档：

```javascript

https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

```
下边我们在blog.jsx文件中，编写一个testHandler方法，方法中使用Taro.request后去远端数据，这里数据请求的路径url，你可以去mockJs网站，也可以自己用node等方式创建一个数据请求路径，或者你项目开发时候的路径
```
const getData= ()=>{
    Taro.request({
        url:'...'
    }).then(res=>{
        console.log(res.data)
    })
}
```
然后在JSX中编写一个按钮，加上onClick事件,代码如下：
```
<Button onClick={getData}>获取数据</Button>
```
遍历渲染获取到的数据

先用useState声明一个articleList,代码如下：
```
const  [articleList,setArticleList] = useState([])
```
然后在return中使用map进行遍历，如下：
```
{
    articleList.map((item,index)=>{
        return (<View key={index}>- {item.title} </View>)
    })
}
```
blog.jsx完整的代码：
```
import Taro, { useState } from '@tarojs/taro'
import { View, Text, Button } from '@tarojs/components'

function Blog2(){
    const [dataList, setDataList] = useState([])

    const getData = () => {
        Taro.request({
            url: 'https://apiblog.jspang.com/default/getArticleList'
        })
        .then((res)=>{
            console.log(res.data)
            setDataList(res.data.list)
        })
    }

    return (
        <View>
            <View><Text>数据请求</Text></View>
            <Button onClick={getData} >获取数据</Button>
            <View>
                {
                    dataList.map((item, index)=>{
                        return (
                            <View key={index} >{item.title}</View>
                        )
                    })
                }
            </View>
        </View>
    )
}
export default Blog2
```
文章就分享到这，欢迎关注“前端大神之路”
相关阅读:
js json和对象互相转换
 github配置和git学习
 sea.js,spm学习
 less学习－语法(二)
less学习－浏览器端编译(一)
grunt-mac上安装运行构建工具的总结（一）
Advice from an Old Programmer
scikit-FEM-例2-用Morley元在方形区域上解板弯曲问题
 scikit-FEM-例1-求解Possion边值问题
 在shell脚本中调用sqlplus 分类： H2_ORACLE 2013-06-23 13:01 1437人阅读评论(0) 收藏
原文地址：https://www.cnblogs.com/cczlovexw/p/13808842.html

taro使用教程（详细版）

Taro框架的简介和开篇介绍

目前Taro支持的终端

Taro的环境搭建和Hello World

前置知识

Taro编译工具的介绍

Taro开发环境的安装

1.第一步是安装@tarojs/cli（脚手架工具），也有教开发工具的。

2.安装完成后，就可以用脚手架创建项目，命令如下：

Hello World程序

Taro生成小程序代码并预览

生成微信小程序的代码

在微信开发者工具中预览项目

注意坑点

Taro的目录介绍

dist目录

config目录

node_modules

src目录

下边给一个官方的目录结构说明

Taro使用Hooks的新特性

React Hooks的优缺点

React Hooks的优点

React Hooks的缺点

如何避免React Hooks的常见问题

使用Hooks来改写Index组件

Taro中组件传值

在Taro项目中的src/pages/index文件夹下面建立一个Child组件

父组件向子组件传值

Taro 路由配置和介绍

首先配置路由

新建一个页面

路由配置

页面间的跳转

页面跳转的方法

页面跳转Demo

Taro路由传参

Taro的路由传参利用查询字符串的形式

接收传递参数并显示在页面上

多参数的传递和接收

JavaScript资源引入的方法

引入图片的方式

JSX的列表渲染

构建数组对象

在JSX代码中渲染列表

在JSX中使用逻辑判断

请求远程数据

遍历渲染获取到的数据