在企业移动门户中，如正益工作，可以支持第三方子应用的嵌入，让移动门户无限扩展更多功能：工作报告、移动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上配置角色，权限等来控制卡片的接入。开发者根据卡片参数展示卡片（即：子应用入口），设置事件处理调用子应用，就是通过上面的第三点进行启动、下载等操作来完成。