关于SegmentFault:Taro-入门

简介

Taro 是一个遵循 React 语法标准的开放式跨端跨框架解决方案，反对应用 React/Vue/Nerv 等框架来开发微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 /H5 等利用，内置了 UI 组件，还有物料市场，只编写一套代码就可能适配到多端。

Tara 遵循 React 语法，集成的是 Nerv 框架。

Nerv是一款基于 virtual dom 技术的类 React UI 框架，它基于 React 规范，领有和 React 统一的 API 与生命周期。得益于与 React 保持一致 API 的个性，Nerv 能够无缝兼容到 React 的相干生态，例如 react-router，react-redux，以及应用 React 开发的组件，所以对于旧的 React 我的项目，能够无痛地将 React 替换成 Nerv。

环境筹备

Taro 仅提供一种开发方式：装置 Taro 命令行工具（Taro CLI）进行开发。
在终端输出命令 npm i -g @tarojs/cli 装置 Taro CLI。
Taro CLI 依赖于 Node.js 环境（>=8.0.0）。

框架

我的项目目录构造

编译配置

编译配置寄存于我的项目根目录下 config 目录中，蕴含三个文件:

index.js: 通用配置
dev.js : 开发环境配置
prod.js : 生产环境配置

入口文件

每一个 Taro 利用都须要一个入口组件用来注册利用，入口文件默认是 src/app.js。

页面文件

页面组件是每一项路由将会渲染的页面，Taro 的页面默认放在 src/pages 中，每一个 Taro 我的项目至多有一个页面组件。页面创立好后如果须要渲染展现，须要在我的项目入口文件 app.config.js 的 pages 数组中进行指定。

文件配置

全局配置：能够通过 app.config.js 的文件进行全局配置，配置页面文件的门路、窗口体现、设置网络超时工夫、设置多 tab 等。

一个简略的全局配置如下：

// app.config.js
export default {
  pages: [
    'pages/index/index',
    'pages/list/index'
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
  }
}

未指定 entryPagePath 时，数组的第一项代表初始页面。
新增 / 缩小页面，都须要对 pages 数组进行批改。

页面配置：每一个页面组件（例如 index.js）也会有一个页面配置（例如 index.config.js），能够在页面配置文件中设置页面的导航栏、背景色彩等参数。

一个最简略的页面配置如下：

// ./pages/index/index.jsx
export default {navigationBarTitleText: '首页'}

配置标准基于微信小程序的全局配置进行制订，所有平台进行对立。在配置文件中，Taro 并不关怀框架的区别，Taro CLI 会间接在编译时在 Node.js 环境间接执行全局配置的代码，并把 export default 导出的对象序列化为一个 JSON 文件。因而，咱们必须保障配置文件是在 Node.js 环境中是能够执行的，不能应用一些在 H5 环境或小程序环境能力运行的包或者代码，否则编译将会失败。

我的项目配置

为了可能适配到各个小程序平台，满足不同小程序平台配置文件不同的状况，Taro 反对为各个小程序平台增加不同的我的项目配置文件。

通过 Taro 模板创立的我的项目都会默认领有 project.config.json 文件，若要兼容到其余小程序平台，按如下对应规定来减少相应平台的配置文件，其配置与各自小程序平台要求的统一。

组件生命周期与事件处理函数

以 Hooks 为例：

css 工具

在 Taro 中，咱们能够自在地应用 CSS 预处理器和后处理器，应用的办法也非常简单，只有在编译配置增加相干的插件即可：

// config/index.js
const config = {
  designWidth: 750,
  sourceRoot: 'src',
  outputRoot: 'dist',
  plugins: [
    '@tarojs/plugin-sass', // 应用 Sass
    // '@tarojs/plugin-less', // 应用 Less
    // '@tarojs/plugin-stylus', // 应用 Stylus
  ],
  defineConstants: {},
  mini: {},
  h5: {}}

module.exports = function (merge) {if (process.env.NODE_ENV === 'development') {return merge({}, config, require('./dev'))
  }
  return merge({}, config, require('./prod'))
}

除了 CSS 预处理器之外，Taro 还反对 CSS Modules 和 CSS-in-JS。通过 自定义编译，还能够反对更多 CSS 工具。

