# resume **Repository Path**: icerupt/resume ## Basic Information - **Project Name**: resume - **Description**: No description available - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2016-06-16 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README = 移动app开发说明文档 徐旗江 学号 913106840320 班级 9131065502 :toc: <<<< == 功能说明 - 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 从后台回到前台触发 |=== == 部分使用说明 === 侧栏 从左侧边缘向右滑动可以呼出侧栏菜单。这里的边缘是指屏幕边界内靠近边缘出，因为android手机在屏幕边界外可能没有触控感应。 === 滑动切换 在空白处上下滑动可以完成不同页的切换，如果一页内有很多子页面内容可以通过左右滑动切换。 有左右滑动的页面也有两个左右箭头，也可以通过点击箭头完成切换。 === 个人简介页面 点击个人简介卡片上的照片可以渐变显示一个contact按钮，点击可以通过Telegram联系我。 === 奖项页面 点击具体奖项有动态响应效果 === 图片展示页面 为了用更清楚的照片方便的展示，没有拍自己的证书作为图片，而是网上的图片。 点击图片会进入另一个视窗，双击或两个手指的拖动(pinch)可以放大。点击返回键或者右上角的'X'可以返回。 === 微博加关注 微博加关注可以点上面那个小的关注按钮，使用的是微博组建。因为微博sdk里面已经不在提供对初级权限的关注接口（仅对微博类客户端开放）。 === 微博授权登录 我在open weibo上注册了一个app，并没有什么功能，只是提供了个移动接口，作为测试。 == 测试平台 1. flyme5.2.1.0A Android 6.0 2. MIUI 8 6.6.30 Android 5.0.2 3. Samsung GT-N7108 Android 4.3 == 演示截图 === 启动画面 image::img/splash.jpg[width=200, height=340] === 主页面 image::img/home.jpg[width=200, height=340] <<<< === 个人简介 image::img/motto.jpg[width=200, height=340] === 图片展示 image::img/pic.jpg[width=200, height=340] <<<< === 图片放大 单击图片，既可进入可放大缩小的界面。 image::img/pic-zoom.jpg[width=200, height=340] === 视频展示 image::img/video.jpg[width=200, height=340] <<<< === 微博 微博头像，关注微博，最新微博 image::img/weiboxiu.jpg[width=200, height=340] 微博sso授权登录，分享 image::img/weibo-sso.jpg[width=200, height=340] <<<< 检测本地微博客户端 image::img/check.jpg[width=200, height=340] sso授权登录页面 image::img/sso-login.jpg[width=200, height=340] <<<< === 横屏 视频横屏 image::img/video-rot.jpg[width=340, height=200] 文字横屏 image::img/honor-rot.jpg[width=340, height=200] === 网络状态 断开连接 image::img/offline.jpg[width=200, height=340] <<<< 无网络连接 image::img/no-network.jpg[width=200, height=340] 重新连接网络 image::img/online.jpg[width=200, height=340] <<<< === 退出应用 image::img/quit.jpg[width=200, height=340]