简介

Taro 是一个开放的跨端和跨框架的解决方案，遵循语法规范。支持使用/Vue/Nerv等框架开发微信/京东/百度/支付宝/字节跳动/小程序/H5等应用。 UI组件，以及素材市场，只需一套代码即可适配多种终端。

Tara 遵循语法并集成了 Nerv 框架。

Nerv 是一个基于 dom 技术的类 UI 框架，它基于标准，具有一致的 API 和生命周期。得益于保持 API 一致的特性，Nerv 可以无缝兼容相关的生态系统，如-、-，并使用已开发的组件，因此对于老项目，可以无痛地替换为 Nerv。

环境准备

Taro 只提供一种开发方式：安装 Taro 命令行工具（Taro CLI）进行开发。

在终端输入命令 npm i -g @/cli 安装 Taro CLI。

Taro CLI 依赖于 Node.js 环境 (>=8.0.0）.

框架项目目录结构

构建配置

编译配置存放在项目根目录下的目录下，包含三个文件：

.js：常用配置

dev.js：开发环境配置

prod.js：生产配置

输入文件

每个 Taro 应用程序都需要一个入口组件来注册应用程序。入口文件默认为src/app.js。

页面文件

页面组件是每个路由将呈现的页面。 Taro 的页面默认放在 src/ 中，每个 Taro 项目至少有一个页面组件。页面创建后，如果需要渲染显示，需要在项目入口文件app..js的数组中指定。

文件配置

全局配置：可以通过app..js文件进行全局配置，配置页面文件的路径、窗口性能、设置网络超时、设置多个tab等

简单的全局配置如下：

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

不指定时，数组的第一项代表初始页面。

添加/减少页面需要修改数组。

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

一个简单的页面配置如下：

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

配置规范基于微信小程序全局配置制定，各平台统一。在配置文件中，Taro 并不关心框架之间的差异。 Taro CLI 会在编译时直接在 Node.js 环境中执行全局配置的代码，并将导出的对象序列化成 JSON 文件。

因此，我们必须保证配置文件在Node.js环境下是可执行的，不能使用一些只能在H5环境或小程序环境下运行的包或代码，否则会编译失败。

项目配置

为了适配各个小程序平台，满足不同小程序平台的不同配置文件，Taro支持为各个小程序平台添加不同的项目配置文件。

通过 Taro 模板创建的项目默认会有一个 ..json 文件。为了兼容其他小程序平台，请按照以下对应规则添加对应平台的配置文件。配置与各个小程序平台要求一致。

小程序平台配置文件说明

微信小程序

..json

百度小程序

.swan.json

今日头条小程序

.tt.json

快速申请

..json

不要配置和在配置文件中，这两个配置会由Taro生成

QQ小程序

.qq.json

组件生命周期和事件处理程序

例如：

CSS 工具

在Taro中，我们可以自由使用CSS预处理器和后处理器，方法很简单，只需要在编译配置中添加相关插件即可：

// config/index.jsconst 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 和 CSS-in-JS。自定义编译还支持更多 CSS 工具。

路由功能

在Taro中，路由功能是默认内置的，不需要开发者进行额外的路由配置。

入口组件和页面组件通过配置文件进行交互。我们只需要在入口文件的配置中指定，然后就可以通过代码中Taro提供的API跳转到目标页面，例如：

p>

// 跳转到目的页面，打开新页面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 ，转换插件将忽略它。

默认使用芋头作为转换尺寸标准。如果设计稿不是标准，需要在项目配置/.js中设置。比如设计稿的大小是，需要将项目/.js中的配置修改为640：

const config = { designWidth: 640,}

Taro目前支持750、640、828三种尺寸的设计稿，其转换规则如下：

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

多终端开发

由于不同平台之间还是有一些无法避免的差异，为了更好的实现跨平台开发，Taro提供了两种解决方案：

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

.env。用于判断当前编译类型，/swan//h5/rn/tt//目前有8个值。使用这个变量来编写对应一些不同环境的代码。编译时，不属于当前编译类型的代码会被移除，只保留当前编译类型的代码。

render () { return ( {process.env.TARO_ENV === 'weapp' && } {process.env.TARO_ENV === 'h5' && } )}

缺点：虽然可以解决大部分跨端问题，但是会让代码充满逻辑判断，影响代码的可维护性，让代码越来越难看。

2.统一接口多终端文件

对于一个函数，如果多个终端之间存在差异，开发者可以通过将文件修改为原文件名.终端类型的命名形式来实现多终端文件。 Taro编译时，会根据编译平台的类型，将加载的文件改成对应终端类型的文件名的文件，从而达到在不同终端加载对应文件的目的。

使用要点

多终端文件简单示例：

1、多端组件

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

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 提供了相应的组件库实现：

开发规范组件类型

使用

在使用时，我们需要在使用前@/引用Taro标准组件库中的组件。

import Taro, { Component } from '@tarojs/taro';// 使用 、 组件import { View, Text } from '@tarojs/components'; export default class C extends Component { render () { return ( c component ) }}

芋头用户界面

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

特征组件类型

使用

1. 引入组件样式

引入组件样式的三种方式：

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

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

全局导入（在 CSS 中）：app.scss 样式文件中的组件样式并根据文档使用

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

按需引入：页面样式或全局样式中需要的组件样式

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

2.导入需要的组件

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

完整的用法示例：

// src/pages/index/index.tsximport 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 ( 按钮文案 ) }}

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

自定义主题

Taro UI 目前只有一组默认主题颜色。为了满足企业和品牌多样化的视觉需求，UI库支持一定程度的风格定制。 （请确保微信基础库版本在v2.2.3以上）

目前自定义主题的方式有3种，可以进行不同程度的自定义：

SCSS 主题变量覆盖

Taro UI 的组件样式是使用 SCSS 编写的。如果你的项目中也使用了SCSS，你可以直接在项目中更改Taro UI的样式变量。

1.在引入taro ui的默认样式之前需要定义被覆盖的变量。默认主题变量已命名。

2. ，组件目前不支持 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';

更改主题变量前后对比：

全局样式类

全局样式类是微信小程序定义的一组用于修改组件内部样式的方案。如果希望组件外部的样式类影响组件内部，可以设置 .组件构造函数中的字段为 true（所有 Taro UI 组件都启用了此功能）。

仅适用于页面。也就是说，如果在自定义组件中使用 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 }} /** * page/index/index.scss 必须在 Page 上 * .at-button 为组件内部类名，只需要写一样的类名去覆盖即可 **/.my-button .at-button { color: red;}