路由性能

在 Taro 中，路由性能是默认自带的，不须要开发者进行额定的路由配置。

入口组件和页面组件是通过配置文件来交互的，咱们只须要在入口文件的 config 配置中指定好 pages，而后就能够在代码中通过 Taro 提供的 API 来跳转到目标页面，例如：

// 跳转到目标页面，关上新页面
Taro.navigateTo({url: '/pages/page/path/name'})

// 跳转到目标页面，在以后页面关上
Taro.redirectTo({url: '/pages/page/path/name'})

尺寸单位

在 Taro 中, 尺寸单位倡议应用 px, %，Taro 默认会对所有单位进行转换。当转成微信小程序的时候，尺寸单位将默认转换以 rpx 为单位，当转成 H5 时将默认转换以 rem 为单位。

如果你心愿局部 px 单位不被转换成 rpx 或者 rem，最简略的做法就是在 px 单位中减少一个大写字母，例如 Px 或者 PX 这样，则会被转换插件疏忽。

Taro 默认以 750px 作为换算尺寸规范，如果设计稿不是以 750px 为规范，则须要在我的项目配置 config/index.js 中进行设置，例如设计稿尺寸是 640px，则须要批改我的项目配置 config/index.js 中的 designWidth 配置为 640：

const config = {designWidth: 640,}

目前 Taro 反对 750、640、828 三种尺寸设计稿，他们的换算规定如下：

const DEVICE_RATIO = {
  '640': 2.34 / 2,
  '750': 1,
  '828': 1.81 / 2
}

多端开发

因为不同的平台之间还是存在一些无奈打消的差别，所以为了更好的实现跨平台开发，Taro 中提供了两种解决方案：

1. 内置环境变量：process.env.TARO_ENV

process.env.TARO_ENV 用于判断以后编译类型，目前有 weapp / swan / alipay / h5 / rn / tt / qq / quickapp 八个取值。通过这个变量来写对应一些不同环境下的代码，在编译时会将不属于以后编译类型的代码去掉，只保留以后编译类型下的代码。

render () {
  return (
    <View>
      {process.env.TARO_ENV === 'weapp' && <ScrollViewWeapp />}
      {process.env.TARO_ENV === 'h5' && <ScrollViewH5 />}
    </View>
  )
}

毛病：尽管能够解决大部分跨端的问题，然而会让代码中充斥着逻辑判断，影响代码的可维护性，而且也让代码变得愈发俊俏。

2. 对立接口的多端文件

针对一项性能，如果多个端之间都有差别，开发者能够通过将文件批改成 原文件名. 端类型 的命名模式实现多端文件。Taro 在编译时，会依据编译平台类型，将加载的文件变更为带有对应端类型文件名的文件，从而达到不同的端加载对应文件的目标。

应用要点

• 不同端的对应文件肯定要对外裸露对立接口，对立调用形式，承受统一的参数
• 最好有一个平台无关的默认文件，这样在应用 ts 的时候也不会呈现报错
• 援用文件的时候，只须要写默认文件名，不必带文件后缀

多端文件简略的例子：

1. 多端组件

   // 1. 定义多端组件
   -test
   --test.js // Test 组件默认的模式，编译到微信小程序和 H5 之外的端
   --test.h5.js // Test 组件的 H5 版本
   --test.weapp.js // Test 组件的 微信小程序 版本
   
   // 2. 援用组件
   import Test from '../../components/test';
   
   <Test argA={1} argA={2} />

2. 多端办法

   // 1. 定义多端办法
   -utils
   --set_title.js
   --set_title.h5.js
   --set_title.weapp.js
   
   // 2. 应用办法
   import setTitle from '../utils/set_title'
   
   setTitle('页面题目')

跨平台组件库

绝对于咱们相熟的 div、span 元素而言，在 Taro 中咱们要全副应用跨平台组件进行开发。

Taro 以 微信小程序组件库 为规范，联合 jsx 语法标准，定制了一套本人的组件库标准。基于这个准则，在小程序端，能够应用所有的小程序原生组件，在其余端，Taro 提供了对应的组件库实现:

