npm package: @ouyangdan/apicloud-demo
Description: apicloud2 + vue2
Latest version: 0.1.30

# apicloud-demo

## 项目介绍

​		一个基于apicloud2 + vue2 + webpack4的app框架，一套代码同时开发Android和iOS，且性能接近原生开发的应用。

## 快速开始

1. 安装依赖

   `cnpm install`

2. 本地开发

   `npm run serve`

3. 浏览器预览

   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应用](https://docs.apicloud.com/APICloud/app-guide)。页面目录按照模块来进行划分，一个模块由多个页面构成。一个`html文件`对应一个模块下的子目录。一个页面的`frame组件`对应该页面下的一个子目录，一个页面可以有`多个frame`，即一个页面可以有多个以`'_frame'`结尾的子目录（约定以`'_frame'`结尾的`html文件`为`frame组件`）。如下图所示：

![image-20210819144327343](C:\code\linkkap\neiyiyun\apicloud-demo\assets\README\image-20210819144327343.png)

一个页面由`一个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`组件。如下图：

![image-20210819145447545](C:\code\linkkap\neiyiyun\apicloud-demo\assets\README\image-20210819145447545.png)



抽取后的页面代码如下：

![image-20210819145509290](C:\code\linkkap\neiyiyun\apicloud-demo\assets\README\image-20210819145509290.png)



### service目录

​		业务逻辑层，负责对各个页面的业务逻辑进行处理。页面只负责数据渲染和界面交互。其它操作如接口请求、缓存数据的存取、金额数字的处理等业务逻辑操作都由业务逻辑层来管理。业务逻辑层对页面暴露对应的方法，页面只关注业务逻辑层返回的结果，涉及的复杂逻辑都由业务逻辑层处理完成后，再将对应的数据返回页面渲染。



### config目录

​		环境配置目录。需要使用到域名的页面或工具类，统一通过在对应的文件引入config/index.js来获取，方便环境域名统一管理。

![image-20210819144530412](C:\code\linkkap\neiyiyun\apicloud-demo\assets\README\image-20210819144530412.png)



### 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模块的管理。
```



### appConfig.js

​		存放项目需要用到的默认配置文件。