代码目录结构

最后更新: 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的配置和包依赖管理。

名称作用
appRobot App的业务代码
dist打包后的OPK和符号表
imgRobot App中使用的图片
node_modulesRobot App中使用的第三方库的源代码
app.jsonRobot app的基本配置文件,不能修改
index.jsrobot app的入口文件
package.jsonnpm 包依赖管理

1.1 app目录组成

根目录下的app文件是Robot App的业务逻辑代码文件,它主要由一个biz文件夹和三个文件组成。

名称作用
bizRobot App的具体业务逻辑代码
App.jsRobot 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.tstrigger可以触发的事件声明
template/*Model.tsModel,存储绑定数据
template/*Interface.ts数据结构声明
biz/*/*Screen.ts上层业务逻辑入口文件
biz/*/业务代码
biz/trigger/*Trigger.ts负责当前任务跟主流程的对接
img/图片资源目录

3.如何根据目录结构实现具体业务

我们以首页业务为例,讲解一下实现一个具体业务需要依赖的文件。

3.1 home文件夹下存放的是首页的主要业务逻辑的实现文件。

  • 其中HomeEvent.ts负责从当前页面跳转至其他页面的事件定义。在处理页面跳转时,首先通过trigger发送HomeEvent中定义的不同事件,然后Hometrigger.ts文件根据接收到的不同事件进行处理,实现对应的页面跳转。
  • HomeProvider.ts文件中定义了首页业务模块的入口,负责首页业务使用到的各个组件的组合和初始化;
  • HomeView.ts文件负责首页页面的样式和渲染;
  • HomeViewModel.ts文件负责首页的业务逻辑实现。
  • 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中发送的事件,跳转到各个不同的页面