• H5 端: @tarojs/components，须要引入的默认规范组件库
• RN 端: @tarojs/components-rn

开发标准

• 首字母大写与驼峰式命名
• 组件的事件传递都要以 on 结尾

组件品种

应用

在应用时，咱们须要先从 Taro 规范组件库 @tarojs/components 援用组件，再进行应用。

import Taro, {Component} from '@tarojs/taro';
// 应用 <View />、<Text /> 组件
import {View, Text} from '@tarojs/components';

export default class C extends Component {render () {
    return (
      <View className='c'>
        <Text>c component</Text>
      </View>
    )
  }
}

Taro UI

Taro UI 是一款基于 Taro 框架开发的多端 UI 组件库。

个性

• 基于 Taro 开发 UI 组件
• 一套组件能够在 微信小程序 ， 支付宝小程序 ， 百度小程序，H5 多端适配运行（ReactNative 端暂不反对）
• 提供敌对的 API，可灵便的应用组件

组件品种

应用

1. 引入组件款式

引入组件款式有三种形式：

• 全局引入（JS 中）： 在入口文件 app.js 中引入 taro-ui 所有的款式

  import 'taro-ui/dist/style/index.scss' // 引入组件款式

• 全局引入（CSS 中）： 在 app.scss 款式文件中 import 组件款式并依照文档阐明应用

  @import "~taro-ui/dist/style/index.scss"; // 引入组件款式

• 按需引入： 在页面款式或全局款式中 import 须要的组件款式

  @import "~taro-ui/dist/style/components/button.scss"; // 引入所需的组件款式

2. 引入所需组件

// index.js
import {AtButton} from 'taro-ui';

一个应用 AtButton 的残缺例子：

// src/pages/index/index.tsx
import Taro, {Component, Config} from '@tarojs/taro'
import {View} from '@tarojs/components'
import {AtButton} from 'taro-ui'
import './index.scss';

export default class Index extends Component {
  config: Config = {navigationBarTitleText: '首页'}
  
  render () {
    return (
      <View className='index'>
         <AtButton type='primary'> 按钮文案 </AtButton>
      </View>
    )
  }
}

/* app.scss*/
@import "~taro-ui/dist/style/index.scss"; 

自定义主题

Taro UI 目前只有一套默认的主题配色，为满足业务和品牌上多样化的视觉需要，UI 库反对肯定水平的款式定制。（请确保微信根底库版本在 v2.2.3 以上）

目前反对三种自定义主题的形式，能够进行不同水平的款式自定义：

• SCSS 变量笼罩
• globalClass 全局款式类
• 配置 customStyle 属性（仅有局部组件反对，请查看组件文档，不倡议应用）

SCSS 主题变量笼罩

Taro UI 的组件款式是应用 SCSS 编写的，如果你的我的项目中也应用了 SCSS，那么能够间接在我的项目中扭转 Taro UI 的款式变量。

1. 覆写的变量，须要在引入 taro ui 默认款式之前定义，默认主题变量命名。

2. Slider, Switch 组件临时不反对 SCSS 变量笼罩的形式自定义主题。

1. 在 app.scss 文件写入以下内容：

   // app.scss
   $color-brand: #6190E8; /* 扭转主题变量 */
   
   @import "~taro-ui/dist/style/index.scss"; /* 引入 Taro UI 默认款式 */

2. 在 app.js 中引入以上的款式文件即可

   // app.js
   import './app.scss';

扭转主题变量前后比照图：

全局款式类

全局款式类是微信小程序定义的一套用于批改组件外部款式的计划。如果心愿组件外款式类可能影响组件外部，能够在组件结构器中的 options.addGlobalClass 字段设置为 true（Taro UI 的组件均开启了此个性）。

addGlobalClass 只对 Page 上的 class 起作用。换言之，如果在自定义的组件中应用 taro-ui，是无奈在自定义组件外部通过 全局款式类 的形式去更改组件款式的。

当凋谢了全局款式类，存在内部款式无意间净化组件款式的危险。因为 Taro UI 的组件款式采纳 BEM 的命名形式，从肯定水平上防止了款式净化的问题。

