前端开发框架“taro”从入门到爆哭--入门边缘试探篇
目录
项目目录结构
编译配置
配置文件说明
设计稿及尺寸单位说明
Page页面代码
APP主体、入口、全局配置
全局配置
window
tabBar
subPackages
常用CLI命令
环境检测和依赖检测
快速创建page
注意：下文都以taro-react-tpyescript项目为例
项目目录结构
├── dist 编译结果目录
|
├── config 项目编译配置目录
| ├── index.ts 默认配置
| ├── dev.ts 开发环境配置/项目预览配置
| └── prod.ts 生产环境配置/项目打包配置
|
├── src 源码目录
| ├── pages 页面文件目录
| | └── index index 页面目录
| | ├── index.tsx index 页面逻辑
| | ├── index.scss index 页面样式
| | └── index.config.ts index 页面配置
| |
| ├── app.tsx 项目入口文件
| ├── app.scss 项目全局通用样式
| └── app.config.ts 项目入口配置、全局配置
|
├── project.config.json 微信小程序项目配置 project.config.json
├── project.tt.json 抖音小程序项目配置 project.tt.json
|
├── babel.config.js Babel 配置
├── tsconfig.json TypeScript 配置
├── .eslintrc ESLint 配置
|
└── package.json
编译配置
上述标黄部分为编译配置，用于配置taro项目的编译行为、打包的配置等。
配置文件说明
// config/index.js
const config = {
// 项目名称
projectName: 'my-taro-project',
// 项目创建日期
date: '2023-12-16',
// 设计稿尺寸
designWidth: 750,
// 设计稿尺寸换算规则
deviceRatio: {
640: 2.34 / 2,
750: 1,
828: 1.81 / 2
},
// 项目源码目录
sourceRoot: 'src',
// 项目产出目录
outputRoot: 'dist',
// Taro 插件配置
plugins: [],
// 全局变量设置
defineConstants: {
GLOBAL_CONSTANT = '全局可用'
},
// 文件 copy 配置
copy: {
patterns: [],
options: {}
},
// 框架，react，nerv，vue, vue3 等
framework: 'react',
compiler: 'webpack5',
cache: {
enable: false // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
},
// 小程序端专用配置
mini: {
postcss: {
// 像素转换规则，参考：https://nervjs.github.io/taro-docs/docs/size
pxtransform: {
enable: true,
config: {}
},
// 小程序端样式引用本地资源内联配置
url: {
enable: true,
config: {
limit: 1024,
}
},
cssModules: {
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
config: {
namingPattern: 'module', // 转换模式，取值为 global/module
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
}
},
// H5 端专用配置
h5: {
publicPath: '/',
staticDirectory: 'static',
postcss: {
autoprefixer: {
enable: true,
config: {}
},
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'))
}设计稿及尺寸单位说明
在上节配置文件中有这样几行配置：
// 设计稿尺寸
designWidth: 750,
// 设计稿尺寸换算规则
deviceRatio: {
640: 2.34 / 2,
750: 1,
828: 1.81 / 2
},taro中，尺寸单位建议使用px和%（百分比）。按照上述配置就是设计稿750px，那么实际开发过程中，最好就是设计稿开发成750px的，然后view设置宽高的时候，就直接按照设计稿上的尺寸进行设置就可以了。
在转换成小程序的时候，px会对应转换成小程序的尺寸单位，如px->rpx等。如果希望不被转换，那么可以用Px/PX，自动转换只会针对px（大小写区分）进行转换。
而在deviceRatio中，则是根据你的designWidth来匹配的，如果 designWidth = 640，那么taro会按照2.34/2的比例进行转换。如果你的设计稿尺寸在里面没有，则可以新增，如常见的375，那么需要再deviceRatio里面新增：
// 设计稿尺寸
designWidth: 375,
// 设计稿尺寸换算规则
deviceRatio: {
375: 2 / 1
640: 2.34 / 2,
750: 1,
828: 1.81 / 2
},Page页面代码
上述标蓝部分为实际展示的page页面的代码目录。
xx.tsx（页面逻辑） - xx.scss（页面样式） - xx.config.ts（页面配置），三个文件组成了一个page页面。
APP主体、入口、全局配置
上述标绿部分为APP的主体入口，以及全局样式和配置。
全局配置
// app.config.ts
export default defineAppConfig({
// 页面路径列表
// 每次新增页面，都需要在pages数组中添加新的路径！
pages: ['pages/index/index'],
// 默认窗口表现
window: {
//
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black',
},
// 底部tab栏表现
tabBar: {
},
// 分包结构配置
subPackages: {
}
})window
引用自官网
属性 类型 默认值 描述 navigationBarBackgroundColor HexColor（十六进制颜色值） #000000 导航栏背景颜色，如 #000000 navigationBarTextStyle String white 导航栏标题颜色，仅支持 black / white navigationBarTitleText String 导航栏标题文字内容 navigationStyle String default 导航栏样式，仅支持以下值：default 默认样式；custom 自定义导航栏，只保留右上角胶囊按钮 backgroundColor String 窗口的背景色 backgroundTextStyle String dark 下拉 loading 的样式，仅支持 dark / light backgroundColorTop String #ffffff 顶部窗口的背景色，仅 iOS 支持 backgroundColorBottom String #ffffff 底部窗口的背景色，仅 iOS 支持 enablePullDownRefresh boolean false 是否开启当前页面的下拉刷新。 onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离，单位为 px pageOrientation String portrait 屏幕旋转设置，支持 auto / portrait / landscape 详见 响应显示区域变化 各端支持程度如下
属性 微信 百度 字节跳动 支付宝 H5 RN navigationBarBackgroundColor ✔️ ✔️ ✔️ ✔️ ✔️ ✔️ navigationBarTextStyle ✔️ ✔️ ✔️ ✘ ✔️ ✔️ navigationBarTitleText ✔️ ✔️ ✔️ ✔️ ✔️ ✔️ navigationStyle ✔️（微信客户端 6.6.0） ✔️（百度 App 版本 11.1.0） ✔️ ✘ ✘ ✘ backgroundColor ✔️ ✔️ ✔️ ✘ ✘ ✘ backgroundTextStyle ✔️ ✔️ ✔️ ✘ ✘ ✘ backgroundColorTop ✔️（微信客户端 6.5.16） ✘ ✔️ ✘ ✘ ✘ backgroundColorBottom ✔️（微信客户端 6.5.16） ✘ ✔️ ✘ ✘ ✘ enablePullDownRefresh ✔️ ✔️ ✔️ ✔️ ✘ ✘ onReachBottomDistance ✔️ ✔️ ✔️ ✘ ✘ ✘ pageOrientation ✔️ 2.4.0 (auto) / 2.5.0 (landscape) ✘ ✘ ✘ ✘ ✘
tabBar
引用自官网：
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
其配置项如下
属性 类型 必填 默认值 描述 color HexColor（十六进制颜色值） 是 tab 上的文字默认颜色，仅支持十六进制颜色 selectedColor HexColor（十六进制颜色值） 是 tab 上的文字选中时的颜色，仅支持十六进制颜色 backgroundColor HexColor（十六进制颜色值） 是 tab 的背景色，仅支持十六进制颜色 borderStyle String 是 black tabbar 上边框的颜色， 仅支持 black / white list Array 是 tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab position String 否 bottom tabBar 的位置，仅支持 bottom / top custom Boolean 否 false 自定义 tabBar 其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：
属性 类型 必填 描述 pagePath String 是 页面路径，必须在 pages 中先定义 text String 是 tab 上按钮文字 iconPath String 否 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。
当 position 为 top 时，不显示 icon。selectedIconPath String 否 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。
当 position 为 top 时，不显示 icon。各端支持程度如下
属性 微信 百度 字节跳动 支付宝 H5 RN color ✔️ ✔️ ✔️ ✔️ ✔️ ✔️ selectedColor ✔️ ✔️ ✔️ ✔️ ✔️ ✔️ backgroundColor ✔️ ✔️ ✔️ ✔️ ✔️ ✔️ borderStyle ✔️ ✔️ ✔️ ✘ ✔️ ✔️ list ✔️ ✔️ ✔️ ✔️ ✔️ ✔️ position ✔️ ✘ ✔️ ✘ ✘ ✘ custom ✔️（基础库 2.5.0 以上） ✘ ✘ ✘ ✘ ✘
subPackages
引用自官网：
H5 和 RN 会把
subPackages合入pages启用分包加载时，声明项目分包结构
在上文基础上，还有一部分个别小程序特有的属性，大家可以自行去官网查阅：全局配置 | Taro 文档
常用CLI命令
环境检测和依赖检测
# 会打印出项目的开发环境、依赖等，方便开发人员快速定位问题。
taro info
# 开发环境检测、项目依赖、设置等检测、代码规范检测
# 与flutter doctor等工具效果类似
taro doctor快速创建page
# 能够在pages目录下快速生成新页面，并填充基础代码
# 方便，得会！
taro create --name[页面名称]会自动尝试同步修改app.config.ts文件中的pages字段