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

飞天晴 发布于 2016/08/17 09:48
阅读 171
收藏 0

很多企业都在使用移动工作软件,PC+APP端,常见的有移动OA、移动CRM、移动门户、移动社交,就是把整套和企业管理相关的系统,都搬到手机上。

市面上有很多标准化的产品,SaaS应用,租用起来十分便捷。但是每个企业的实际情景不同,需要接入很多扩展的功能,本文以正益工作为例,它自身包含移动OACRM、社交、门户等能力,完全基于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":""};//获取所有的应用,当typeinstallAppFromAllList时是获取已安装的应用

 

uexAppStoreMgr.getAppList(JSON.stringify(dataJson));

 

 

3、应用启动或者下载

uexAppStoreMgr提供方法loadwidget,此方法会自动处理widgetnative类型的应用,如果没下载将自动进行下载,如果已下载,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类型的,如果此种类型可自行处理,如打开新窗口,在新窗口中打开浮动窗口,浮动窗口的urlweb地址。

 

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",//卡片唯一标识,同时也是卡片在首页中divid

    "describe": "建立客户,联系人,分配销售机会",

    "cardBtn": [{

       "operation": "top,refresh,delete",//置顶、刷新、删除

       "type": "collapse"//组合按钮------"btn"//支持单个按钮

    }],

    "header": {

       "headerIcon": "http"

    },

    "content": [{

       "label": "线索",

       "url": "http://xxxx",此标题下的内容路径

       "refresh": "86400000"

    },

    {

       "label": "客户",

       "url": "http://xxxx",

       "refresh": "86400000"

    },

    {

       "label": "机会",

       "url": "http://xxxx",

       "refresh": "86400000"

    }]

}

 

当配置完卡片后,还要在EMM上配置角色,权限等来控制卡片的接入。开发者根据卡片参数展示卡片(即:子应用入口),设置事件处理调用子应用,就是通过上面的第三点进行启动、下载等操作来完成。

加载中
返回顶部
顶部