/* page/index/index.js */
import Taro from '@tarojs/taro'
import {AtButton} from 'taro-ui'
import "./index.scss"

export default IndexPage extends Taro.Component {render () {return <AtButton className='my-button' />}
}

/**
 * page/index/index.scss 必须在 Page 上
 * .at-button 为组件外部类名，只须要写一样的类名去笼罩即可
 **/
.my-button .at-button {color: red;}

设计思维与编译原理

在 Taro 中先依照 Nerv 语法编写一份源代码，而后通过 编译工具 将源代码编译成对应的代码。编译工具采纳的是编译原理的思维，所谓编译原理，就是一个对输出的源代码进行语法分析，语法树构建，随后对语法树进行转换操作再解析生成指标代码的过程。

Taro 规范：抹平多端差别

基于编译原理，能够将 Taro 源码编译成不同端上能够运行的代码了，然而这对于实现多端开发还是远远不够。不同的平台都有本人的个性，每一个平台都不尽相同，这些差别次要体现在不同的组件规范与不同的 API 规范以及不同的运行机制上。

以小程序和 Web 端为例：

能够看出小程序和 Web 端上组件规范与 API 规范有很大差别，这些差别仅仅通过代码编译伎俩是无奈抹平的，例如不能间接在编译时将小程序的 <view /> 间接编译成 <div />，因为他们尽管看上去有些相似，然而他们的组件属性有很大不同。仅仅依附代码编译，无奈做到统一，同理，泛滥 API 也面临一样的状况。针对这样的状况，Taro 采纳了定制一套运行时规范来抹平不同平台之间的差别。

这一套规范次要以三个局部组成，包含规范运行时框架、规范根底组件库、规范端能力 API，其中运行时框架和 API 对应 @taro/taro，组件库对应 @tarojs/components，通过在不同端实现这些规范，从而达到去差异化的目标。

taro build 命令

taro build 命令是整个 taro 我的项目的灵魂和外围，次要负责 多端代码编译（h5，小程序，React Native 等）。不同的平台，编译传参不同，编译规定不同。

// package.json 
"scripts": {
    // 微信小程序 weapp
    "build:weapp": "taro build --type weapp",
    // h5
    "build:h5": "taro build --type h5",
    // 支付宝小程序 alipay
    "build:alipay": "taro build --type alipay",
    // ....
  },

编译工作流与形象语法树（AST）

一般来说，将一种结构化语言的代码编译成另一种相似的结构化语言的代码包含以下几个步骤：

首先是 parse，将代码 解析（Parse）成 形象语法树（Abstract Syntex Tree），而后对形象语法树 AST 进行 遍历（traverse）和 替换 (replace)（能够类比 DOM 树的操作），最初是 生成（generate），依据新的 AST 生成编译后的代码。

Babel 模块

Babel 是一个通用的多功能的 JavaScript 编译器，更确切地说是源码到源码的编译器，通常也叫做转换编译器（transpiler）。Taro 我的项目的代码编译局部就是基于 Babel 的以下模块实现：

• babylon Babylon 是 Babel 的解析器。最后是 从 Acorn 我的项目 fork 进去的。Acorn 十分快，易于应用，并且针对非标准个性(以及那些将来的规范个性) 设计了一个基于插件的架构。
• babel-traverse Babel Traverse（遍历）模块保护了整棵树的状态，并且负责替换、移除和增加节点。
• babel-types Babel Types 模块是一个用于 AST 节点的 Lodash 式工具库，它蕴含了结构、验证以及变换 AST 节点的办法。该工具库蕴含考虑周到的工具办法，对编写解决 AST 逻辑十分有用。
• babel-generator Babel Generator 模块是 Babel 的代码生成器，它读取 AST 并将其转换为代码和源码映射（sourcemaps）。
• babel-template babel-template 是另一个尽管很小但却十分有用的模块。它能让你编写字符串模式且带有占位符的代码来代替手动编码，尤其是生成的大规模 AST 的时候。在计算机科学中，这种能力被称为准援用（quasiquotes）。

参考文章：
Taro 技术揭秘之 taro-cli
Taro 多端开发（上）