@ouyangdan/apicloud-demo NPM

apicloud-demo

项目介绍

一个基于apicloud2 + vue2 + webpack4的app框架，一套代码同时开发Android和iOS，且性能接近原生开发的应用。

快速开始

安装依赖
cnpm install
本地开发
npm run serve
浏览器预览
http://localhost:8888/home_index_header_frame.html

代码目录

├── assets                  // 静态资源，暂未使用
├── components              // 组件目录，按功能模块划分，如会员和门店
│   ├── member
│   │   ├── List.vue
│   │   ├── ListItem.vue
│   ├── store
│   │   ├── List.vue
│   │   ├── ListItem.vue
│   └── Home.vue
├── views                  // 页面目录，按功能模块划分，如会员和门店
│   ├── member             // 会员模块，包括首页(home)、会员信息(user_info)
│   │   ├── home           // 会员首页，包括首页window、首页frame
│   │   │   ├── main.js
│   │   │   ├── App.vue
│   │   │   ├── header_frame
│   │   │   │   ├── main.js
│   │   │   │   ├── App.vue
│   │   └── store_list    // 门店列表页面
│   │       ├── main.js
│   │       └── App.vue
│   └── store             // 门店模块，包括首页、门店列表等页面
│       ├── home
│       │   ├── main.js
│       │   ├── App.vue
│       └── store_list
│            ├── main.js
│            └── App.vue
├── service                  // 业务逻辑层，按照功能模块划分
│   ├── member
│   │   ├── IndexService.js
│   │   └── ***Service.js
│   └── store
│       ├── ***Service.js
│       └── ***Service.js

├── image                  // 图片目录，按照功能模块划分
│   ├── member
│   │   ├── back.png
│   │   ├── background.png
│   │   └── ***.png
│   └── store
│       ├── business.png
│       └── cancel.png
├── config                 // 环境配置，管理各个环境的接口域名
│   ├── index.js           // 入口配置文件
│   ├── develop.js         // 开发环境
│   ├── test.js            // 测试环境
│   └── prodoct.js         // 生产环境
└── util                   // 工具类，存放共用工具/封装的apicloud模块
    ├── app.js
    ├── http.js
    └── **module.js

src目录结构

目录解释

脚手架

每个子widget都是一个单独的项目。项目由vue-cli3.x提供的单页面脚手架生成。现在已经改造成适合APICloud2开发的多页面开发。项目用的工具有vue-cli3.4。需要单独引入的npm库有：echarts。

views目录

页面目录，存放所有的页面。一个页面包括一个window和多个frame，参考如何开发出优秀的APICloud应用。页面目录按照模块来进行划分，一个模块由多个页面构成。一个html文件对应一个模块下的子目录。一个页面的frame组件对应该页面下的一个子目录，一个页面可以有多个frame，即一个页面可以有多个以'_frame'结尾的子目录（约定以'_frame'结尾的html文件为frame组件）。如下图所示：

一个页面由一个window+多个frame构成。main.js所在的目录名称即为页面名称，页面经过webpack打包后的最终名称格式为：模块名称+'_'+页面名称+'_'+frame名称。如'store_home'，'home_header_frame'。页面中的frame组件必须定义在页面的子目录。页面下面必须存在main.js和App.vue文件，最终打包成的html文件由main.js+App.vue生成。

components目录

组件目录。该目录存放组成页面的所有自定义组件，按照模块来进行划分。components目录下的模块和views目录下的模块一一对应。原则上，views目录存在多少个模块，components目录就存在多少个模块。（好处是组件按照模块进行隔离，查找组件时一目了然，方便组件管理）

建议把多个模块共用的组件单独抽离出来，放到common目录下，方便跨模块调用和组件管理。

一个页面中如果存在重复或者相似的dom树结构，如列表中的每个列表项dom数结构一样，只是渲染的数据不同。这时就可以考虑将列表项单独抽离出来作为ListItem组件。如下图：

抽取后的页面代码如下：

service目录

业务逻辑层，负责对各个页面的业务逻辑进行处理。页面只负责数据渲染和界面交互。其它操作如接口请求、缓存数据的存取、金额数字的处理等业务逻辑操作都由业务逻辑层来管理。业务逻辑层对页面暴露对应的方法，页面只关注业务逻辑层返回的结果，涉及的复杂逻辑都由业务逻辑层处理完成后，再将对应的数据返回页面渲染。

config目录

环境配置目录。需要使用到域名的页面或工具类，统一通过在对应的文件引入config/index.js来获取，方便环境域名统一管理。

image目录

图片目录。项目中需要使用到的图片资源统一放到image目录，image目录按照功能模块进行划分。每个模块的图片放到对应的目录下，方便管理。若存在多个模块共用的图片资源，应该将该图片从模块抽离到common目录下。

util目录

工具类目录。存放可以在多个模块进行共用的工具类。建议由组长/负责人统一进行维护，其他人修改或增加内容时需要报备。（如在项目中添加了新的工具方法，需要在下面增加对应的介绍）

app.js  ── 重写api对象。当需要使用apicloud提供的api对象时，先从app.js中开始查找，若找不到对应的方法，则需要报备给组长/负责人，由组长/负责人进行统一添加和做相应的api兼容。方便我们的代码后面兼容web端和其他终端。

common.js  ── 存放模块公用方法。

http.js  ── 网络底层文件。请求后端接口时，统一引入该文件，然后调用该文件提供的ajax方法进行接口请求。底层方法已经实现了网络重试机制。

event.js  ──  自定义事件文件。调用apicloud提供的接口，实现自定义事件的发布、订阅、取消。

init.js  ── 存放Vue中自定义的filter。现有的filter满足不了需求，需要新增filter时，请先报备给负责人，由负责人统一添加。

storage.js  ── 数据缓存底层文件。对外提供操作localStorage的方法。禁止直接使用localStorage。需要使用数据缓存功能时，请使用该文件对外提供的方法。

time.js  ── 时间格式化工具。需要对时间进行格式化时，请使用该工具的提供的方法。若现有方法不足以满足需求时，请先报备给负责人，由负责人统一安排添加。

scanner.js   ──  封装的apicloud提供的FNScanner模块。需要引入apicloud提供的模块时，统一对该模块进行封装后，再提供给页面使用。方便apicloud模块的管理。