代码目录结构
最后更新: 2020/7/27本节以 Robot App的默认工程为例,介绍Robot App工程的文件结构,以及每种文件类型的作用。
1.基础文件介绍
首先一个Robot App根目录下包含四个主要的文件夹和三个重要的文件。
工程的业务代码存放在app目录中,打包后生成的OPK文件和它相对应的符号表文件存放在dist中,工程中使用的图片文件放到img文件夹中,node_modules中存放的是项目中所使用的第三方库。
app.json是Robot App的基本配置文件,index.js 是Robot App的入口文件,package.json 包含着Robot App的配置和包依赖管理。
名称 | 作用 |
app | Robot App的业务代码 |
dist | 打包后的OPK和符号表 |
img | Robot App中使用的图片 |
node_modules | Robot App中使用的第三方库的源代码 |
app.json | Robot app的基本配置文件,不能修改 |
index.js | robot app的入口文件 |
package.json | npm 包依赖管理 |
1.1 app目录组成
根目录下的app文件是Robot App的业务逻辑代码文件,它主要由一个biz文件夹和三个文件组成。
名称 | 作用 |
biz | Robot App的具体业务逻辑代码 |
App.js | Robot App的入口页面 |
navigation.js | 页面的路由和跳转 |
RootStore.js | 全局变量的定义 |
1.2 biz目录
app目录下的biz存放的各个具体业务的实现,根据模版不同,可能会包含首页,导航等等,用户自定义的业务实现代码也应该放到这个目录之下。
其中,比较重要的是Models和triggers目录。Models中存放的是各个业务的数据模型,而triggers则包含着各个业务页面的跳转逻辑的实现。
名称 | 作用 |
common | 通用控件 |
const | 常量定义 |
datacenter | 与后台数据同步与更新 |
globaview | 全局控件 |
models | 各个业务的数据模型 |
page | 语音识别出文字实现在屏幕上的控件 |
styles | 通用的样式 |
test | 单元测试 |
triggers | 页面跳转逻辑 |
utils | 埋点和数据上报 |
2.模板的目录结构
注:(*=模板名称)
目录 | 必须 | 作用 |
template/*Provider.ts | 是 | 封装能力组件,模板逻辑入口 |
template/*ViewModel.ts | 是 | 模板的业务逻辑 |
template/*Voice.ts | 是 | 对接语音交互 |
template/*Event.ts | 否 | trigger可以触发的事件声明 |
template/*Model.ts | 是 | Model,存储绑定数据 |
template/*Interface.ts | 否 | 数据结构声明 |
biz/*/*Screen.ts | 是 | 上层业务逻辑入口文件 |
biz/*/ | 是 | 业务代码 |
biz/trigger/*Trigger.ts | 是 | 负责当前任务跟主流程的对接 |
img/ | 否 | 图片资源目录 |
3.如何根据目录结构实现具体业务
我们以首页业务为例,讲解一下实现一个具体业务需要依赖的文件。

3.1 home文件夹下存放的是首页的主要业务逻辑的实现文件。
3.2 Model/HomeModel.ts文件负责首页业务的数据模型。
3.3 triggers/Hometrigger.ts负责首页到其他页面的跳转。
具体的实现方式:trigger文件实现了对react-navigation的封装。页面间的路由是通过trigger发送HomeEvent.ts中定义的事件,在Hometrigger.ts接收到相应的事件之后,根据不同的跳转事件,调用 react-navigation的相应接口,最终实现页面的跳转。
名称 | 是否必须 | 作用 |
xxx/xxxEvent | 否 | 从当前页面跳转至其他页面的事件定义(在trigger中使用) |
xxx/xxxProvider | 是 | 当前页面模块的入口,负责各个组件的组合和初始化 |
xxx/xxxView | 是 | 业务模块的UI显示 |
xxx/xxxViewModel | 否 | 负责模块的业务逻辑控制 |
xxx/xxxVoice | 否 | 负责业务模块语音识别的相关功能 |
models/xxxModel | 否 | 业务模块的数据模型 |
triggers/xxxtrigger | 是 | 当前业务模块的页面跳转控制,通过接收xxxEvent中发送的事件,跳转到各个不同的页面 |