在移动工作门户中,如何嵌入子应用?

浏览:235 发布日期:2016/08/19 分类:技术分享
很多企业都在使用移动工作软件,PC端+APP端,常见的有移动OA、移动CRM、移动门户、移动社交,就是把整套和企业管理相关的系统,都搬到手机上。市面上有很多标准化的产品,SaaS应用,租用起来十分便捷。但是每个企业的实际情景不同,需要接入很多扩展的功能,本文以正益工作为例,它自身包含移动OA、CRM、社交、门户等能力,完全基于AppCan开发,以下为嵌入子应用的具体方法。



上面是企业移动门户中的子应用嵌入界面,当我们点击上图中的点击区域(除去下面导航)都将进入子应用,换句话就是子应用的入口。要实现以上功能,我们通过uexAppStoreMgr插件进行处理。

1、初始化uexAppStoreMgr插件uexAppStoreMgr.open(storeIp);//storeIp为emm提供的应用商店地址,此地址如果不在代码中写死也可以在协同开发上的打包开关设置,uexAppStoreMgr插件提供获取此配置的地址方法
具体方法如下:uexAppStoreMgr.cbGetAppStoreHost = function(a,b,c){
    //C为协同开发上配置的地址  
}
uexAppStoreMgr.getAppStoreHost();


2、获取应用列表uexAppStoreMgr.cbGetAppList = function(mid,type,data){

//返回应用的列表信息,包括类型,是否已安装、版本等信息,此处添加处理代码即可,通常通知显示应用的页面显示此应用列表

}
var dataJson={"type":"searchAppList","key":""};//获取所有的应用,当type为installAppFromAllList时是获取已安装的应用

uexAppStoreMgr.getAppList(JSON.stringify(dataJson));
3、应用启动或者下载

uexAppStoreMgr提供方法loadwidget,此方法会自动处理widget和native类型的应用,如果没下载将自动进行下载,如果已下载,native类型的将自动启动,widget类型的可以在loadwidget的回调方法中启动widget。代码如下:uexAppStoreMgr.cbLoadWidget = function(a, b, c) {
var obj = JSON.parse(c);
var status = obj.status;
//根据status的不同处理代码
if (status == 0) {
    } else if (status == 1) {
        appcan.window.openToast('正在打开');
        opening = 1;
       
        uexWidget.cbStartWidget = function(opId, dataType, data) {
                opening = 0;
                appcan.window.closeToast();
            }
        uexWidget.startWidget(obj.data.appId, '10', '', 参数, '250', obj.data.appKey);
   } else if (status ==  2) {
        uexAppStoreMgr.loadWidget(obj.data);
}
}

uexAppStoreMgr.loadWidget(json);//json为获取列表时每条数据的json串,直接传入即可。
如果未安装将进行下载,下载有回调,可以提示用户uexAppStoreMgr.onStartDownload = function(){
        uexAppStoreMgr.cbGetProgress = function(a, b, c) {          
           
            //此处c为下载的进度   
        }
}
由于应用的类型还有一种是web类型的,如果此种类型可自行处理,如打开新窗口,在新窗口中打开浮动窗口,浮动窗口的url为web地址。

4、获取卡片列表

此插件还提供获取卡片列表的方法,卡片信息列表中包含应用信息,所以相关的启动应用可参考上面的方法。uexAppStoreMgr.cbGetTiles = function(a, b, c) {
        //emm上配置的卡片信息在此获取,之后显示可自行处理
    }
uexAppStoreMgr.getTiles();
此方法获取的卡片列表,就是显示最上方图片的基础数据。

5、解析卡片数据显示

返回的卡片数据如下:{
    "status": "ok",
    "appList": [{
        "appKey": "xxxxx",
        "appId": "xxxxx",
        "iconLoc": "xxx",//icon地址
        "name": "客户关系管理",
        "curVersion": "00.00.0018",
        "pkgUrl": "xxx.zip",//子应用包地址
        "appType": "工具",
        "appCategory": "AppCanWgt",
        "maxVersion": "00.00.0018",
        "installVersion": "00.00.0008",
        "shortImg1": "",
        "shortImg2": "",
        "shortImg3": "",
        "tilesList": [{
            "defaultTab": true,
            "icon": "",
            "param": {//卡片具体数据
                "cardType": "备用",
                "cardId": "crm_card",
                "describe": "建立客户,联系人,分配销售机会",
                "cardBtn": [{
                    "operation": "top,refresh,delete",
                    "type": "collapse"
                }],
                "header": {
                    "headerIcon": "http"
                },
                "content": [{
                    "label": "线索",
                    "url": "http://xxxx",
                    "refresh": "86400000"
                },
                {
                    "label": "客户",
                    "url": "http://xxxx",
                    "refresh": "86400000"
                },
                {
                    "label": "机会",
                    "url": "http://xxxx",
                    "refresh": "86400000"
                }]
            },
            "startPage": "",
            "systime": 0,
            "tabUrl": "",
            "template": "建立客户,联系人,分配销售机会",
            "tilesId": "28",
            "tilesPath": "",
            "tilesname": "CRM",
            "uiStyle": "",
            "version": "1"
        }]
    }]
}
上面的数据中tilesList中的就是具体的卡片显示数据。
前端代码根据此数据显示具体样式。tilesList中的数据在EMM中进行配置。

6、数据来源配置



此图为emm环境应用管理中的某一应用界面,在此界面中添加相关的应用卡片,卡片为xml格式。根据的卡片接口获取到此xml配置,即tilesList中的数据。
xml样式:<?xml version="1.0" encoding="utf-8" standalone="no"?>
<widget appId="1" version="00.00.0000">
    <item>
        <icon>icon.png</icon>//PC端icon
        <tabUrl></tabUrl>
        <refreshtime>86400000</refreshtime>//卡片刷新时间
        <name>企业CIS</name>//pc端标题名称
        <defaultTab>true</defaultTab>//是否默认显示到首页卡片
        <version>v1</version>//版本
        <param>具体参数</param>
    </item>
</widget>
具体参数如下:{//卡片具体数据
    "cardType": "备用",//卡片类型:entrance快捷入口,其他是卡片,目前未做其他种类处理
    "cardId": "crm_card",//卡片唯一标识,同时也是卡片在首页中div的id
    "describe": "建立客户,联系人,分配销售机会",
    "cardBtn": [{
       "operation": "top,refresh,delete",//置顶、刷新、删除
       "type": "collapse"//组合按钮------"btn"//支持单个按钮
    }],
    "header": {
       "headerIcon": "http"
    },
    "content": [{
       "label": "线索",
       "url": "http://**",此标题下的内容路径
       "refresh": "86400000"
    },
    {
       "label": "客户",
       "url": "http://x x x",
       "refresh": "86400000"
    },
    {
       "label": "机会",
       "url": "http://x x x",
       "refresh": "86400000"
    }]
}
当配置完卡片后,还要在EMM上配置角色,权限等来控制卡片的接入。开发者根据卡片参数展示卡片(即:子应用入口),设置事件处理调用子应用,就是通过上面的第三点进行启动、下载等操作来完成。

最佳答案
评论( 相关
后面还有条评论,点击查看>>