什么是Taro
Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用。
现如今市面上端的形态多种多样,Web、React Native、微信小程序等各种端大行其道。当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。
其他描述,请参阅 Taro官方文档
安装及使用
CLI
工具安装
npm 5.2+ 也可在不全局安装的情况下使用 npx
创建模板项目
首先,你需要使用 npm 或者 yarn 全局安装 @tarojs/cli
,或者直接使用 npx
bash
# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# OR 安装了 cnpm,使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli
项目初始化
使用命令创建模板项目
bash
$ taro init [项目名称]
npm 5.2+ 也可在不全局安装的情况下使用 npx 创建模板项目
bash
$ npx @tarojs/cli init [项目名称]
创建步骤
步骤一: 输入项目介绍
步骤二: 选择使用的前端框架
步骤三: 选择是否使用 Typescript
步骤四: 选择使用css预编译模版
这边我使用了 Sass
(使用什么模版都差不多,主要看个人爱好)
步骤五: 选择使用的编译工具
个人倾向Webpack5
(毕竟是前端,紧跟时代,用最新的技术,总没错)
步骤六: 选择使用的包管理工具
纯粹看个人喜好,或者电脑是否安装了其他的(我这边根据自己的习惯,选择了npm
)
步骤七: 选择模版源
npm
毕竟是国外的镜像源,下载速度较慢,如果不会科学上网,可以考虑 gitee
否则,可以找最新的 github
步骤八: 选择模版
选择使用的模版,这边可以配合UI框架直接使用(我这边选择配合NutUI一起使用,因此选择 react-NutUI
模版)
步骤九: 完成
只要看到了成功,就是安装成功,接下来,开始
项目结构
项目结构
lua
|- 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
静态地嵌入到客户端侧的代码中。这是为了避免和系统内置环境变量冲突。
env
TARO_APP_BASE_URL=/api/
2. tailwindcss配置
2.1 安装 tailwindcss
使用包管理器安装 tailwindcss
并初始化
bash
# 使用你喜欢的包管理器 npm / yarn / pnpm
$ npm install -D tailwindcss postcss autoprefixer
# 初始化 tailwind.config.js 文件
$ npx tailwindcss init
步骤一: 步骤二: 此时 根目录
下会创建一个 tailwind.config.js
文件
2.2 创建 postcss.config.js
并注册 tailwindcss
js
// 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
单位转化
首先我们安装插件
bash
# 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 安装插件
bash
# npm / yarn /pnpm
$ npm i -D weapp-tailwindcss
# 执行一下 patch 方法
$ npx weapp-tw patch
安装完成执行效果
2.6.2 添加脚本
把下列脚本,添加进你的 package.json
的 scripts
字段里:
json
{
// 其他内容
"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
中注册:
js
// 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
选项。
js
// config/index.js
config = {
// ...
mini: {
// ...
postcss: {
htmltransform: {
enable: true,
// 设置成 false 表示 不去除 * 相关的选择器区块
// 假如开启这个配置,它会把 tailwindcss 整个 css var 的区域块直接去除掉
config: {
removeCursorStyle: false,
},
},
},
},
}
完成效果
2.9 完成
现在我们尝试写下tsx
模板:
tsx
<View className="text-[#acc855] text-[1rem]">Hello world!</View>
2.9.1 启动项目
目前我使用的
3.6.23
版本 在配置时,默认的配置有点问题,需要修改一下配置(大小写有问题)
接下来,调整一下编译目录(强迫症)