查看: 1950|回复: 0

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

[复制链接]
  • TA的每日心情
    开心
    2016-11-11 12:32
  • 签到天数: 2 天

    [LV.1]初来乍到

    发表于 2017-8-10 14:01 | 显示全部楼层 |阅读模式
    本帖最后由 lawrencedon 于 2017-8-10 14:05 编辑

    每次写好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文件的引用
    修改前:
    194742saijqyqtpgdgsyyy.png
    修改后:
    194747jpgvhw47kgpckktg.png

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

    4.双击打开附件myHekrSDK.zip中设备列表/index.html
    195139x5lmkkb9kl9klyk2.png
    点击带小夜灯的温湿度计,会跳出设备信息对话框,将devTid,ctrlKey,productPublicKey拷贝下来备用。
    195145dof69owhhlghphxd.png

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

    6.修改H5页面根目录下js文件夹中main.js的内容
    修改前:
    195630tlsml7djsiu0nd77.png
    修改后:
    195635nu0bcacuh85p0cz5.png
    修改前:这段代码的目的是在页面加载完毕的时候,下发指令给设备,查询当前的设备状态,在PC端调试版中,我们用新增的一行代码来完成这个功能。
    195714ehjp3a3ec3mweacu.png
    修改后:
    195718mlre9kr5rxssojsy.png
    新增一行代码:
    195759z2izevir00rbibv2.png

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

    8.按F12键进入浏览器的调试模式,至于如何调试H5代码,请自行百度搜索相关教程
    201039m0xr1yhhy07t0r01.png
    我用的是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, 下载次数: 5)
    您需要登录后才可以回帖 登录 | 立即注册  

    本版积分规则

    热门推荐

    【原创】 drawbot平面关节scara机械臂写字机 画画机器人直播...
    【原创】 drawbot平面关节
    这个项目上个月就在做了,结构和代码反反复复改了多次,加上自己又太忙,一直没来得及
    【干货分享】国产mega2560改进板原理图PCB图纸altium designer18
    【干货分享】国产mega2560
    暂时付费分享,基于某宝上 mega2560 R3 改进版抄的,算是最便宜的mega2560了,自己也
    micro:bit编程机器人小车-麦昆,快来免费领!!!
    micro:bit编程机器人小车-
    【亲子试用大作战】micro:bit编程机器人小车-麦昆,快来免费领! DFRobot的免费试用好
    OLED 128*64自制可达10000000个选项的菜单(已更新)
    OLED 128*64自制可达10000
    OLED 128*64自制可达10000000个选项的菜单 温馨提示: 建议占个楼再食用本帖子
    求助,arduino nano发热严重
    求助,arduino nano发热严
    我有一块arduino nano板,装在一个扩展板上(如下图),用扩展板上的外接电源接口(资
    Copyright   ©2015-2016  Arduino中文社区  Powered by©Discuz!   ( 蜀ICP备14017632号-3 )
    快速回复 返回顶部 返回列表