移动校园Hybrid应用开发介绍 2015年11月.

Presentation on theme: "移动校园Hybrid应用开发介绍 2015年11月."— Presentation transcript:

1 移动校园Hybrid应用开发介绍 2015年11月

2 01-序章 02-课程概述 03-Hybrid应用开发

3 01-序章 02-课程概述 03-Hybrid应用开发 01-序章 +公司简介 +移动校园开发平台架构

4 金智教育简介 目前为国内最大的教育信息化提供商 教育行业唯一“国家规划布局内重点软件企业” 2015年新三板上市
业务起源于1995年，源自东南大学，起步于教育部“金智工程”，金智集团控股的核心企业 总部设立于南京金智科技园，在北京、上海、广州等20+个城市建立全面的营销与服务网络 800+名员工，90%以上本科学历，70%技术族 包括IBM、Oracle、CISCO、华为、凤凰传媒、皖新传媒、培生集团、大英百科、万方数据、安生教育、中公网校、广东轩辕等在内的30+家合作伙伴，包括IT设备提供商、区域合作伙伴、教育资源提供商等 近三年复合增长率40%以上

5 移动校园开发平台架构 移动校园平台 统一的展现门户 统一的监管平台 统一的分发渠道 学生、教职工、领导、校外人员 开发者 校园内容提供商
校园信息化提供商 公众应用提供商

6 移动校园开发平台架构 开发者服务 移动校园服务超市 API 能力开放 校内外用户群体 多元化开发者 （学校、个人、厂商） 学校核心数据授信
开发过程中支持服务 交互体验 统一入口 开发者服务 应用发布 移动校园服务超市 应用管理 API 接口调用 应用访问统计 API 能力开放 第三方应用集成

7 移动校园开发平台架构 用户服务层 业务应用层 能力开放层 基础支撑层 校园信息化平台 待建 已有 … 学生 校领导、教职工 开发者 管理员
应用超市 开发者服务 管理类应用 公共类应用 社区类应用 开发者管理 业务应用层 注册登记 应用开发 移动OA 班车服务 旅游出行 应用超市管理 … 移动教务 校园资讯 电子商务 信息维护 应用发布 移动学工 微博聚合 就业服务 统计分析 服务咨询 …… 开发者服务支撑 能力开放层 学生数据访问API 教师数据访问API 校园业务访问API …… 系统管理 用户管理 开发者管理 应用管理 安全管理 …… 基础支撑层 校园信息化平台

8 02-课程概述 01-序章 02-课程概述 03-Hybrid应用集成 +课程背景 +课程目的

9 课程背景 为丰富移动校园手机应用超市中的内容，积极响应学校的功能需求，同时也可让学生参与到本校手机app的应用开发中去，金智移动校园产品提供开发平台功能。但区域实施人员在学习项目实施的过程中会遇到种种关于第三方应用集成的问题，且实施人员在指导第三方厂商过程中也会存在问题，至此，本课程会对以上问题做详细介绍。

10 课程目的 为区域实施人员能在快速学习项目实施知识、项目实施和指导并配合第三方厂商开发应用这三种场合中提供详尽说明，并以此来加快项目开发的进度，达到项目的优化。 开发平台 开放平台 第三方厂商 开放接口 指导 项目实施 实施人员

11 03-Hybrid应用开发 01-序章 02-课程概述 03-Hybrid应用开发 + Hybrid应用集成介绍

12 Hybrid 应用开发介绍 此类应用需开发相应的html页面，及js逻辑控制，要求掌握一定的前端技术。其优点是自由度大，跨平台，可定制性强。第三方厂商只需和自己的接口对接即可，或者从自己网站中抓取数据都是可行的，应用开发完成后需要把开发文件打包上传到移动校园后台，大功告成。

13 开发环境目录结构 Demo -------------项目名 |--src------------服务器端代码
|--web web应用跟目录 |--assets 移动应用根目录 |--apps 应用目录 |--ecard -----应用1 |--app 应用2 |--common 平台公共文件 |--jquery.mobile----平台公共文件 |--plugin.apis 平台公共文件 |--wallpager 平台公共文件 cordova js-----平台公共文件 --index.jsp ---入口 对于一般应用开发，只需在app目录下开发自己的应用即可，其他文件不能修改。

14 Hybrid 应用目录结构 建议按照此目录结构组织应用代码，其中标识为红色的文件必须按此规范。
appname 应用名 |--css 样式文件(文件夹) |--images 图片文件(文件夹) |--js js文件(文件夹) |--www 跳转html子页面(文件夹) --config.xml---版本配置文件 --index.html----入口 建议按照此目录结构组织应用代码，其中标识为红色的文件必须按此规范。

15 index.html 应用入口页面 index.html 是标准的Html5页面，作为应用入口页面。
其中三个JS文件作为平台底层基础必须引入， cordova.js、 webView.js、 public.js 提供给了与设备交互的API以及常用方法封装。

16 config.xml 版本配置文件 Version 代表当前应用版本号

17 www 文件夹 www文件夹下保存应用子页面 打开页面使用方法
打开一卡通cardDetail.html页面TrunPage.openWebView("ecard/www/cardBase.html", 1, "一卡通");

18 Hybrid 应用入口方法

