云之家轻应用开发入门指南v0.2学案.doc

云之家轻应用开发入门指南 1. 如何进行轻应用开发 2 第一步：开发环境的搭建 2 第二步：代码具体实现 2 第三步：部署轻应用到云之家 6 2. 如何通过jsbridge获得设备能力 7 (1). 隐藏或者显示右上角的按钮 7 (2). 隐藏或者设置页面标题 7 (3). 获取当前用户身份信息 8 (4). 获取用户网络状态 8 (5). 打开第三方应用 9 (6). 发起单人会话 10 (7). 查看人员详情 11 (8). 分享 11 (9). 切换工作圈 14 (10). 关闭轻应用界面 14 3. 如何进行UI开发和调试 15 (1). 如何进行UI开发 15 (2). 如何进行UI调试 16 4. 如何判断轻应用运行于云之家的框架中而非其他浏览器中 35 云之家轻应用开发入门指南 如何进行轻应用开发meta name=viewport content=width=device-width,initial-scale=0.0,user-scalable=no, minimum-scale=1.0, maximum-scale=1.0/ script src=/pub/js/qingjs.js/script 在引入上述语句后，可以在自己进行业务的开发过程中，通过jsbridge实现获取完成一些需要的事情，例如：通过jsbridge获取ticket、token、人员身份、设备能力等信息，这个在“章节2 如何通过jsbridge获得设备能力”展开重点详述。 下面以一个简单的demo阐述轻应用开发的全过程： 第一步：开发环境的搭建 由于各人使用开发环境的爱好习惯的差异，开发环境的使用因人而异，这里不作任何指导，开发者可以自行选择开发环境开发。 第二步：代码具体实现 在轻应用页面增加自适应语句 以使用jQuery为例，在WebRoot文件夹下新增js文件夹，从网上下载一份jQuery的js（这个资源很容易下载，百度），例如：jquery-1.11.0.js，放到js文件夹下。在jsp页面，引入jQuery的js和云之家的js（/pub/js/qingjs.js ） 引入自己写的业务逻辑的js文件，或者直接写在jsp页面。该js文件可以调用jsbridge获取相关信息，开发方也可以自己请求自己的后台服务等方式实现开发自己的应用。调用能够获取的信息，请见章节2 如何通过jsbridge获得设备能力，和“应用接入指南”中的“如何在运行时获得ticket、token、人员身份等信息”。这里的js文件为“light-app.js”，以该js为例说明。 运行服务。 效果图。 PC浏览器中 手机端非云之家APP 云之家APP中 第三步：部署轻应用到云之家 请详见“应用接入指南”说明，这里不再重复。 如何通过jsbridge获得设备能力jsbridge可以获得如下设备能力： 隐藏或者显示右上角的按钮 隐藏或者设置页面标题 获取当前用户身份信息 获取用户网络状态 打开第三方应用 发起单人会话 查看人员详情 分享 切换工作圈 关闭轻应用界面 下面对以上10个进行详述说明。 隐藏或者显示右上角的按钮 XuntongJSBridge.call(hideOptionMenu);//隐藏右上角按钮 XuntongJSBridge.call(showOptionMenu);//显示右上角按钮 参数：无 回调：无 隐藏或者设置页面标题 XuntongJSBridge.call(hideWebViewTitle);//隐藏页面标题 XuntongJSBridge.call(setWebViewTitle,{title:申请加入群聊});//设置页面标题并显示 参数： title:需要设置的标题 回调：无 获取当前用户身份信息 仅限获取姓名、性别、头像、企业ID和用户ID，其他信息请参考 云之家轻应用开发之身份验证（ticket方案） XuntongJSBridge.call(getPersonInfo, {}, function(result){ alert(用户数据：+JSON.stringify(result)); }); 参数：无 回调： { success: true or false 是否成功(string) error: 错误信息(String) errorCode: 错误码(int) data: { name: 用户姓名（string） photoUrl: 用户头像地址（string） gender: 用户性别（int） eid: 企业id（string） openId: 用户id（stri