# 概述

Apicloud平台基于web前端技术构建混合开发app，我公司历经多个项目实践，总结出一套开发框架，方便在 日后的开发中提升工作效率，由于前端的限制，框架中更多的是规范、约束。

# 项目文件结构

Demo
|-html
|-css
   |-api.css
   |-components
|-script
   |-plugin
   |-components
   |-api.js
   |-common.js
   |-fastclick.js
   |-lib-flexible.js
   |-vue.min.js
|-image
|-config.xml
|-index.html
|-index.json

# api.css

api.css 是apicloud项目自动生成的文件，主要起到去除原生样式的作用。在开发工程中会将公共的样式放在此文件中。

# css/components

components文件夹中存放vue组件的样式文件，例如：nf_listview.css。

# script/plugin

plugin文件夹中存放Vue.prototype.xxx初始化的独立存在的类文件，例如：player播放器类、埋点类

# script/components

components文件夹中存放vue组件的js文件，例如：nf_listview.js。

# script/api.js

api.js是apicloud项目自动生成的文件，其中封装了dom操作方法和一些js操作方法，代替jquery或zepto。

# script/common.js

包含公共js函数，通过vue.mixin混入进当前页面的vue对象中，方便使用。

# script/fastclick.js

取消IOS移动端点击事件300ms延迟

# script/lib-flexible.js

统一使用rem单位进行布局，iphone6 1rem = 20px，其他尺寸屏幕上1rem = Xpx。

# script/vue.min.js

核心工具。

# html/*

存放业务相关页面，以文件夹形式区分不同的模块

components
  |-alert.html
  |-actionsheet.html
  |-confirm.html
tab1
  |-index.html
  |-index.css
  |-index.js
tab2
  |-index.html
  |-index.css
  |-index.js
tab3
  |-index.html
  |-index.css
  |-index.js

components文件夹存放由api.openFrame打开的页面，设置背景透明实现一些弹窗效果， 非常实用，单独存放组件由其他页面调用。

index.html和index.css、index.js组成一个完整的页面，为了代码的工整和阅读起来容易， 将css单独存放，html中只存放dom结构和vue的实例，js中以Vue.prototype.$service = {}存放一些函数的调用， 从而将前端结构分为两层，在html由app.$service.init_data()调用service层函数。

# config.xml

应用入口，定义整体参数和入口。

# index.html

在index.json中定义的入口文件，在程序的最底层，作为永久存在的文件，可以放全局变量与其他页面共享

# index.json

新增的入口文件，定义底部tab栏和顶部导航栏，默认生成framegroup页面组。