大家好，我是讯享网，很高兴认识大家。

taro框架的简介和开篇介绍

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

目前taro支持的终端

1、微信小程序
2、H5移动端web页面
3、百度小程序
4、支付宝小程序
5、快应用
6、reactnative
7、字节跳动小程序
8、轻应用
taro是目前支持小程序最多的前端框架之一，说明我们能够轻易地生成媲美原生app的应用。所以说公司的应用想要推广全网，占用最多的流量入口的话，使用taro是完全没有问题。
当然uni-app也有这样类似的功能，生成多端应用的功能。并且还有专属的编辑器，调试起来很方便，下面我们就放一个taro和uni-app以及其他框架的对比图：
由此可见，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 

Taro生成小程序代码并预览

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

生成微信小程序的代码

npm run dev:weapp 

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

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

taro的目录结构

讯享网"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:": "taro build --type ", "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:": "npm run build: -- --watch", "dev:quickapp": "npm run build:quickapp -- --watch" } 

我们就以dev为例解释下dev: 后边的都是哪一个平台的
weapp 微信小程序
h5 手机web用于公众号和浏览器等
swan 百度小程序
alipay 支付宝小程序
tt 字节跳动小程序
小程序
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来写，那么我们要了解reacthooks的优缺点，为什么要使用hooks。 React Hooks的优点 ·更容易复用代码
·清爽的代码风格
·代码量更少
·更容易发现无用的状态和函数
·更容易拆分组件 React Hooks的缺点 ·状态不同步
·副作用代码从主动式变成响应式 如何避免React Hooks的常见问题 ·不要在useEffect里面写太多的依赖项，划分这些依赖项成多个useEffect，这样更好维护
·如果你碰到状态不同步的问题，可以考虑下手动传递参数到函数。如： ```css // showCount的count来自父级作用域 const [count,setCount] = useState(xxx); function showCount(){ console.log(count) }

// showCount的count来自参数
const [count,setCount] = useState(xxx);
function showCount©{ console.log© }

·一定要加入eslint-plugin-react-hooks这个插件，并且重视它的警告<br />·使用useRef来保存你的引用并在re-render的时候主动更新ref的对应属性，这样可以避免“引用是旧”的这个烦人的问题，但这种方式hack味道浓郁。 使用Hooks来改写Index组件 在src/pages/index/index.jsx文件： ```css 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 

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 

父组件向子组件传值

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 路由配置和介绍

首先配置路由

新建一个页面

在/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('') 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 

接收参数跟单参数接收方法一样，不作过多介绍，直接给出代码，

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

对了，Taro更新比较快，还要记得更新Taro项目哦

Taro 提供了更新命令来更新 CLI 工具自身和项目中 Taro 相关的依赖

更新 Taro CLI 工具

yarn global add @tarojs/cli@latest 

注意事项

我们在使用taro语法应注意的事项

1. 使用两个空格换行；
2. 结束不能用分号；
3. 除了缩进，不能使用多个空格；
4. 统一用单引号；
5. 关键词后加空格，如Iif (condition) {},括号前都有空格；
6. 避免多余的空行；
7. 函数声明时括号与函数名间加空格，，，，如function name (arg) { … } run(function () { … })
8. 展开运算符与它的表达式间不要留空白 如：fn(…args)
9. 遇到分号时空格要后留前不留 如：for (let i = 0; i < items.length; i++) {…}
10. 代码块首尾留空格 如if (admin) {…}
11. 圆括号间不留空格 如getName(name)
12. 属性前面不要加空格 如user.name
13. 一元运算符前加一个空格 如：typeof !admin
14. 注释首位留空格 如：/_ comment _/
15. 模板字符串中模板前后不加空格 如：const message = Hello, ${name}
16. 逗号后加空格 如const list = [1, 2, 3, 4] function greet (name, options) { … }
17. 不允许连续多行空格
18. 单行代码块两边加空格
19. 始终将逗号置于行末
20. 点号操作符须与属性需在同一行
21. 函数调用时，标识符与括号见不留空格 如console.log(‘hello’)
22. 键值对冒号与值之间留空白 如const obj = { ‘key’: ‘value’ }
23. 变量和函数名统一使用驼峰命名法： 如

讯享网function myFunction () { 
    } const myVar = ‘hello’ 

字符串拼接操作符 (Infix operators) 之间要留空格 如

const message = 'hello, ’ + name + ‘!’ 

讯享网if (isNaN(price)) { 
    } 

合法的字符串和type of 进行比较 如

typeof name === ‘undefined’ 

1. 不要解构空值
2. 使用数组字面量而不是构造器 如

讯享网const { 
    a: { 
    b } } = foo 

Object.prototype.age = 21 //不行 

4. 对象属性换行时注意风格

讯享网const user = { 
    name: ‘Jane Doe’, age: 30, username: ‘jdoe86’ } // ✓ 正确 const user = { 
    name: ‘Jane Doe’, age: 30, username: ‘jdoe86’ } 

const user = { 
    name: ‘John Doe’ } //对 

避免使用 arguments.callee 和 arguments.caller
嵌套的代码块中禁止再定义函数
禁止使用 Function 构造器

讯享网const sum = new Function(‘a’, ‘b’, ‘return a + b’) // ✗ 错误 

自调用匿名函数 (IIFEs) 使用括号包裹

const getName = function () { 
    }() // ✗ 错误 const getName = (function () { 
    }()) // ✓ 正确 const getName = (function () { 
    })() // ✓ 正确 

讯享网function* helloWorldGenerator() { 
    // ✗ 错误 yield ‘hello’; yield ‘world’; return ‘ending’; } 

25. 类名注意事项：
26. 类名要以大写字母开头

const dog = new Animal() // ✓ 正确 

2)避免对类名重新赋值

讯享网class Dog extends Mammal { 
    constructor () { 
    super() // ✓ 正确 } } 

3)使用 this 前请确保 super() 已调用

class Dog extends Animal { 
    constructor () { 
    this.legs = 4 // ✗ 错误 super() } } 

4. 禁止多余的构造器

讯享网class Car { 
    constructor () { 
    // ✗ 错误 super() } 

5. 类中不要定义冗余的属性

class Dog { 
    bark () { 
   } bark () { 
   } // ✗ 错误 } 

6. 无参的构造函数调用时要带上括号

讯享网function Animal () { 
   } const dog = new Animal // ✗ 错误 const dog = new Animal() // ✓ 正确 

7. new 创建对象实例后需要赋值给变量

new Character() // ✗ 错误 const character = new Character() // ✓ 正确 

8. 用 throw 抛错时，抛出 Error 对象而不是字符串

讯享网throw ‘error’ // ✗ 错误 throw new Error(‘error’) // ✓ 正确 

try { 
    // … } catch (e) { 
    e = ‘new value’ // ✗ 错误 }