# 第三步：对接联调
交易平台接入小程序完成制作业务文件，并将文件同步到国家平台、监督平台等节点的功能。在实际对接中交易平台可以在完成某业务环节的数据维护，并发布业务文件后在同步数据时拉起小程序完成同步业务状态。下面以交易平台发布公告公示文件为例展示小程序的触发界面和小程序的集成效果。
交易平台在公告公示文件发布后点击如下图指示的按钮拉起小程序。
小程序启动后自动加载模板和录入数据后效果图如下。
下述对接接口说明为理解清晰，将小程序启动、加载模板、数据录入等步骤拆分说明，完整对接后的实际效果应该是按照上图所示，启动小程序后自动加载模板和录入数据，用户接下来的操作直接补录数据或进入下一步。
# 步骤1：初始化
Web对接小程序开始时，需要通过iframe将小程序引入交易平台的业务页面，然后分别声明函数sendMessage(cmd, params)和window.addEventListener("message", function)，sendMessage(cmd, params)用于业务页面向小程序发送执行某功能操作的接口、window.addEventListener("message", function)则是处理小程序向业务页面返回消息时的回调逻辑分支。
如下代码iframe引用小程序，并添加初始的脚本：
<html>
<head>
<title></title>
</head>
<body>
<div>
<div style="flex: 1;">
<!-- 注意这里的src路径，需要改为交易平台部署在本地的小程序的完整链接，支持跨域 -->
<iframe id="ebinterlinkintegration" height="100%" width="100%" frameborder="1" src="{MyDomain}:{Port}/{Path}/ebinterlinkintegrationindex.html" hidden="hidden"></iframe>
</div>
</div>
<script type="text/javascript">
// 获取iframe的window对象
var iframe = document.getElementById("ebinterlinkintegration").contentWindow;
// iframe跨域通信方法，业务页向小程序传入信息。cmd：执行的功能；params：运行功能所需的参数
function sendMessage(cmd, params) {
//console.log("pstMsg:" + cmd + "(" + JSON.stringify(params) + ")");
iframe.postMessage({
cmd: cmd,
params: params
}, '*');
}
// 业务页接收小程序发回的信息，并执行对应的逻辑处理。
window.addEventListener("message", function(event) {
var data = event.data;
//console.log("callback:" + JSON.stringify(data));
switch (data.cmd) {
//返回通知的类型分支随需要添加
case 'PreviousCallback':
this.PreviousCallback();
break;
case 'EbinterlinkintegrationReadyCallback':
this.EbinterlinkintegrationReadyCallback();
break;
case 'LoadTemplateCallback':
this.LoadTemplateCallback();
break;
case 'SaveFileCallback':
this.SaveFileCallback(data.params);
break;
case 'FinishCallback':
this.FinishCallback();
break;
}
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
# 回调 小程序加载就绪
方法名称： Web端:EbinterlinkintegrationReadyCallback()
方法说明：小程序被引用后，声明此方法，在小程序完成加载时进入此方法的逻辑，逻辑中进行参数初始化
方法参数：null
代码示例
Web端
// 业务页接收小程序发回的信息，并执行对应的事件处理。
window.addEventListener("message", function(event) {
var data = event.data;
//console.log("callback:" + JSON.stringify(data));
switch (data.cmd) {
case 'EbinterlinkintegrationReadyCallback':
this.EbinterlinkintegrationReadyCallback();
break;
}
});
// 小程序准备就绪，业务页面收到触发通知，执行此函数
function EbinterlinkintegrationReadyCallback() {
console.log("EbinterlinkintegrationReadyCallback");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
客户端
private void FormDemo_Shown(object sender, EventArgs e)
{
//定义小程序传回状态信息的事件
ocx1.EbinterlinkintegrationReadyCallback += new Ocx.EventHandler(EbinterlinkintegrationReadyCallback);
//引入小程序
ocx1.LoadWebFrame(iframeUrl);
}
public void EbinterlinkintegrationReadyCallback(string param)
{
Console.WriteLine("EbinterlinkintegrationReadyCallback");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 接口 参数初始化
方法名称： sendMessage(cmd:'init',params:json);
方法说明：此接口在小程序加载小程序成功的回调中调用，向小程序传递初始化参数。
方法入参：
| 参数 | 数据类型 | 必填 | 说明 |
|---|---|---|---|
| cmd | String | 是 | 请求小程序执行操作的种类，初始化参数固定为'init' |
| params | Json对象 | 是 | 携带参数信息的Json |
| └ platformCode | String | 是 | 平台编码，交易平台标识码 |
| └ exchangeFileAddress | String | 否 | 上传交换终端机地址 |
| └ watermarksContent | String | 否 | 文件水印，不传或传空无水印 |
代码示例
Web端
// 获取iframe的window对象
var iframe = document.getElementById("ebinterlinkintegration").contentWindow;
// iframe跨域通信方法，业务页向小程序传入信息。cmd：标记执行的功能；params：运行功能所需的参数
function sendMessage(cmd, params) {
//console.log("pstMsg:" + cmd + "(" + JSON.stringify(params) + ")");
iframe.postMessage({
cmd: cmd,
params: params
}, '*');
}
// 业务页接收小程序发回的信息，并执行对应的事件处理。
window.addEventListener("message", function(event) {
var data = event.data;
//console.log("callback:" + JSON.stringify(data));
switch (data.cmd) {
case 'EbinterlinkintegrationReadyCallback':
this.EbinterlinkintegrationReadyCallback();
break;
}
});
// 小程序准备就绪，业务页面收到触发通知，执行此函数
function EbinterlinkintegrationReadyCallback() {
console.log("EbinterlinkintegrationReadyCallback");
// 小程序内部加载就绪后，可以传入小程序初始化信息
sendMessage('init', jsonInit);
}
//初始化参数
var jsonInit = {
"platformCode": "A0000000001", // 平台编码
"watermarksContent": "中招互连", // 文件水印，为空则不加水印
"exchangeFileAddress": "http(s)://{IP}:{PORT}"
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
客户端
private void FormDemo_Shown(object sender, EventArgs e)
{
//定义小程序传回状态信息的事件
ocx1.EbinterlinkintegrationReadyCallback += new Ocx.EventHandler(EbinterlinkintegrationReadyCallback);
//引入小程序
ocx1.LoadWebFrame(iframeUrl);
}
public OcxModel.InitModel jsonInit = new OcxModel.InitModel()
{
platformCode= "A0000000001", // 平台编码
watermarksContent="中招互连", // 文件水印，为空则不加水印
//exchangeFileAddress="http(s)://{IP}:{PORT}" //文件上传服务Host，不填取默认值
};
public void EbinterlinkintegrationReadyCallback(string param)
{
Console.WriteLine("EbinterlinkintegrationReadyCallback");
// 小程序内部加载就绪后，可以传入小程序初始化信息
ocx1.SendMessage("init", jsonInit);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
如下图为含有两个按钮的业务页，在引用小程序并初始化后展示效果
# 步骤2：查找并加载模板
# 接口 查找并加载模板
方法名称： sendMessage(cmd:'findAndLoadTemplate',params:json);
方法说明：调用此接口，小程序通过传入的参数查找模板文件，将展示出来
方法入参：
| 参数 | 数据类型 | 必填 | 说明 |
|---|---|---|---|
| cmd | String | 是 | 请求小程序执行操作的种类，查找模板固定为'findAndLoadTemplate' |
| params | Json对象 | 是 | 携带参数信息的Json |
| └ fileXid | String | 是 | 平交易平台提供的文件唯一标识 |
| └ businessObject | String | 是 | 业务对象，详见附件一 |
代码示例
Web端
// 获取iframe的window对象
var iframe = document.getElementById("ebinterlinkintegration").contentWindow;
// iframe跨域通信方法，业务页向小程序传入信息。cmd：标记执行的功能；params：运行功能所需的参数
function sendMessage(cmd, params) {
//console.log("pstMsg:" + cmd + "(" + JSON.stringify(params) + ")");
iframe.postMessage({
cmd: cmd,
params: params
}, '*');
}
// 业务页接收小程序发回的信息，并执行对应的事件处理。
window.addEventListener("message", function(event) {
var data = event.data;
//console.log("callback:" + JSON.stringify(data));
switch (data.cmd) {
case 'EbinterlinkintegrationReadyCallback':
this.EbinterlinkintegrationReadyCallback();
break;
}
});
// 小程序准备就绪，业务页面收到触发通知，执行此函数
function EbinterlinkintegrationReadyCallback() {
console.log("EbinterlinkintegrationReadyCallback");
// 小程序内部加载就绪后，可以传入小程序初始化信息
sendMessage('init', jsonInit);
// 小程序查找加载模板。可用按钮触发
sendMessage('findAndLoadTemplate', jsonLoadTemplate);
}
//初始化参数
var jsonInit = {
"platformCode": "A0000001", // 平台编码
"watermarksContent": "中招互连", // 文件水印，为空则不加水印
"exchangeFileAddress": "http(s)://{IP}:{PORT}"
};
// 查找模版参数
var jsonLoadTemplate = {
"fileXid": "fileXid3333",
'businessObject': 'projecTenderProjectBidsection' // 这个业务对象可以测试“主细表”
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
客户端
private void FormDemo_Shown(object sender, EventArgs e)
{
//定义小程序传回状态信息的事件
ocx1.EbinterlinkintegrationReadyCallback += new Ocx.EventHandler(EbinterlinkintegrationReadyCallback);
//引入小程序
ocx1.LoadWebFrame(iframeUrl);
}
public OcxModel.InitModel jsonInit = new OcxModel.InitModel()
{
platformCode= "A0000000001", // 平台编码
watermarksContent="中招互连", // 文件水印，为空则不加水印
//exchangeFileAddress="http(s)://{IP}:{PORT}" //文件上传服务Host，不填取默认值
};
public OcxModel.TemplateModel jsonTemplate = new OcxModel.TemplateModel()
{
fileXid = "fileXid3333",
businessObject = "projecTenderProjectBidsection"
};
public void EbinterlinkintegrationReadyCallback(string param)
{
Console.WriteLine("EbinterlinkintegrationReadyCallback");
// 小程序内部加载就绪后，可以传入小程序初始化信息
ocx1.SendMessage("init", jsonInit);
// 小程序查找加载模板
ocx1.SendMessage("findAndLoadTemplate", jsonTemplate);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# 回调 成功加载文档模板
方法名称： Web端:LoadTemplateCallback()
方法说明：小程序加载模板成功时触发小程序返回通知消息，执行此方法，可以进行模板填充数据操作。
方法参数：null
代码示例
Web端
// 业务页接收小程序发回的信息，并执行对应的事件处理。
window.addEventListener("message", function(event) {
var data = event.data;
//console.log("callback:" + JSON.stringify(data));
switch (data.cmd) {
case 'EbinterlinkintegrationReadyCallback':
this.EbinterlinkintegrationReadyCallback();
break;
case 'LoadTemplateCallback':
this.LoadTemplateCallback();
break;
}
});
// 小程序加载模板成功，业务页面收到触发通知，执行此函数
function LoadTemplateCallback() {
console.log("LoadTemplateCallback");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
客户端
//业务窗体的Shown事件
private void FormDemo_Shown(object sender, EventArgs e)
{
//定义小程序传回状态信息的事件
ocx1.LoadTemplateCallback += new Ocx.EventHandler(LoadTemplateCallback);
//引入小程序
ocx1.LoadWebFrame(iframeUrl);
}
// 小程序加载模板成功，业务页面收到触发通知，执行此函数
public void LoadTemplateCallback(string param)
{
Console.WriteLine("LoadTemplateCallback");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
如图为成功加载模板后小程序的展示效果：
# 步骤3：推送json数据和离开小程序
# 接口 推送json数据
方法名称： sendMessage(cmd:'pushDataToTemplate',params:json);
方法说明：调用此接口把数据传入模板，进行填充，是对模板文件内容的编辑。
方法入参：
| 参数 | 数据类型 | 必填 | 说明 |
|---|---|---|---|
| cmd | String | 是 | 请求小程序执行操作的种类，模板填充数据操作固定为'pushDataToTemplate' |
| params | Json对象 | 是 | 携带参数信息的Json，Json结构取决于选择模板的业务对象类型，Json结构与业务对象的对应关系见附件一 |
以项目-招标公告-标段业务为例，交易平台填写模板数据，代码示例如下：
Web端
// 业务页接收小程序发回的信息，并执行对应的事件处理。
window.addEventListener("message", function(event) {
var data = event.data;
//console.log("callback:" + JSON.stringify(data));
switch (data.cmd) {
case 'EbinterlinkintegrationReadyCallback':
this.EbinterlinkintegrationReadyCallback();
break;
case 'LoadTemplateCallback':
this.LoadTemplateCallback();
break;
}
});
// 小程序加载模板成功，业务页面收到触发通知，执行此函数
function LoadTemplateCallback() {
console.log("LoadTemplateCallback");
// 小程序成功加载模版后，可以向文档传入json数据
sendMessage('pushDataToTemplate', jsonPushData);
}
// 主细表数据结构
var jsonPushData = {
"PROJECT": [
{
"PROJECT_CODE": "2111370983040144",
"PROJECT_NAME": "乐陵市黄河流域河道综合治理暨水资源节约集约利用提升项目",
"REGION_CODE": "370000",
"INDUSTRIES_TYPE": "01",
"FUND_SOURCE": "财政拨款",
"DATA_CREATE_TIME": "2022-03-10 11:15:00",
"PROJECT_SCALE": "涉及乐陵市全境，对我市境内漳卫新河、马颊河、跃马河、盘河等主要河流进行综合治理，清淤河道500公里，铺设巡堤道路160公里，建设生态湿地3处，配套建设公共服务；新铺设80公里供水管线，提升改造现有供水管网，新建远程管理等信息化设施。",
"attachment": [
{
"attachmentCode": "",
"attachmentFileName": "",
"fileType": "",
"dataTimestamp": "",
"md5": "",
"fileUrl": "{MyDomain}:{Port}/{Path}/Attachment.pdf"
}]
}],
"TENDER_PROJECT": [
{
"PROJECT_CODE": "2111370983040144",
"TENDER_PROJECT_CODE": "M3701020925h5852n1q9",
"TENDER_PROJECT_NAME": "乐陵市黄河流域河道综合治理暨水资源节约集约利用提升项目",
"IS_ENTRY": "0",
"ENTRY_TRADE_PLAT": "",
"IS_TENDER": "1",
"BIDDING_SCHEME_CODE": "34433eeee88888888",
"TENDER_PROJECT_INDUSTRIES_TYPE": "A01",
"REGION_CODE": "370000",
"TENDER_CONTENT": "建设期全过程建设管理及施工服务",
"TENDER_MODE": "1",
"QULIFICATION_CHECK_MODE": "2",
"TENDER_ORGANIZE_FORM": "2",
"TENDERER": [
{
"TENDERER_CODE": "292827627281728394",
"TENDERER_NAME": "乐陵市水利局"
}],
"TENDER_AGENCY": [
{
"TENDER_AGENCY_CODE": "91371700MA3CTKCH15",
"TENDER_AGENCY_NAME": "西安水利建设有限公司",
"BIDDING_AGENCY_CHOICE": "1",
"BIDDING_AGENCY_CHOICE_RAMARK": ""
}],
"attachment": [
{
"attachmentCode": "",
"attachmentFileName": "",
"fileType": "",
"dataTimestamp": "",
"md5": "",
"fileUrl": "{MyDomain}:{Port}/{Path}/Attachment.pdf"
}],
"TENDER_PROJECT_CREATE_TIME": "2022-03-10 11:15:00",
"SUPERVISE_DEPT_CODE": "F000000",
"SUPERVISE_DEPT_NAME": "水利部",
"APPROVE_DEPT_CODE": "222222222",
"APPROVE_DEPT_NAME": "山东省水利厅"
}],
"BID_SECTION": [
{
"TENDER_PROJECT_CODE": "M3701020925h5852n1q9",
"BID_SECTION_CODE": "M3701020925h5852n1q9001",
"BID_SECTION_NAME": "乐陵市黄河流域河道综合治理暨水资源节约集约利用提升项目标段1",
"BID_SECTION_CONTENT": "建设期全过程建设管理及施工服务",
"BID_SECTION_CLASSIFY_CODE": "0000001",
"CONTRACT_RECKON_PRICE": "",
"CURRENCY_CODE": "142",
"SUPERVISE_DEPT_CODE": "F000000",
"BIDDING_ELIGIBILITY": "监理（含代建）投标人要求具备水利部颁发的水利工程施工监理乙级及以上资质的独立法人，在人员、设备及资金方面具有相应的监理（含代建）能力,总监理工程师应具有监理工程师执业资格，并具有工程类高级职称。",
"DATA_CREATE_TIME": "2022-03-10 11:15:00",
"attachment": [
{
"attachmentCode": "",
"attachmentFileName": "",
"fileType": "",
"dataTimestamp": "",
"md5": "",
"fileUrl": "{MyDomain}:{Port}/{Path}/Attachment.pdf"
}]
},
{
"TENDER_PROJECT_CODE": "M3701020925h5852n1q9",
"BID_SECTION_CODE": "M3701020925h5852n1q9002",
"BID_SECTION_NAME": "乐陵市黄河流域河道综合治理暨水资源节约集约利用提升项目标段2",
"BID_SECTION_CONTENT": "建设期全过程建设管理及施工服务",
"BID_SECTION_CLASSIFY_CODE": "0000001",
"CONTRACT_RECKON_PRICE": "",
"CURRENCY_CODE": "142",
"SUPERVISE_DEPT_CODE": "F000000",
"BIDDING_ELIGIBILITY": "监理（含代建）投标人要求具备水利部颁发的水利工程施工监理乙级及以上资质的独立法人，在人员、设备及资金方面具有相应的监理（含代建）能力,总监理工程师应具有监理工程师执业资格，并具有工程类高级职称。",
"DATA_CREATE_TIME": "2022-03-10 11:15:00",
"attachment": [
{
"attachmentCode": "",
"attachmentFileName": "",
"fileType": "",
"dataTimestamp": "",
"md5": "",
"fileUrl": "{MyDomain}:{Port}/{Path}/Attachment.pdf"
}]
}]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
客户端
//业务窗体的Shown事件
private void FormDemo_Shown(object sender, EventArgs e)
{
//定义小程序传回状态信息的事件
ocx1.LoadTemplateCallback += new Ocx.EventHandler(LoadTemplateCallback);
//引入小程序
ocx1.LoadWebFrame(iframeUrl);
}
public string strPushData = "业务数据json字符串";
// 小程序加载模板成功，业务页面收到触发通知，执行此函数
public void LoadTemplateCallback(string param)
{
Console.WriteLine("LoadTemplateCallback");
// 小程序成功加载模版后，可以向文档传入json数据
object jsonObject = this.GetJsonObject<OcxModel.projecTenderProjectBidsection>(strPushData);
ocx1.SendMessage("pushDataToTemplate", jsonObject);
}
public T GetJsonObject<T>(string s)
{
return Newtonsoft.Json.JsonConvert.DeserializeObject<T>(s);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# 回调 上一步，中断编辑，离开小程序
方法名称： Web端:PreviousCallback()
方法说明：小程序模板填写页面中点击"上一步"时触发小程序返回通知消息，执行此方法，可以离开小程序中断编辑。
方法参数：null
代码示例
Web端
// 业务页接收小程序发回的信息，并执行对应的事件处理。
window.addEventListener("message", function(event) {
var data = event.data;
//console.log("callback:" + JSON.stringify(data));
switch (data.cmd) {
case 'PreviousCallback':
this.PreviousCallback();
break;
case 'EbinterlinkintegrationReadyCallback':
this.EbinterlinkintegrationReadyCallback();
break;
case 'LoadTemplateCallback':
this.LoadTemplateCallback();
break;
}
});
// 小程序数据编辑页点击上一步，业务页面收到触发通知，执行此函数
function PreviousCallback() {
console.log("PreviousCallback");
// 提示确认离开互连互信对接小程序
alert("点击了上一步，通知交易平台离开互连互信对接小程序");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
客户端
private void FormDemo_Shown(object sender, EventArgs e)
{
//定义小程序传回状态信息的事件
ocx1.PreviousCallback += new Ocx.EventHandler(PreviousCallback);
//引入小程序
ocx1.LoadWebFrame(iframeUrl);
}
// 小程序数据编辑页点击上一步，业务页面收到触发通知，执行此函数
public void PreviousCallback(string param)
{
Console.WriteLine("PreviousCallback");
// 提示确认离开互连互信对接小程序
ocx1.Alert("上一步，中断操作");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 步骤4：文件上传交易平台和交换网络
# 回调 上传文件的回执信息
方法名称： Web端:SaveFileCallback(data)
方法说明：业务页面向小程序请求上传文件操作后时返回的回执信息，执行此方法提示回执信息。
方法参数：
| 参数 | 数据类型 | 说明 |
|---|---|---|
| data | Json对象 | 小程序上传文件后的回执信息 |
| └ saveResult | Array<String> | 上传平交易平台回执。信息格式如["{\"msg\":\"文件上传成功\",\"code\":\"0\",\"data\":{\"exchangeFlag\":1}}"] |
| └ exchangeResult | Array<String> | 上传交换网络回执。信息格式如：["{\"success\":true,\"message\":\"提交成功\",\"status\":\"200\",\"data\":{\"fileId\":\"\",\"result\":\"success\",\"targetNodeResultList\":[{\"nodeId\":\"\",\"nodeName\":\"\",\"sendResult\":\"success\",\"sendTime\":null}]}}"] |
代码示例
Web端
// 业务页接收小程序发回的信息，并执行对应的事件处理。
window.addEventListener("message", function(event) {
var data = event.data;
//console.log("callback:" + JSON.stringify(data));
switch (data.cmd) {
case 'PreviousCallback':
this.PreviousCallback();
break;
case 'EbinterlinkintegrationReadyCallback':
this.EbinterlinkintegrationReadyCallback();
break;
case 'LoadTemplateCallback':
this.LoadTemplateCallback();
break;
case 'SaveFileCallback':
this.SaveFileCallback(data.params);
break;
}
});
// 小程序将完成编辑的文件上传平台，业务页面收到上传结果通知，执行此函数
function SaveFileCallback(data) {
console.log("SaveFileCallback");
// 打印上传文件结果信息
console.log("调用接口保存文件返回结果：");
console.log(data);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
客户端
private void FormDemo_Shown(object sender, EventArgs e)
{
//定义小程序传回状态信息的事件
ocx1.SaveFileCallback += new Ocx.EventHandler(SaveFileCallback);
//引入小程序
ocx1.LoadWebFrame(iframeUrl);
}
// 小程序将完成编辑的文件上传平台，业务页面收到上传结果通知，执行此函数
public void SaveFileCallback(string param)
{
Console.WriteLine("SaveFileCallback");
// 打印上传文件结果信息
Console.WriteLine("调用接口保存文件返回结果：");
Console.WriteLine(param);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 回调 按钮“完成”，
方法名称： FinishCallback()
方法说明：点击"X"结束小程序流程时触发返回通知消息，执行此方法关闭小程序
方法参数：NULL
代码示例
Web端
// 业务页接收小程序发回的信息，并执行对应的事件处理。
window.addEventListener("message", function(event) {
var data = event.data;
//console.log("callback:" + JSON.stringify(data));
switch (data.cmd) {
case 'PreviousCallback':
this.PreviousCallback();
break;
case 'EbinterlinkintegrationReadyCallback':
this.EbinterlinkintegrationReadyCallback();
break;
case 'LoadTemplateCallback':
this.LoadTemplateCallback();
break;
case 'SaveFileCallback':
this.SaveFileCallback(data.params);
break;
case 'FinishCallback':
this.FinishCallback();
break;
}
});
// 小程序流程结束，业务页面收到触发通知，执行此函数
function FinishCallback() {
console.log("FinishCallback");
// 文件上传成功后，结束操作，关闭小程序
alert("操作结束，通知交易平台离开互连互信对接小程序");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
客户端
private void FormDemo_Shown(object sender, EventArgs e)
{
//定义小程序传回状态信息的事件
ocx1.FinishCallback += new Ocx.EventHandler(FinishCallback);
//引入小程序
ocx1.LoadWebFrame(iframeUrl);
}
// 小程序流程结束，业务页面收到触发通知，执行此函数
public void FinishCallback(string param)
{
Console.WriteLine("FinishCallback");
// 文件上传成功后，结束操作，关闭小程序
ocx1.Alert("操作结束，返回");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 附：完整代码示例
# Web端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="中国招标投标公共服务平台">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<link rel="icon" href="favicon.ico">
<title>互连互信对接小程序Demo</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div style="position: fixed; left: 0;top: 0;width: 100%;height: 100%; display: flex; flex-direction: column;">
<div style="margin: 10px;">
<span>交易平台调⽤互连互信对接小程序API：</span>
<button onclick="sendMessage('findAndLoadTemplate',jsonLoadTemplate)">查找模板</button>
<button onclick="sendMessage('pushDataToTemplate',jsonPushData)">推送json数据</button>
<button onclick="sendMessage('resetSize',{width:800,height:600})">查找模板</button>
</div>
<div style="flex: 1;">
<!-- 注意这里的src路径，需要改为互连互信对接小程序完整的https链接，支持跨域 -->
<iframe id="ebinterlinkintegration" height="100%" width="100%" frameborder="1" src="{MyDomain}:{Port}/{Path}/ebinterlinkintegrationindex.html"></iframe>
</div>
</div>
<script type="text/javascript">
// 获取iframe的window对象
var iframe = document.getElementById("ebinterlinkintegration").contentWindow;
// iframe跨域通信方法，业务页向小程序传入信息。cmd：执行的操作；params：运行功能所需的参数
function sendMessage(cmd, params) {
//console.log("pstMsg:" + cmd + "(" + JSON.stringify(params) + ")");
iframe.postMessage({
cmd: cmd,
params: params
}, '*');
}
// 业务页接收小程序发回的信息，并执行对应的事件处理。
window.addEventListener("message", function(event) {
var data = event.data;
//console.log("callback:" + JSON.stringify(data));
switch (data.cmd) {
case 'PreviousCallback':
this.PreviousCallback();
break;
case 'EbinterlinkintegrationReadyCallback':
this.EbinterlinkintegrationReadyCallback();
break;
case 'LoadTemplateCallback':
this.LoadTemplateCallback();
break;
case 'SaveFileCallback':
this.SaveFileCallback(data.params);
break;
case 'FinishCallback':
this.FinishCallback();
break;
}
});
// 小程序准备就绪，业务页面收到触发通知，执行此函数
function EbinterlinkintegrationReadyCallback() {
console.log("EbinterlinkintegrationReadyCallback");
// 小程序内部加载就绪后，可以传入小程序初始化信息
sendMessage('init', jsonInit);
// 小程序查找加载模板
// sendMessage('findAndLoadTemplate', jsonLoadTemplate);
}
//初始化参数
var jsonInit = {
"platformCode": "A0000000001", // 平台编码
"watermarksContent": "中招互连", // 文件水印，为空则不加水印
"exchangeFileAddress": "http(s)://{IP}:{PORT}"
};
// 查找模版参数
var jsonLoadTemplate = {
"fileXid": "fileXid3333",
'businessObject': 'projecTenderProjectBidsection' // 这个业务对象可以测试“主细表”
};
// 小程序加载模板成功，业务页面收到触发通知，执行此函数
function LoadTemplateCallback() {
console.log("LoadTemplateCallback");
// 小程序成功加载模版后，可以向文档传入json数据
// sendMessage('pushDataToTemplate', jsonPushData);
}
// 主细表数据结构
var jsonPushData = {
"PROJECT": [
{
"PROJECT_CODE": "2111370983040144",
"PROJECT_NAME": "乐陵市黄河流域河道综合治理暨水资源节约集约利用提升项目",
"REGION_CODE": "370000",
"INDUSTRIES_TYPE": "01",
"FUND_SOURCE": "财政拨款",
"DATA_CREATE_TIME": "2022-03-10 11:15:00",
"PROJECT_SCALE": "涉及乐陵市全境，对我市境内漳卫新河、马颊河、跃马河、盘河等主要河流进行综合治理，清淤河道500公里，铺设巡堤道路160公里，建设生态湿地3处，配套建设公共服务；新铺设80公里供水管线，提升改造现有供水管网，新建远程管理等信息化设施。",
"attachment": [
{
"attachmentCode": "",
"attachmentFileName": "",
"fileType": "",
"dataTimestamp": "",
"md5": "",
"fileUrl": "{MyDomain}:{Port}/{Path}/Attachment.pdf"
}]
}],
"TENDER_PROJECT": [
{
"PROJECT_CODE": "2111370983040144",
"TENDER_PROJECT_CODE": "M3701020925h5852n1q9",
"TENDER_PROJECT_NAME": "乐陵市黄河流域河道综合治理暨水资源节约集约利用提升项目",
"IS_ENTRY": "0",
"ENTRY_TRADE_PLAT": "",
"IS_TENDER": "1",
"BIDDING_SCHEME_CODE": "34433eeee88888888",
"TENDER_PROJECT_INDUSTRIES_TYPE": "A01",
"REGION_CODE": "370000",
"TENDER_CONTENT": "建设期全过程建设管理及施工服务",
"TENDER_MODE": "1",
"QULIFICATION_CHECK_MODE": "2",
"TENDER_ORGANIZE_FORM": "2",
"TENDERER": [
{
"TENDERER_CODE": "292827627281728394",
"TENDERER_NAME": "乐陵市水利局"
}],
"TENDER_AGENCY": [
{
"TENDER_AGENCY_CODE": "91371700MA3CTKCH15",
"TENDER_AGENCY_NAME": "西安水利建设有限公司",
"BIDDING_AGENCY_CHOICE": "1",
"BIDDING_AGENCY_CHOICE_RAMARK": ""
}],
"attachment": [
{
"attachmentCode": "",
"attachmentFileName": "",
"fileType": "",
"dataTimestamp": "",
"md5": "",
"fileUrl": "{MyDomain}:{Port}/{Path}/Attachment.pdf"
}],
"TENDER_PROJECT_CREATE_TIME": "2022-03-10 11:15:00",
"SUPERVISE_DEPT_CODE": "F000000",
"SUPERVISE_DEPT_NAME": "水利部",
"APPROVE_DEPT_CODE": "222222222",
"APPROVE_DEPT_NAME": "山东省水利厅"
}],
"BID_SECTION": [
{
"TENDER_PROJECT_CODE": "M3701020925h5852n1q9",
"BID_SECTION_CODE": "M3701020925h5852n1q9001",
"BID_SECTION_NAME": "乐陵市黄河流域河道综合治理暨水资源节约集约利用提升项目标段1",
"BID_SECTION_CONTENT": "建设期全过程建设管理及施工服务",
"BID_SECTION_CLASSIFY_CODE": "0000001",
"CONTRACT_RECKON_PRICE": "",
"CURRENCY_CODE": "142",
"SUPERVISE_DEPT_CODE": "F000000",
"BIDDING_ELIGIBILITY": "监理（含代建）投标人要求具备水利部颁发的水利工程施工监理乙级及以上资质的独立法人，在人员、设备及资金方面具有相应的监理（含代建）能力,总监理工程师应具有监理工程师执业资格，并具有工程类高级职称。",
"DATA_CREATE_TIME": "2022-03-10 11:15:00",
"attachment": [
{
"attachmentCode": "",
"attachmentFileName": "",
"fileType": "",
"dataTimestamp": "",
"md5": "",
"fileUrl": "{MyDomain}:{Port}/{Path}/Attachment.pdf"
}]
},
{
"TENDER_PROJECT_CODE": "M3701020925h5852n1q9",
"BID_SECTION_CODE": "M3701020925h5852n1q9002",
"BID_SECTION_NAME": "乐陵市黄河流域河道综合治理暨水资源节约集约利用提升项目标段2",
"BID_SECTION_CONTENT": "建设期全过程建设管理及施工服务",
"BID_SECTION_CLASSIFY_CODE": "0000001",
"CONTRACT_RECKON_PRICE": "",
"CURRENCY_CODE": "142",
"SUPERVISE_DEPT_CODE": "F000000",
"BIDDING_ELIGIBILITY": "监理（含代建）投标人要求具备水利部颁发的水利工程施工监理乙级及以上资质的独立法人，在人员、设备及资金方面具有相应的监理（含代建）能力,总监理工程师应具有监理工程师执业资格，并具有工程类高级职称。",
"DATA_CREATE_TIME": "2022-03-10 11:15:00",
"attachment": [
{
"attachmentCode": "",
"attachmentFileName": "",
"fileType": "",
"dataTimestamp": "",
"md5": "",
"fileUrl": "{MyDomain}:{Port}/{Path}/Attachment.pdf"
}]
}]
};
// 小程序数据编辑页点击上一步，业务页面收到触发通知，执行此函数
function PreviousCallback() {
console.log("PreviousCallback");
// 提示确认离开互连互信对接小程序
alert("点击了上一步，通知交易平台离开互连互信对接小程序");
}
// 小程序将完成编辑的文件上传平台，业务页面收到上传结果通知，执行此函数
function SaveFileCallback(data) {
console.log("SaveFileCallback");
// 打印上传文件结果信息
console.log("调用接口保存文件返回结果：");
console.log(data);
}
// 小程序流程结束，业务页面收到触发通知，执行此函数
function FinishCallback() {
console.log("FinishCallback");
// 文件上传成功后，结束操作，关闭小程序
alert("操作结束，通知交易平台离开互连互信对接小程序");
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
# C#客户端
private void FormDemo_Shown(object sender, EventArgs e)
{
//定义小程序传回状态信息的事件
ocx1.EbinterlinkintegrationReadyCallback += new Ocx.EventHandler(EbinterlinkintegrationReadyCallback);
ocx1.LoadTemplateCallback += new Ocx.EventHandler(LoadTemplateCallback);
ocx1.PreviousCallback += new Ocx.EventHandler(PreviousCallback);
ocx1.SaveFileCallback += new Ocx.EventHandler(SaveFileCallback);
ocx1.FinishCallback += new Ocx.EventHandler(FinishCallback);
//引入小程序
ocx1.LoadWebFrame(iframeUrl);
}
string iframeUrl = "https://{IP}:{PORT}/dist/ebinterlinkintegrationindex.html";
public OcxModel.InitModel jsonInit = new OcxModel.InitModel()
{
platformCode= "A0000000001", // 平台编码
watermarksContent="中招互连", // 文件水印，为空则不加水印
//exchangeFileAddress="http(s)://{IP}:{PORT}" //文件上传服务Host，不填取默认值
};
public OcxModel.TemplateModel jsonTemplate = new OcxModel.TemplateModel()
{
fileXid = "fileXid3333",
businessObject = "projecTenderProjectBidsection"
};
public string strPushData = "业务数据json字符串";
public void EbinterlinkintegrationReadyCallback(string param)
{
Console.WriteLine("EbinterlinkintegrationReadyCallback");
// 小程序内部加载就绪后，可以传入小程序初始化信息
ocx1.SendMessage("init", jsonInit);
// 小程序查找加载模板
ocx1.SendMessage("findAndLoadTemplate", jsonTemplate);
}
// 小程序加载模板成功，业务页面收到触发通知，执行此函数
public void LoadTemplateCallback(string param)
{
Console.WriteLine("LoadTemplateCallback");
// 小程序成功加载模版后，可以向文档传入json数据
object jsonObject = this.GetJsonObject<OcxModel.projecTenderProjectBidsection>(strPushData);
ocx1.SendMessage("pushDataToTemplate", jsonObject);
}
public T GetJsonObject<T>(string s)
{
return Newtonsoft.Json.JsonConvert.DeserializeObject<T>(s);
}
// 小程序数据编辑页点击上一步，业务页面收到触发通知，执行此函数
public void PreviousCallback(string param)
{
Console.WriteLine("PreviousCallback");
// 提示确认离开互连互信对接小程序
ocx1.Alert("上一步，中断操作");
}
// 小程序将完成编辑的文件上传平台，业务页面收到上传结果通知，执行此函数
public void SaveFileCallback(string param)
{
Console.WriteLine("SaveFileCallback");
// 打印上传文件结果信息
Console.WriteLine("调用接口保存文件返回结果：");
Console.WriteLine(param);
}
// 小程序流程结束，业务页面收到触发通知，执行此函数
public void FinishCallback(string param)
{
Console.WriteLine("FinishCallback");
// 文件上传成功后，结束操作，关闭小程序
ocx1.Alert("操作结束，返回");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
← 第二步：选择对接方式 第四步：测试上线 →