设计思路和编译原则

在Taro中，先按照Nerv语法编写一个源码，然后通过编译工具将源码编译成对应的代码。

编译工具采用编译原理的思想。所谓编译原理，就是对输入的源代码进行语法分析，构建语法树，然后对语法树进行转换解析生成目标代码的过程。

芋头标准：消除多端差异

基于编译原理，Taro源码可以编译成可以在不同终端上运行的代码，但这对于多终端开发来说是不够的。不同的平台有自己的特点，每个平台都不一样。这些差异主要体现在组件标准不同、API标准不同、运行机制不同。

以小程序和web为例：

可以看出，小程序和web端的组件标准和API标准有很大的不同。这些差异不能仅通过代码编译来消除。比如小程序不能直接编译成

p>

小程序游戏开发编译，因为虽然它们看起来很相似，但它们的组件属性却大不相同。

仅靠代码编译无法达到一致性。同样，许多 API 也面临同样的情况。针对这种情况，Taro 使用了一套自定义的运行时标准来消除不同平台之间的差异。

这套标准主要由标准运行时框架、标准基础组件库、标准端能力API三部分组成。运行时框架和API对应@taro/taro，组件库对应@/。这些标准在不同的端执行，以达到去差异化的目的。

芋头命令

taro命令是整个taro项目的灵魂和核心，主要负责多终端代码编译（h5、等）。不同平台有不同的编译参数和不同的编译规则。

// 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)

一般而言，将一种结构化语言的代码编译成另一种类似结构化语言的代码涉及以下步骤：

首先是将代码()成抽象语法树(Tree)，然后遍历()和()抽象语法树AST（可以类比DOM树的操作），最后()，根据新的AST生成编译后的代码。

模块

是一个通用的多用途编译器，更准确地说是源到源编译器，通常也称为转换编译器（）。 Taro项目的代码编译部分基于以下模块实现：