@ouyangdan/apicloud-demo
v0.1.30
Published
apicloud2 + vue2
Downloads
49
Readme
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模块的管理。
appConfig.js
存放项目需要用到的默认配置文件。