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

来源：互联网发布：破鞋知乎编辑：程序博客网时间：2024/04/29 21:45

在企业移动门户中，如正益工作，可以支持第三方子应用的嵌入，让移动门户无限扩展更多功能：工作报告、移动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"?>

<item>

<icon>icon.png</icon>//PC端icon

<refreshtime>86400000</refreshtime>//卡片刷新时间

<name>企业CIS</name>//pc端标题名称

<defaultTab>true</defaultTab>//是否默认显示到首页卡片

<version>v1</version>//版本

</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上配置角色，权限等来控制卡片的接入。开发者根据卡片参数展示卡片（即：子应用入口），设置事件处理调用子应用，就是通过上面的第三点进行启动、下载等操作来完成。

0 0