概述

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页面组。