移动app开发说明文档

Table of Contents

功能说明
架构说明
部分使用说明
测试平台
演示截图

功能说明

android移动app，包含：
1. 背景音乐的播放（进入后台自动停止）；
2. 视频播放；
3. 图片查看，点击打开可以缩放；
4. 文字内容介绍；
5. 微博关注和最新微博，微博sso授权登录和发微博；
6. 侧栏菜单（从边缘划出）；
7. 滑动切页（上下滑动）；
8. 晃动（摇一摇）切页；
9. 网络状态检测及提醒；
10. 退出确认提醒；
11. 整体简洁美观的前端设计；
12. 安装包小于5Mb。

架构说明

使用 PhoneGap/Cordova 进行跨平台开发，开发web app可以导出到任意平台，本项目中只导出了 Android 平台。

前端使用 jQuery 以及 jQuery Mobile 作为本项目简单的 SAP(Single-Page Applications) 框架。使用 Semantic UI 以及 fullPage.js 作为前端设计框架。当然还使用到了 Video.js(HTML5 Video Player Framework), Hammer.js(for touch gestures), 以及 jQuery UI。

前端架构

首先，用 fullPage.js 可以实现 app 的滑动切页，每一页是一个 section，每个 section 还能有横向的 slide 继续切换。在这个基础上，使用 Semantic UI 进行 responsive 的 web 设计，使用到了各式各样的 Semantic 提供的组件，包括侧边栏菜单。侧边栏菜单绑定到了第一页左上角的菜单按钮，可以点击这个按钮触发，也可以通过在屏幕右边缘向右滑动触发，这是通过 Hammer.js 对手势的支持实现的。

后端架构

整个后端（没有太分离的后端）在 index.js 里，核心部分由 cordova 的事件支持。我们先列举一下使用到的 cordova plugin。

cordova plguin	作用
cordova-plugin-battery-status	检测电源状态
cordova-plugin-camera	为选择图片或者拍照提供接口
cordova-plugin-compat	cordova向后兼容问题
cordova-plugin-console	console.log()
cordova-plugin-device	定义为全局 device 对象，描述硬件信息
cordova-plugin-device-motion	提供对设备加速度传感器的接口，来感知设备移动
cordova-plugin-dialogs	提供一些本地化的 dialog ui
cordova-plugin-file	可以对设备上的文件进行读写
cordova-plugin-inappbrowser	提供显示 web 浏览器的浏览
cordova-plugin-media	可以对音频文件进行播放或者录制
cordova-plugin-network-information	可以探测设备网络信息
cordova-plugin-shake	可以以不同灵敏度感知设备摇晃
cordova-plugin-splashscreen	启动画面
cordova-plugin-whitelist	为应用访问外部网站提供白名单指南
cordova-plugin-x-toast	可以显示一个可应以样式的toast(文字弹框)
cordova-plugin-weibo	新浪sdk的封装插件，可以sso login和分享发送微博

项目目录结构

项目二目录结构如下：

tree -L 2

.
├── config.xml
├── doc
│   ├── readme.asciidoc
│   └── readme.html
├── hooks
│   └── README.md
├── platforms
│   ├── android
│   ├── browser
│   └── platforms.json
├── plugins
│   ├── android.json
│   ├── browser.json
│   ├── cordova-plugin-battery-status
│   ├── cordova-plugin-camera
│   ├── cordova-plugin-compat
│   ├── cordova-plugin-console
│   ├── cordova-plugin-device
│   ├── cordova-plugin-device-motion
│   ├── cordova-plugin-dialogs
│   ├── cordova-plugin-file
│   ├── cordova-plugin-inappbrowser
│   ├── cordova-plugin-media
│   ├── cordova-plugin-network-information
│   ├── cordova-plugin-shake
│   ├── cordova-plugin-splashscreen
│   ├── cordova-plugin-weibo
│   ├── cordova-plugin-whitelist
│   ├── cordova-plugin-x-toast
│   └── fetch.json
├── res
│   └── screen
└── www
    ├── assets
    ├── css
    ├── img
    ├── index.html
    ├── js
    └── node_modules

platforms 下是本项目测试的平台，包括 web browser 和 android 端； plugin 下面就是刚刚列举的 cordova plugin，res 下面是一些项目的资源； www 下面就是 web app 的主要内容，保护 html, css, js 以及 web app 所需要的资源（图片）。 (因为要使得导出小于5M，所以空间占用大的资源（如：视频）都使用了在线资源。) doc 下就是项目文档。

功能实现

功能	实现
背景音乐	使用 cordova media plugin
视频	使用 video.js HTML5 视频，宽度适应屏幕。和音频一起，维护全局单例
照片，图片	用 fullpage 的 slide 显示不同图片，使用 inappbrowser 实现图片缩放
侧栏菜单	semantic responsive sidebar，用 hammer.js 实现手势从边缘划出菜单
摇动切换	利用 cordova shake 插件，感应摇动，实现上下周期切换页
检测网络状态	利用 cordova network 插件，如果没有网络发一个 toast 提醒，如果网络断开也发送一个 toast 提醒，如果网络重新连接，刷新页面
横竖屏，多分辨率适应	这个 web app 是 responsive 的，所以可以做到自适应
启动动画	cordova splash screen 即可实现，不过实现准备好各种分辨率的 splash screen 图片就好
微博	用微博的 web widget 可以插入关注和最新微博的代码
渐变背景	用 css3 就可以实现背景的渐变
sso授权登录微博，发生微博，检测本地是否有微博客户端	使用cordova-plugin-weibo对微博sdk封装的api
后台暂停媒体	监听到pause事件表示应用被切到后台，暂停全局媒体播放

corodva 监听事件

事件	说明
deviceready	当 Cordova 完全加载的时候触发
online	当网络连接时触发
offline	当网络断开时触发
backbutton	当返回键按下时触发
pause	当 app 被放到后台时触发
resume	当 app 从后台回到前台触发