19 Hybrid 应用常用API (1).clientType参数 (2).初始化页面 (3).手机拨号功能调用 (4).手机短信功能调用
说明：用于区分设备类别，"0"代表 android; "1"代表IOS; "2"代表web浏览器。浏览器运行调试时修改public.js文件中clientType参数为2。安卓、IOS打包时分别定义clientType参数为指定值。 使用方法：var clientType = "2"; (2).初始化页面 说明：页面加载完成时调用loadPage()方法。 使用方法：TrunPage.pageInit();function loadPage() {} (3).手机拨号功能调用 说明：打开该号码的拨号界面 使用方法：TrunPage.callSystemAbility("tel:111111");(tel:号码) (4).手机短信功能调用 说明：打开该号码短信发送界面 使用方法：TrunPage.callSystemAbility("sms:111111");(sms:号码)

20 Hybrid 应用常用API (5).打开新页面 (6). 获取手机串号 (7).页面传参方法
说明：打开新的html页面，TrunPage.openWebView (url, titletype, titletext)url:请求页面地址；titletype新页面标题类型(1)；titletext新页面标题。 使用方法：TrunPage.openWebView("myLibrary/www/zaijie.html", 1, '详情'); (6). 获取手机串号 说明：异步方法获取手机串号。 使用方法：TrunPage.getUuid(function(data){}); (7).页面传参方法 说明：setKeyValue设置参数，getKeyValue异步方法获取参数。注意setKeyValue设值之后只能取一次值。建议重复使用的参数取值后重新赋值。 使用方法：TrunPage.setKeyValue("url",""); TrunPage.getKeyValue("url", function(data){ TrunPage.setKeyValue("url",data);});

21 Hybrid 应用常用API (8).跳转本地浏览器 (9).加载圈Loading的影藏显示 (10).返回事件返回上一层打开的html
说明：用手机浏览器打开网址。 使用方法：TrunPage.toSysBrowser(" (9).加载圈Loading的影藏显示 说明：去除/显示loading层. true 显示 false 隐藏 使用方法：TrunPage.setProgressBarVisibility(true); (10).返回事件返回上一层打开的html 说明：openWebView打开新页面后，返回上一层html页面的方法。返回后调用上一层页面js中定义的refreshPage方法。 使用方法：TrunPage.goBack();上一层页面定义function refreshPage(){} (11).打开相机 说明：打开系统相机拍照 使用方法： TrunPage.callSysCamera(function (){ }); 更多方法请参考 webView.js、public.js

22 Hybrid应用打包 特别说明：上传的压缩包打开后为整个项目的文件夹 错误 正确
修改config.xml文件中version值，每次更新版本递增1。

23 Hybrid应用需身份认证集成 集成前提：第三方系统需要和统一身份认证系统集成（或和移动平台用户账号一致）
集成原理：目前移动校园产品通过身份签名方式集成，当用户打开第三方系统应用时（hybrid应用）：第三方系统通过javascript接口获取到身份登录信息，第三方系统提交到自身服务端通过验证身份是否正确，如果正确则第三方系统准许验证通过，否则跳转到第三方系统的登陆界面。 实现步骤如下： 第三方hybrid应用的首页，页面初始化时，通过javascript接口获取用户登录信息。 通过javascript签名Post到第三方应用服务端，进行校验身份。

24 Hybrid应用需身份认证集成 代码示例： Js部分： TrunPage属性是申明在public.js中，且静态页面中需引入以下三个公共组件

25 Hybrid应用 需身份认证集成 代码示例：（服务端java） 注意所引的jar包，最下两个需引 cloud-sign-utils.jar

26 第三方服务器验证源码实例 第三方服务器代码示例：
String sign = XXX.getSignature();// 获取客户端传递的m_sign String appKey = “”; String secretKey =””; if (StringUtils.isBlank(sign)) //判断sign字符串是否为空 // SccException.throwSccException(“云登录失败”); 编写自己代码 CloudUser cu = JSON.parseObject(sign, CloudUser.class); if (cu == null || cu.getSign() == null) //校验签名是否正确 if (!CloudUtils.check(cu, secretKey)){ } 其中：XXX.getSignature()这个代码有第三方控制编写，用来接受第三方客户端传递过来的m_sign； secretKey 由我方提供； 我方提供cloud-sign-utils.jar中有校验签名的方法，导入jar包直接调用，具体见附件代码 Test工程

27 应用校验签名代码示例 签名字符串示例： { "avatar": { //用户头像 "id": 428007,
"url": " }, "birthday": , //用户生日 "dept": { //用户部门 "code": "", "name": "网络信息与教育技术中心" "enterYear": 0, //入校时间 "gender": 0, //性别 "idsNo": "d88014", //帐号id "nickName": "张三", //昵称 "realName": "张三封", //姓名 "sign": { "appKey": "snc-bjyydx",//我方提供的appKey "check": "5e690b7a49f56d1d8d31e ee8c4836b4",//服务器端通过算法组合的check码 "nonce": "K4cz5Zjt", "timestamp": , //时间戳 "token": "0ce039e4aec4dba2aaa15fd986185e84cd614245" //随机串 }

28 关注后请点击实名认证，填写实名认证信息提交，推荐人一定要写闫秋实 ~~ 谢谢！！~

29