什么是Taro

Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用。

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

其他描述，请参阅 Taro官方文档

安装及使用

CLI 工具安装

npm 5.2+ 也可在不全局安装的情况下使用 npx 创建模板项目 首先，你需要使用 npm 或者 yarn 全局安装 @tarojs/cli，或者直接使用 npx

# 使用 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 [项目名称]

npm 5.2+ 也可在不全局安装的情况下使用 npx 创建模板项目

$ npx @tarojs/cli init [项目名称]

创建步骤

步骤一: 输入项目介绍

步骤二: 选择使用的前端框架

步骤三: 选择是否使用 Typescript

步骤四: 选择使用css预编译模版

这边我使用了 Sass (使用什么模版都差不多，主要看个人爱好)

步骤五: 选择使用的编译工具

个人倾向Webpack5(毕竟是前端，紧跟时代，用最新的技术，总没错)

步骤六: 选择使用的包管理工具

纯粹看个人喜好，或者电脑是否安装了其他的(我这边根据自己的习惯，选择了npm)

步骤七: 选择模版源

npm 毕竟是国外的镜像源，下载速度较慢，如果不会科学上网，可以考虑 gitee 否则，可以找最新的 github

步骤八: 选择模版

选择使用的模版，这边可以配合UI框架直接使用(我这边选择配合NutUI一起使用，因此选择 react-NutUI 模版)

步骤九: 完成

只要看到了成功，就是安装成功，接下来，开始

项目结构

项目结构

|- config                                                  项目配置文件夹   
|-- dev.ts                                                 开发环境配置
|-- index.ts                                               全局配置
|-- prod.ts                                                生产环境配置
|- node_modules                                            依赖项
|- src                                                     项目主要内容
|-- pages                                                  页面主要内容
|--- index                                                 路径为 /index 的页面内容
|---- index.config.ts                                      路径为 /index 的页面配置项
|---- index.tsx                                            路径为 /index 的页面显示内容
|---- index.scss                                           路径为 /index 的页面 sass 预编译内容
|- types                                                   ts 类型 (ts忽略类型)
|- .gitignore                                              git忽略文件
|- babel.config.js                                         babel配置
|- package.json                                            项目启动 / 依赖管理
|- package-lock.json                                       npm 项目锁定内容 npm install 
|- project.config.json                                     微信配置
|- project.tt.json                                         头条配置
|- tsconfig.json                                           ts配置

项目配置

1.env配置

环境变量的有效使用可以让我们的代码非常的简洁 我们可以在项目 根目录 下创建 .env 文件 .env 项目基础环境变量 .env.development 开发环境下环境变量 .env.development 生产环境下环境变量 env 文件的后缀名称为环境名称 若当前环境名称和文件后缀相同，那么将以有后缀的环境变量为主 内容 请注意，只有以 TARO_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免和系统内置环境变量冲突。

TARO_APP_BASE_URL=/api/

2. tailwindcss配置

2.1 安装 tailwindcss

使用包管理器安装 tailwindcss 并初始化

# 使用你喜欢的包管理器 npm / yarn / pnpm  
$ npm install -D tailwindcss postcss autoprefixer  
# 初始化 tailwind.config.js 文件  
$ npx tailwindcss init

步骤一: 步骤二: 此时 根目录 下会创建一个 tailwind.config.js 文件

2.2 创建 postcss.config.js 并注册 tailwindcss

// postcss.config.js  
// postcss 插件是 object 方式注册的话，是按照由上到下的顺序执行的，相关实现见 postcss-load-config  
module.exports = {  
    plugins: {  
    tailwindcss: {},  
    autoprefixer: {},  
    },
}

2.3 配置 tailwind.config.js

tailwind.config.js 是 tailwindcss 的配置文件，我们可以在里面配置 tailwindcss 的各种行为。参考 tailwindcss官方文档配置项

2.4 引入 tailwindcss

在项目入口文件里引入 tailwindcss，比如 taro app 的 app.scss

2.5 rem 转 rpx (或 px) [选配，根据个人爱好]

