taro
- NervJS/taro
- MIT, TS, JS
- React/Vue/Nerv -> 微信/京东/百度/支付宝/字节跳动/QQ/飞书 小程序 或 H5/RN
- 实现参考 react-reconciler
- 实现了类似的逻辑接口
- 插件系统 webpack/tapable
- CSS in JS linaria
- 支持预渲染 - 类似 SSR
- 参考
- NervJS/taro-ui - React
- jdf2e/NutUI - 京东风格, Vue3
- NervJS/awesome-taro
- NervJS/taro-plugin-inject
警告
- 不支持 data-attr #11530
- 不会转译外部依赖
- 例如
??
,?.
- 例如
npm install -g @tarojs/cli
# npm install -g mirror-config-china
# npx -y @tarojs/cli init my-app
# taro init my-app
npx -y @tarojs/cli init --name my-app --typescript --description ''
cd my-app
# 微信小程序
# ==========
# 下载 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
# 选择根目录下 dist
# 关闭 ES6 转 ES5
# 关闭上传代码时样式自动补全
# 关闭代码压缩上传
pnpm dev:weapp
NODE_ENV=production pnpm dev:weapp
Taro.ENV_TYPE;
const { app, route, page } = Taro.Current;
type | for |
---|---|
ALIPAY | 支付宝小程序 |
JD | 京东小程序 |
QQ 小程序 | |
SWAN | 百度小程序 |
TT | 字节跳动小程序 |
WEAPP | 微信小程序 |
RN | React Native |
WEB | Web |
tailwindcss
- https://github.com/windedge/taro-tailwind
- https://github.com/pcdotfan/taro-plugin-tailwind
- https://learnku.com/articles/60035
多端
app | 平台自己 | taro |
---|---|---|
微信小程序 | project.config.json | project.config.json |
百度小程序 | project.swan.json | project.swan.json |
字节跳动小程序 | project.config.json | project.tt.json |
QQ 小程序 | project.config.json | project.qq.json |
支付宝小程序 | mini.project.json | project.alipay.json |
京东小程序 | ||
飞书小程序 | project.config.json | project.lark.json |
config
- 会自动加载的环境变量
TARO_APP_
- 使用 webpack.DefinePlugin 的方式静态替代
.env
.env.local
.env.[mode]
.env.[mode].local
env | for |
---|---|
TARO_APP_ID | |
TARO_ENV | 运行的环境 |
Taro.env
- USER_DATA_PATH=http://usr