詳解企業移動門戶之子應用嵌入實現方法

標籤：移動門戶   正益工作   移動開發   跨平台開發   子應用   

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

詳解企業移動門戶之子應用嵌入實現方法