金蝶云之家轻应用入门指南

云之家轻应用入门指南

1.

（1）本文档依赖云之家轻应用开发平台，对开发人员进行轻应用开发作入门指导。

（2）本文档适用于开发工程师：根据本文档中描述进行轻应用开发和公共号与轻应用的关联设置。

（3）轻应用是指采用WEB技术开发的无需安装直接打开的移动应用，云之家中提供了WEB应用可调用的基础服务以便于轻应用可以融入到云之家的框架之中以

及获取用户、设备的信息，从而实现一些业务功能。

（4）轻应用的开发可以采用各种WEB开发技术实现，云之家平台对实现不做要求，云之家将提供底层的一些服务以便于轻应用的运行。

2.

轻应用是指采用WEB技术开发的无需安装直接打开的移动应用，云之家中提供了WEB 应用可调用的基础服务以便于轻应用可以融入到云之家的框架之中以及获取用户、设备的信息，从而实现一些业务功能。

云之家轻应用就是可以使用任何语言编写的WEB程序，云之家平台对实现不做要求，云之家将提供底层的一些服务以便于轻应用的运行，使用云之家提供的公共号框架可以进行轻应用内容展示和提供用户身份认证，云之家提供一个接入能力和访问的入口，配置只需要知道轻应用的URL即可，轻应用后台可以链接企业内部业务系统和数据。

3.

第一步：准备开发环境

以下为开发过程，按照每一步进行相应操作。

Step 1

Java 环境为例，MyEclipse8.5 + Tomcat 6.0

Step 2

在Package Exploer视图下右击-> New -> Web Project，建立一个web工程

Step 3

工程命名为HelloLightApp，点击Finish , 完成web工程的建立。

Step 4

工程HelloLightApp 建立成功

STEP 5

工程建立成功后，可能有语言问题，建议选择项目，右击-> Properties

STEP 6

弹出项目的属性，选择Resource -> Text file encoding ->Other , 选择UTF－8

第二步：代码开发实现

STEP 7

以使用JQuery为例，在WebRoot下新增js文件夹，jquery.min.js 从网上下载一份（这个资源很容易下载，百度），放到js文件夹下。在jsp页面，引入jquery.min.js和云之家的js （/pub/js/qingjs.js ）

STEP 8

轻应用为开发者提供了XuntongJSBridge的通用方法，可以快捷设置相关的属性，如右上角的按钮、设置页面标题、获取用户身份信息、获取用户网络状态等，详情可参考：

/wiki/doku.php?id=xunt:%E4%BA%91%E4%B9%8B%E5% AE%B6v4_%E8%BD%BB%E5%BA%94%E7%94%A8%E6%A1%86%E6%9E%B6%E4% B9%8Bjsbridge%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E

平台提供的SDK jar包:

/wiki/doku.php?id=develop:sdk

Step9: 接口设计开发

(1)轻应用前后台通过JSON传输数据，统客户端服务器的接口

(1)Struts配置action

Step10: 页面开发

（1）JS引入。在html页面加入XuntongJSBridge引入，如：

（2）JS调用。XuntongJSBridge提供了一些参数，供轻应用调用，：

XuntongJSBridge.call('hideOptionMenu');//隐藏右上角按钮XuntongJSBridge.call('showOptionMenu');//显示右上角按钮XuntongJSBridge.call('hideWebViewTitle');//隐藏页面标题XuntongJSBridge.call('setWebViewTitle',{'title':'这是标题'},null);//设置页面标题并显示XuntongJSBridge.call('getPersonInfo',{},

function(result){

if(result.success){

var email=result.data.email;

alert(email); //获取到email后进行处理

}else{

alert('获取用户信息失败!');

}

}

); //获取用户信息

更多参数的获取可参考《云之家轻应用开发培训课程》或云之家开发平台API

（3）获取后台数据

$.ajax({ //采用Ajax方法

type:"post", //post方式

dataType:"json", //返回数据类型是JSON数据格式

url:"../../lightapp/lightTodoList.action", //处理的Action名称

success:function(data){ //成功的处理函数

$.each(data.data,function(commentIndex, comment) { //遍历返回

reloads(comment.todolist); //渲染页面，代码略

}) } },"json");

});

（4）根据需求，进行具体的页面开发，略

STEP 11

开发环境测试页面效果，以默认的服务器为例。选择工程，右击-> Run As -> MyEclipse Server Application 运行

Step 12

运行的效果：