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