因为 tailwindcss 里面工具类的长度单位，默认都是 rem，rem这个单位在 h5 环境下自适应良好。但小程序环境下，我们大部分情况都是使用 rpx 这个单位来进行自适应，所以就需要把默认的 rem 单位转化成 rpx。

2.5.1 配置 tailwindcss 单位转化

首先我们安装插件

# npm / yarn / pnpm 任意  
$ npm i -D postcss-rem-to-responsive-pixel

完成效果：

2.6 安装和配置 weapp-tailwindcss

什么是 weapp-tailwindcss ？它是一个让你在小程序环境中，使用 tailwindcss 大部分特性的一个 webpack, vite, gulp, postcss 插件集合。它支持目前上几乎所有主流的多端小程序框架和使用 webpack / gulp 的原生小程序开发打包方式。

总的来说 weapp-tailwindcss 使得你很容易在各个框架，或者原生开发中集成 tailwindcss。

2.6.1 安装插件

# npm / yarn /pnpm  
$ npm i -D weapp-tailwindcss  
# 执行一下 patch 方法  
$ npx weapp-tw patch

安装完成执行效果

2.6.2 添加脚本

把下列脚本，添加进你的 package.json 的 scripts 字段里:

{
    // 其他内容
    "scripts": {  
    // 其他内容
        "postinstall": "weapp-tw patch"  
    }
}

添加这段的用途是，每次安装包后，都会自动执行一遍 weapp-tw patch 这个脚本。

2.7 配置 tarojs

这个配置同时支持 tarojs 的 react / preact / vue2 / vue3 等等所有框架

提示 在使用 Taro 时，需要把 config/index 的配置项中的 compiler 设置为 'webpack5' 另外假如你使用了 taro-plugin-compiler-optimization 记得把它注释掉。因为和它一起使用时，它会使整个打包结果变得混乱。issues/123 issues/131

在项目的配置文件 config/index 中注册:

// config/index  
// const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack')  
// ts 版本  
import { UnifiedWebpackPluginV5 } from 'weapp-tailwindcss/webpack'  
{  
mini: {  
    webpackChain(chain, webpack) {  
        chain.merge({  
                plugin: {  
                    install: {  
                        plugin: UnifiedWebpackPluginV5,  
                        args: [{  
                            appType: 'taro'  
                        }]  
                    }  
                }  
            })  
        }  
    }  
}

然后正常运行项目即可，如果配置不成功，可以参考配置好的模板项目 taro-react-tailwind-vscode-template 进行排错。

我这边显示了报错，是因为我ts配置导致的

2.8 和 NutUI 一起使用

tarojs 使用 NutUI 的注意点: NutUI 需要配合 @tarojs/plugin-html 一起使用， 然而在和 @tarojs/plugin-html 一起使用时，默认配置下它会移除整个 tailwindcss 注入的 css var 区域块，这会造成所有 tw-* 相关CSS变量找不到，导致样式大量挂掉的问题。 此时可以使用 injectAdditionalCssVarScope 配置项，把它设为 true，这能在插件内部重新注入 tailwindcss css var 区域块。 另外也可以通过配置 postcss-html-transform 这个插件，来关闭它的 removeCursorStyle 选项。

// config/index.js  
config = {  
    // ...  
    mini: {  
        // ...  
        postcss: {  
            htmltransform: {  
                enable: true,  
                // 设置成 false 表示 不去除 * 相关的选择器区块  
                // 假如开启这个配置，它会把 tailwindcss 整个 css var 的区域块直接去除掉  
                config: {  
                    removeCursorStyle: false,  
                },  
            },  
        },  
    },  
}

完成效果

2.9 完成

现在我们尝试写下tsx模板:

<View className="text-[#acc855] text-[1rem]">Hello world!</View>

2.9.1 启动项目

目前我使用的 3.6.23 版本 在配置时，默认的配置有点问题，需要修改一下配置(大小写有问题)

接下来，调整一下编译目录(强迫症)

2.9.2 运行结果