文档中心
智城云 文档中心
H5开发
文档编辑

H5开发流程

整理属性表

属性表是设备与app之间通信的协议载体，设备与app之间按照属性表的约定进行通信，实现设备的控制及设备状态展示。

输出属性表

根据电控说明书、交互文档，按照属性表模板，填写模板中的产品信息，整理出设备的功能属性及值。

归档属性表

(1) 模板：整理属性表时，格式请按照附件中的模板整理。

(2) 属性表存放：属性表文件保存到所属项目的svn上的06_软件\01_软件需求\01_属性表目录。

确认属性表

与设备开发人员确认属性，分两种：

(1) 使用通用模块的设备，与电控开发工程师确认；

(2) 使用定制模块的设备，与模块开发工程师确认。

确认设备的功能属性是否齐全，app需要的值设备是否能够返回。

在云平台中添加属性表

打开企业开发者平台，输入登录名和密码，点击登录，

img

​ 登录之后，点击创建新产品；

img

​ 点击【创建产品】，创建产品基础信息，

img

在基础信息中可以获取产品的类型和型号信息。同时，产品创建完成后可以定义产品属性，进行产品功能属性的定义，

img

我们提供适合于多种行业、不同品类产品的属性模板，当属性模板不满足需求时，可以添加自定义属性，

img

属性类型：

1） 数值类：有取值范围的类型，例：冰箱-冷藏室温度取值范围是1℃~10℃

2） 开关类：默认仅有开、关两种状态，数值0代表“关”，数值1代表“开”

3） 字符类：支持设备属性与云端的字符串传递，例：hellofit心电图数据

4） 枚举类:有固定取值的类型。例：冰箱工作模式key：1，value：速冻；key：2，value：假日；key：3，value：智能；key：4，value：自定义

5） 二进制类：按位设置功能，一个字节可支持多个功能，例：微波炉，上管开关：1~1位，上管温度：2~9位，下管开关：10~10位，下管温度：11~18位

容差范围：针对属性值属性，指数值型数据可上下波动的误差范围，只有超过该范围才会立即上报，如果一直在该范围内，则5S上报一次。

是否可控：定义该功能是否可以被控制，例：空气质量检测值“PM2.5”为10，则为”不可控”；空调的”开关”参数，则为”可控”

是否存储：定义属性的状态变化数据是否需要在云端存储

仅主人权限：该功能的可见范围，是指该功能仅对主人可见，否则对所有绑定该设备的人可见（第一个绑定设备的人被定义为主人，其他则为客人，主人权限可转移）。

权限控制：

1） 不限制：客户端侧在任何环境下都可以控制该属性

2） 不允许访问：客户端侧在任何环境下都不可以控制该属性

3） 仅允许局域网访问：客户端侧只能在局域网下可以控制该属性

4） 仅允许远程访问：只能通过远程控制（广域网）该属性

属性ID和属性类型保存后不能修改，请谨慎操作。

自定义属性提供修改和删除的功能。

配置完属性后，可以继续完善产品的其他配置信息，如故障和告警、配网引导等，也可进行硬件接入开发或产品UI设计。

添加设备层级

点击【APP研发-APP产品层级】进入APP层级管理模块，此模块用于添加某个产品型号在APP的层级节点，帮助用户完成此型号下设备的配网绑定，

img

1、每一个企业有一个默认的企业根节点，如果您的企业可能存在多个APP，建议您在企业根节点下创建子节点作为APP的初始根节点。

2、每一个节点会有一个节点ID，APP研发时需要将作为APP根节点的节点ID写到APP中，那么这个节点下的所有子节点将会在您的APP上显示。

3、只有最底层的层级节点才会实际参与配网，因此创建节点的时候请注意合理配置层级，节点中配置了企业的某个产品型号，则可以在APP端用这个节点给这个型号的设备进行配网。

4、还可以添加其他企业的型号层级，在您的APP上绑定其他企业的设备。

5、产品类型和产品型号两个字段不支持修改，请谨慎操作。

6、对于创建的节点可以修改和删除。

此模块分为左右两个模块，左侧显示层级节点树列表，右侧显示节点的详情。选中一个节点可以对这个节点进行【新增】或者【删除】即添加子节点或者删除这个节点，同时右侧会显示选中节点的详情。

层级节点在APP端的显示效果如下，

img

H5方案接入

H5页面中，卡片页面无法用H5实现，还需要xml配置实现。设备详情页面用h5实现，可以按照下面的步骤来做。

创建设备主页面

创建一个html页面，名字为index.html，必须为这个名字，其它名字app不识别。

引入H5 sdk

在index.html引入一个js文件：

<scriptsrc=”js/machtalk_ws_sdk.js”>

H5开发sdk

初始化sdk

