详解企业移动门户之子应用嵌入实现方法

在企业移动门户中，如正益工作，可以支持第三方子应用的嵌入，让移动门户无限扩展更多功能：工作报告、移动OA、考勤、公告等等。如何实现子应用的嵌入呢？本文将为你详细介绍使用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://xxxx",此标题下的内容路径
       "refresh":"86400000"
    },
    {
       "label":"客户",
       "url":"http://xxxx",
       "refresh":"86400000"
    },
    {
       "label":"机会",
       "url":"http://xxxx",
       "refresh":"86400000"
    }]
}
 
当配置完卡片后，还要在EMM上配置角色，权限等来控制卡片的接入。开发者根据卡片参数展示卡片（即：子应用入口），设置事件处理调用子应用，就是通过上面的第三点进行启动、下载等操作来完成。