Taro 是什么

Taro 是由凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。

现如今市面上端的形态多种多样，Web、App 端(React Native)、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、App 端等）运行的代码。同时 Taro 还提供开箱即用的语法检测和自动补全等功能，有效地提升了开发体验和开发效率。

Taro 能提供什么

Write once, run anywhere

写一套代码输出多端可运行的代码，节省了大量的学习成本及工作量。

taro遵循 React 语法标准，结合编译原理的思想，对代码文件进行一系列转换操作，最终获得可以在小程序运行的代码。而 React 最开始就是为了解决 Web 开发而生的，所以对代码稍加改动，也可以直接生成在 Web 端运行的代码，而同属 React 语法体系下的 React Native，也能够很便捷地提供支持。同理其他平台，如快应用、百度小程序等，将源码进行编译转换操作，也能获得该平台下的对应语法代码。

多端开发实践

CLI工具安装

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# OR 安装了 cnpm，使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

项目初始化

taro init myApp

运行

需确保Taro CLI的版本与你的项目的依赖版本一致，否则会出现编译错误或者运行时错误。除h5以外，其它各端均需下载相应的开发者工具

1、微信小程序
# yarn
$ yarn dev:weapp
$ yarn build:weapp
# npm script
$ npm run dev:weapp
$ npm run build:weapp

2、H5
# yarn
$ yarn dev:h5
$ yarn build:h5
# npm script
$ npm run dev:h5
$ npm run build:h5

其它端运行可见官网

项目配置文件config

dev.js

module.exports = {
    env: {
        NODE_ENV: '"development"'
    },
    defineConstants: {},
    mini: {},
    h5: {
        devServer: {
            proxy: {
                "/": {
                    target: "proxy address",
                    changeOrigin: true
                }
            }
        }
    }
};

index.js

const path = require('path')

const config = {
    projectName: "taro-template",
    date: "2020-1-26",
    designWidth: 750,
    deviceRatio: {
        "640": 2.34 / 2,
        "750": 1,
        "828": 1.81 / 2
    },
    sourceRoot: "src",
    outputRoot: `dist/taro-template-${process.env.TARO_ENV}`,
    alias: {
        "@/service": path.resolve(__dirname, "..", "src/service"),
        "@/utils": path.resolve(__dirname, "..", "src/utils")
    },
    copy: {
        patterns: [
            { from: "src/static/", to: `dist/taro-template-${process.env.TARO_ENV}` } // 指定需要 copy 的文件
        ]
    },
    babel: {
        sourceMap: true,
        presets: [
            [
                "env",
                {
                    modules: false
                }
            ]
        ],
        plugins: [
            "transform-decorators-legacy",
            "transform-class-properties",
            "transform-object-rest-spread",
            [
                "transform-runtime",
                {
                    helpers: false,
                    polyfill: false,
                    regenerator: true,
                    moduleName: "babel-runtime"
                }
            ]
        ]
    },
    defineConstants: {},
    mini: {
        postcss: {
            autoprefixer: {
                enable: true,
                config: {
                    browsers: ["last 3 versions", "Android >= 4.1", "ios >= 8"]
                }
            },
            pxtransform: {
                enable: true,
                config: {}
            },
            url: {
                enable: true,
                config: {
                    limit: 10240 // 设定转换尺寸上限
                }
            },
            cssModules: {
                enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
                config: {
                    namingPattern: "module", // 转换模式，取值为 global/module
                    generateScopedName: "[name]__[local]___[hash:base64:5]"
                }
            }
        }
    },
    h5: {
        publicPath: "/",
        staticDirectory: "static",
        output: {
            filename: "js/[name].[hash:8].js",
            chunkFilename: "js/[name].[chunkhash:8].js"
        },
        imageUrlLoaderOption: {
            limit: 5000,
            name: 'static/images/[name].[hash].[ext]'
         },
        miniCssExtractPluginOption: {
            filename: "css/[name].[hash:8].css",
            chunkFilename: "css/[name].[chunkhash:8].css"
        },
        postcss: {
            autoprefixer: {
                enable: true,
                config: {
                    browsers: ["last 3 versions", "Android >= 4.1", "ios >= 8"]
                }
            },
            cssModules: {
                enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
                config: {
                    namingPattern: "module", // 转换模式，取值为 global/module
                    generateScopedName: "[name]__[local]___[hash:base64:5]"
                }
            }
        }
    }
};

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

prod.js

module.exports = {
    env: {
        NODE_ENV: '"production"'
    },
    defineConstants: {},
    mini: {},
    h5: {
        /**
         * 如果h5端编译后体积过大，可以使用webpack-bundle-analyzer插件对打包体积进行分析。
         * 参考代码如下：
         * webpackChain (chain) {
         *   chain.plugin('analyzer')
         *     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
         * }
         */
    }
};