在index.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
function handleResp(resp) {

console.log(JSON.stringify(resp));

var as = resp["as"];

for (varkey in as) {

if (key == "1") {

if (as[key] == "1") {

$(".onOff-btn.on-btn")[0].innerText= "已打开";

$("body")[0].className= "on-bg";

} else {

$(".onOff-btn.on-btn")[0].innerText= "已关闭";

$("body")[0].className= "off-bg";

$(".wonder-txt1").hide();

$(".wonder-txt2").hide();

}

      } else if (key == "2") {

$("#power")[0].innerText= Math.round(as[key] / 100);

powerClock.setValue(Math.round(as[key] / 100));

} 

   }

}



function initSDK() {

vartoken = getCookieValue("machtalk_ws_token");

varopenId = queryString("openid");

if (null == token || token == undefined || token == "") {

alertNew("登录提示", "会话过期,请重新登录", function () {

if (openId) {

window.location.href= "../redirect.html?openid=" + openid;

} else {

window.location.href= "../redirect.html";

}

        });

return;

}

deviceId = queryString("deviceId");

varloginParam = {

"token": token

    };

varlistenners = {

"kickoff": function (data) {



},

"updateDeviceName": function (data) {

$(".bar-title.cff")[0].innerText= data;

},

"online": function () {

$(".off-line").hide();

$(".blacklay").hide();

client.query(deviceId, handleResp);

},

"offline": function () {

$(".off-line").show();

$(".blacklay").show();

},

"lanOnline": function (data) {

if (data == 1) {

$(".online").show();

} else {

$(".online").hide();

}

        },

"onlyLanOnline": function (data) {

        },

"post": function (data) {

handleResp(data);

},

"otaPost": function (data) {

        },

"fault": function (data) {

//故障

}

    }

varcallbackList = {

"error": function (data) {

alert("错误提示", "连接错误");

},

"close": function (data) {

//            alert("提示", "连接关闭");

}

    }

    client = new MachtalkClient(loginParam, function (resp) {

if (resp.code== 0) {

client.query(deviceId, handleResp);

} else {

alertNew("登录提示", "会话过期,请重新登录", function () {

if (openId) {

window.location.href= "../redirect.html?openid=" + openid;

} else {

window.location.href= "../redirect.html";

}

            });

return;

}

    }, listenners, callbackList);

}

在页面开始的时候，调用initSDK()方法，如在body的onload方法中，页面加载成功，会回调handleResp(resp)方法，设备的属性信息通过参数resp返回到方法中，在此方法中，根据属性的值处理界面逻辑。

设备状态上报后，同样会回调handleResp(resp)方法，可实现设备状态更新。

需要向设备发送控制命令时，调用client.opt(deviceId,”10”, “0”);方法中的参数根据实际情况调整。

设备在线状态处理

Sdk提供了online()、offline()、lanOnline()、onlyLanOnline()四个回调方法，相应逻辑可以在此方法中处理。

l online() 设备上线时回调

l offline() 设备下线时回

l lanOnline()局域网在线时回调

l onlyLanOnline() 仅局域网在线时回调

页面跳转原则

功能点需要从设备主界面跳转到另一个界面时，分为真跳转和假跳转。

l 真跳转：打一个新的html。如果功能不涉及长连接通信，即不走协议，可以使用真跳转。

l 假跳转：用div的方式，模模拟打开一个页面。功能需要通过协议才能完成，只能使用假跳转。(如果考虑微信和app用一套html的话，要考虑假跳转)

上传配置文件

将写好的所有配置文件，打压成zip压缩包，

img

选中这些文件，右击，进行压缩，压缩为zip格式，

img

登录云平台，将开发完的设备UI资源上传至平台，

img

关联APP：客户端设备绑定时会根据关联的APP下载相应的产品UI包资源，若想在企业所有APP中均获取此产品的UI包资源，请选择“默认通用”。注：关联APP目前只支持“默认通用”，选择其他APP无效。

版本号：版本号需高于当前已发布最高版本。

适配类型：根据APP适配手机类型，选择横屏、竖屏、电视、pad。

UI调试发布

产品UI调试，两种方式：推送给指定用户验证调试、虚拟设备调试。

1、推送给指定APP用户验证，前提是这个用户已经绑定了这个型号的设备，

img

在APP上获取该设备最新的配置文件，在配置页面中控制设备，查看是否能正常使用。

2、虚拟设备验证，首先用企业APP扫码添加虚拟设备，然后进行在线调试，

img

在APP中点击设备功能，查看设备日志，判断功能是否能正常使用。

验证通过后，和产品一起进行发布，APP端用户获取的设备页面是已发布且版本最高的UI资源。

Copyright © 2018 中科智城版权所有 鲁ICP备13027167号-5 鲁公网安备37081102000233号