1.安装Taro
1.使用 npm 或者 yarn 全局安装 @tarojs/cli
$ npm install -g @tarojs/cli
$ yarn global add @tarojs/cli
2.项目初始化:
taro init myApp
编译运行
使用 Taro 的 build 命令可以把 Taro 代码编译成不同端的代码,然后在对应的开发工具中查看效果。
Taro 编译分为 dev 和 build 模式:
dev 模式(增加 --watch 参数) 将会监听文件修改。
build 模式(去掉 --watch 参数) 将不会监听文件修改,并会对代码进行压缩打包。
dev 模式生成的文件较大,设置环境变量 NODE_ENV 为 production 可以开启压缩,方便预览,但编译速度会下降。
3.内置环境变量
Taro 在编译时提供了一些内置的环境变量来帮助用户做一些特殊处理。
process.env.TARO_ENV用于判断当前的编译平台类型。
取值:weapp / swan / alipay / tt / qq / jd / h5 / rn
可以通过这个变量来区分不同环境,从而使用不同的逻辑。
在编译阶段,会移除不属于当前编译类型的代码,只保留当前编译类型下的代码,例如:
1. 在微信小程序和 H5 端分别引用不同资源:
源码
if (process.env.TARO_ENV === 'weapp') {
require('path/to/weapp/name')
} else if (process.env.TARO_ENV === 'h5') {
require('path/to/h5/name')
}
编译后(微信小程序)
if (true) {
require('path/to/weapp/name')
}
编译后(H5)
if (true) {
require('path/to/h5/name')
}
2. 决定不同端要加载的组件
源码(React JSX)
<View>
{process.env.TARO_ENV === 'weapp' && <ScrollViewWeapp />}
{process.env.TARO_ENV === 'h5' && <ScrollViewH5 />}
</View>`
编译后(微信小程序)
<View>
{true && <ScrollViewWeapp />}
</View>
编译后(H5)
<View>
{true && <ScrollViewH5 />}
</View>
组件文件中跨平台支持指定平台保留样式:
/* #ifdef %PLATFORM% */
模板代码
/* #endif */
指定平台剔除样式:
/* #ifndef %PLATFORM% */
模板代码
/* #endif */
标签:taro,process,weapp,h5,编译,api,ENV,vue3,Taro
From: https://www.cnblogs.com/mydevelop/p/18068241