氦氪云入门教程06-在PC端调试H5设备控制页面

lawrencedon

每次写好H5设备控制页面之后，都要先上传到我们的后台，然后在我们的丛云APP或者基于我们SDK定制的APP上进行实际设备的调试。为了方便开发者调试，我写了myHekrSDK.js，myHekrSDK模拟Hekr APP/SDK提供的H5 JS接口，可以直接在浏览器中调试接入氦氪云平台的H5页面，目前支持的接口有：Hekr.send, Hekr.recv, Hekr.currentUser

按照以下步骤我们可以将 氦氪云入门教程05-丰富设备控制页面功能 中提到的带小夜灯的温湿度计的H5页面改成PC端调试版。
1.将附件myHekrSDK.zip中js文件夹中的以下3个文件拷贝至H5页面根目录下的js文件夹
   reconnecting-websocket.min.js
   base64.min.js
   myHekrSDK.js

2.在index.html里加入对第1步中新增的3个js文件的引用
修改前：

修改后：


3.修改附件myHekrSDK.zip中设备列表/js文件夹中的index.js中的内容


4.双击打开附件myHekrSDK.zip中设备列表/index.html

点击带小夜灯的温湿度计，会跳出设备信息对话框，将devTid，ctrlKey，productPublicKey拷贝下来备用。


5.修改H5页面根目录下js文件夹中myHekrSDK.js的内容



6.修改H5页面根目录下js文件夹中main.js的内容
修改前：

修改后：

修改前：这段代码的目的是在页面加载完毕的时候，下发指令给设备，查询当前的设备状态，在PC端调试版中，我们用新增的一行代码来完成这个功能。

修改后：

新增一行代码：


7.双击H5页面根目录下的index.html，页面中已经显示当前的温湿度和小夜灯状态了，其他页面的功能也可以正常使用


8.按F12键进入浏览器的调试模式，至于如何调试H5代码，请自行百度搜索相关教程

我用的是360极速浏览器，也可以使用chrome浏览器。

总结一下：
myHekrSDK用到了jQuery，所以请在H5页面中引入jQuery，而且要在myHekrSDK之前引入。
myHekrSDK使用到的云端接口如下：
3.5 使用账号登录
2.2 APP和云端建立通道
2.6 设备、APP发送心跳
myHekrSDK涉及的设备云端通信协议如下：
2.1 appSend
3.5 devSend

设备列表页面使用到的云端接口如下：
3.5 使用账号登录
4.1.2 列举设备列表

附件：
myHekrSDK.zip (47.22 KB, 下载次数: 8)

2017-8-10 14:00 上传

点击文件名下载附件

另外附上 温湿度计PC端调试版.zip，SDK插座PC端调试版.zip，只要修改myHekrSDK.js中的内容就可以使用了。
温湿度计PC端调试版.zip (12.22 KB, 下载次数: 8)

2017-8-10 14:00 上传

点击文件名下载附件

SDK插座PC端调试版.zip (10.88 KB, 下载次数: 8)

2017-8-10 14:00 上传

点击文件名下载附件