[Taro入门:2] 项目目录框架介绍

1,066 阅读2分钟

前置文章链接:[Taro入门:1] 环境准备及项目初始化

一、目录结构

├── dist                            编译结果目录
├── config                          配置目录
|   ├── dev.js                      开发时配置
|   ├── index.js                    默认配置
|   └── prod.js                     打包时配置
├── src                             源码目录
|   ├── pages                       页面文件目录
|   |   ├── index                   index 页面目录
|   |   |   ├── index.js            index 页面逻辑
|   |   |   └── index.scss          index 页面样式
|   |   |   └── index.config.js     index 页面配置
|   ├── app.scss                    项目总通用样式
|   └── app.js                      项目入口文件
|   └── app.config.js               全局配置文件
└── project.config.json             项目配置文件
└── package.json

二、入口组件 app.js

每一个 Taro 应用都需要一个入口组件用来注册应用,入口文件默认是 src 目录下的 app.js。

在 Taro 中使用 React,入口组件必须导出一个 React 组件。

在入口组件中我们可以设置全局状态或访问小程序入口实例的生命周期。

三、全局配置文件 app.config.js

app.config.js会被taro编译成app.json,对应微信小程序中的全局配置文件

因此app.config.js中的配置规范也与微信小程序的全局配置规范保持一致。

介绍几个常用的核心配置项:

3.1:pages

pages属性是一个数组,用于表示小程序中的页面路径列表,新增/删除页面都应该更改此数组。

3.2:window

window属性是一个对象,用于设置小程序的状态栏、导航条、标题、窗口背景色。

详细属性可以查看:taro-docs.jd.com/taro/docs/t…

3.3:tabBar

tabBar属性是一个对象,用于指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

3.4:permission

permission属性是一个对象,微信小程序接口权限相关设置,比如:位置权限。

此处只列举了几个目前常用配置,详细的可以参考官方文档

四、页面配置文件 index.config.js

index.config.js会被taro编译成index.json,用于对本页面的窗口表现进行配置。

页面中配置项在当前页面会覆盖 app.config.js 的 window 中相同的配置项。