詳解企業移動門戶之子應用嵌入實現方法
在企業移動門戶中，如正益工作，可以支援第三方子應用的嵌入，讓移動門戶無限擴充套件更多功能：工作報告、移動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
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上配置角色，許可權等來控制卡片的接入。開發者根據卡片引數展示卡片（即：子應用入口），設定事件處理呼叫子應用，就是通過上面的第三點進行啟動、下載等操作來完成。