多端实践

不同端的需求多少会有差异性，会存在页面样式，交互形式，页面逻辑的区别，这个时候就需要根据编译的环境来执行不同的代码。

内置环境变量

process.env.TARO_ENV

用来判断当前编译类型，目前有weapp / swan / alipay / h5 / rn / tt / qq / quickapp 八个取值，可以通过这个变量，来编写不同环境下不同的代码。

不同端引用不同资源

if(process.env.TARO_ENV === 'weapp'){
    require('path/to/weapp/name')
}else if(process.env.TARO_ENV === 'h5'){
    require('path/to/h5/name')
}

JSX 中使用，不同端加载不同组件

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

统一接口的多端文件（1.2.17版本开始支持）

内置环境变量虽然可以解决大部分跨端的问题，但是代码中会充斥着逻辑判断的代码，影响代码的可维护性，而且也让代码变得愈发丑陋，为了解决这种问题，自 1.2.17 开始，Taro 提供了另外一种跨端开发的方式作为补充。

开发者可以通过使用统一接口的多端文件，来解决跨端差异的功能。针对这一项功能，如果多个端之间都有差异，那么开发者可以通过将文件修改成 原文件名+端类型 的命名方式，不同端的文件代码对外保持统一接口，而引用的时候仍然是import 原文件名的文件，Taro在编译时，会根据需要编译平台类型，将加载的文件变更为带有对应端类型文件名的文件，从而达到不同的端加载对应文件的目的。

端类型对应着process.env.TARO_ENV的值

通常有以下两种使用场景

1、多端组件

假如有一个test组件存在微信小程序，h5两个个不同版本，那么就可以像如下组织代码。

test.js 文件，这是Test组件默认的形式，编译到微信小程序，h5l两端之外的端使用的版本。
test.h5.js 文件，这是Test组件的H5版本。
test.weapp.js 文件，这是Test组件的微信小程序版本。

三个文件，对外暴露的是统一的接口，它们接受一致的参数，只有内部有针对各自平台的代码的实现。使用的方式仍和之前保持一致，import的是不带端类型的文件名，在编译的时候会自动识别并添加端类型后缀

import Test from '../../components/test'

<Text argA={1} argA={2} />

2、多端脚本

与多端组件类似，假如有需要针对不同的端写不同的脚本逻辑代码，我们也可以进行类似的相应处理，遵守的唯一原则就算多端文件对外的接口保持一致。

例如微信小程序上使用Taro.setNavigationBarTitle来设置页面标题，H5使用document.title，那么可以封装一个setTitle方法来抹平两个平台的差异。

增加set_title.h5.js，代码如下

export default function  setTitle(title){
    document.title = title
}

增加set_title.weapp.js，代码如下

import Taro from '@tarojs/taro'
export default function setTitle(title){
    Taro.setNavigationBarTitle({
        title
    })
}

调用的时候，如下使用

import setTitle from '../utils/set_title'
setTitle('页面标题')

app.js中使用不同的pages（1.3.11版本开始支持）

根据不同环境返回不同的pages，可以这么写

config:Config = {
    "pages":preval`
        module.exports = (function() {
            if(process.env.TARO_ENV === 'weapp') {
                return [
                    '/pages/index/index'
                ]
            }
            if(process.env.TARO_ENV === 'swan'){
                return [
                    '/pages/indexswan/indexswan'
                ]
            }
        })()
    `
}

样式的条件编译(1.3+版本支持)

1、样式文件条件编译

假设目录中同时存在以下文件：

-index.scss
-index.rn.scss

当JS文件中引用样式文件：import './index.scss'时，RN平台会找到并引入index.rn.scss,其他平台会引入：index.scss,方便大家书写跨端样式，更好的兼容RN(其它端使用无效)

2、样式文件的条件编译

为了方便大家书写样式跨端的样式代码，添加了样式条件编译的特性

指定平台保留

/*  #ifdef  %PLATFORM%  */
样式代码
/*  #endif  */

指定平台剔除

/*  #ifndef  %PLATFORM%  */
样式代码
/*  #endif  */

多个平台之间可以使用空格隔开

多端同步调试（1.3.5版本开始支持）

从1.3.5版本开始，可以在dist目录下创建一个与编译的目标平台名同名的目录，并将结果放在这个目录下，例如编译到微信小程序，最终结果是在dist/weapp目录下，这样做的好处是，各个平台使用独立的目录互不影响，从而达到多端同步调试的目的，在config/index.js配置如下：

outputRoot:`dist/${process.env.TARO_ENV}`

参考地址：
1、官网 https://taro.aotu.io/
2、https://aotu.io/notes/2018/06/07/Taro/