华为云物联网平台的微信小程序开发
第0章 简介
上上期出了一个华为云物联网平台的Android APP应用开发教程, 根据后台的私信,包括华为云物联网IOT论坛里和公众号里,发现大家对物联网平台的移动端的开发需求还是很大的,接下来,带大家完成一个华为云物联网平台的微信小程序开发教程,由于版主也是在前两天刚刚学的微信小程序开发,下面的教程主要是以实现功能为主,对一些排版布局、界面效果等并没有太多设计(也是刚学习,技术有限),就简单的制作了本期教程。
下面是开放测试的效果和个人使用的一个版本的效果,大家可以微信扫描下方二维码,填入自己的信息进行测试(终端节点未全部开通,详见文末)
第1章 整体流程概述
1. 开发准备
2. 认证鉴权
3. 获取设备影子
4. 解析设备影子获取属性
第2章 初始化配置
一、 开发前准备
1. 开发身份:
如果是纯测试小程序开发的话,大家可以在微信公众平台申请一个测试号,很快很方便;
正式开发的话,大家可能需要有一个公众号,具体准备就不在这里细讲,相关问题可以打在评论区或后台留言。
2. 开发环境
这里使用的是微信小程序官方的微信开发工具
二、初始化
1、 新建工程
这里我们使用的是:不使用云服务的JavaScript-基础模板
2、 初始化工程
(1) 删除模板的界面相关文件
我们在界面管理中删除模板文件,然后新建一个page,新建时我们只需要输入名称,回车后会自动生成4个配置文件
(2) 修改app.json和TEST.wxml文件,如下图
第三章、 认证鉴权(获取token)
一、微信小程序的wx.request:
方法:request,这个方法是完成功能的核心方法
wx.request({url: '',data:'',method: '', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECTheader: {}, // 设置请求的 header success: function(res){// success// success},fail:function(){// fail},complete: function() {// complete} });
二、 包装request方法为gettoken方法
三、 认证鉴权
1. 查看帮助文档
认证鉴权_设备接入 IoTDA_API参考_应用侧API参考_如何调用API_华为云
我们POST请求https://iam.cn-north-4.myhuaweicloud.com/v3/auth/tokens 链接,请求带的数据为上面那一大段JSON 数据,返回的消息中解析出消息头的X-Subject-Token值,即为token
2. 补充代码
(1) gettoken函数
(2) 初始数据变量
(3) 绑定触发函数(事件)
在TEST.js文件中为按钮添加一个事件,按钮按下调用此函数,并在TEST.wxml中为按钮绑定事件
(4) Request的合法域名设置
微信小程序中使用到了https://iam.cn-north-4.myhuaweicloud.com/ 链接进行request,直接运行会显示不合法域名,我们需要小程序后台加入
(5) 编译运行
编译运行之后,单击按钮,查看控制台,我们也可以查看完整消息以及token的位置:
(6) 解析token
注意:我们可以看到js语言中,解析的token是带有双引号的,我们在调用API时是不带双引号的,所以程序中把双引号去掉了
(7) 传出token
由于request的回调函数的异步问题,不能很好的修改函数外的变量,我们再写一个函数来设置data里的token
然后在回调函数中调用此函数:
(8) 编译运行并单击按钮
第四章、 获取设备影子
一、 查看帮助文档
查询设备影子数据_设备接入 IoTDA_API参考_应用侧API参考_设备影子_华为云
由官方的帮助文档可知,我们在查询设备影子时:
GET请求的链接:https://{Endpoint}/v5/iot/{project_id}/devices/{device_id}/shadow
消息头:Content-Type: application/json
X-Auth-Token: ********
然后就可以接收到设备影子数据的消息
二、 补充程序代码
1. getshadow函数
2. Request的合法域名设置
小程序中使用到了https://iotda.cn-north-4.myhuaweicloud.com链接,我们需要小程序后台加入,步骤同上
3. 调用getshadow函数
我们为了确保在获得token后调用此函数,还是异步问题所以就写在settoken函数里了,其他位置在实际运行时效果不太理想,作为小白,暂时还没有想到其他的好方法,如果大家有比较好的方法可以评论留言或私信。
三、 编译运行
我们可以查看到控制台接收的消息,我们逐层点开可以找到我们想要的数据信息,在信息上停留鼠标可查看其在json数据的位置
第五章、 解析设备影子数据
一. 补充函数
二. 编译运行
二、 解析设备影子获取属性
1. 添加设置属性函数
2. 调用函数
3. 编译运行
4. 界面“优化”
第六章 结语
到这为止,我们就完成了基本的华为云物联网平台的小程序开发,其他的API调用同理,不同的就是链接和解析的参数不同,重申一下哈,由于小编也是最近刚接触微信小程序开发,这个程序旨在给大家提供华为云物联网平台的微信小程序的功能设计参考,其他设计不足之处,请多多见谅,后续会不断改进和优化,期待着您的见证。如果大家在上述操作遇到一些问题,可以在评论区留言或者私信,小编都会及时解答,如果大家需要上述工程的Page文件,可以在公众号“IOT趣制作”回复关键字“华为云微信小程序”获取。
补充:小程序的合法域名中,我只添加了下面这些,如果您的项目所属位置不在下方,在使用小程序时是无法正常工作的,如果特别需要,请留言您的endpoint,我会在小程序后台添加该域名
华为云物联网平台的微信小程序开发相关推荐
- 华为云物联网平台微信小程序开发教程2.0【完整详细教程】
一.简介 在之前曾发布过一篇文章"华为云物联网平台的微信小程序开发",在最近接到部分用户私信在使用开发过程中出现的问题,例如API访问的"401"现象等问题 ...
- 华为云物联网平台的C#应用开发(基本接口调用)
大家好,之前先后发布了华为云IOT的Java.Android.微信小程序的华为云物联网平台的上位机应用开发教程,基本介绍了不同环境下的华为云物联网平台的接口调用方法,最近接到了两个小伙伴咨询华为云物联 ...
- 物联网设备管理平台(微信小程序版)----集成对EMQ物联网设备和阿里云物联网设备的管理
目录 前言 页面设计 首页 我的 设备操作页面 用户详情页面 代码设计 关于用户认证以及设备管理 关于连接EMQ物联网平台 关于连接阿里云物联网平台 首页 服务端 用户认证 总结 前言 前面已经简单的 ...
- 解放重复劳动丨华为云IoT API Explorer对接小程序实现系统化应用
摘要:<物联网平台接口调用实验>详细讲解了API Explorer的应用,根据提供的接口,结合真实案例,制作了一个小程序,真正的把它应用起来,解放重复劳动,小程序是一个很好的平台,作为应用 ...
- 教你如何使用esp8266接入华为云物联网平台(IOTDA)(Arduino IDE开发)
教你如何使用esp8266接入华为云物联网平台(IOTDA)(Arduino IDE开发) 一.简介 esp8266系列作为低功耗高性价比的嵌入式无线网络控制模块,深受对嵌入式感兴趣的 ...
- 一键搭建微信小程序开发环境 及demo运行(腾讯云上一键搭建node.js服务器环境,PHP,Java,.NET服务类似)
一.首先准备下本地环境(本地就需要一个微信开发工具) 1.首先得有一个微信小程序账号,登陆微信小程序首页:mp.weixin.qq.com,点击右上角立即注册. 注册登陆后,首页填写一些小程序基本信息 ...
- ***腾讯云直播(含微信小程序直播)研究资料汇总-原创
***腾讯云直播(含微信小程序直播)研究资料汇总-原创 原文: ***腾讯云直播(含微信小程序直播)研究资料汇总-原创 这段时间抽空研究了下直播技术,综合比较了下腾讯云直播的技术和文档方面最齐全,现把 ...
- 微信小程序开发笔记 支付篇②——微信小程序通过小程序云实现微信支付功能
文章目录 一.前言 二.开通微信支付 2.1 关联商户号 2.2 添加商户号 2.3 管理员授权 三.云函数开发 3.1 新建云函数 3.2 云函数代码 3.3 云函数上传并部署 四.小程序调用 4. ...
- 合宙Air780e+luatos接入华为云物联网平台完成设备通信与控制
一.简介 1.项目介绍 之前发布的文章有esp8266的wifi模块和BC20的NB模块与华为云物联网通信为主,本期文章采用了合宙的4G LTE Cat.1模块,编程语言用的是lua,整体来说代码比较 ...
最新文章
- 马化腾首谈腾讯开源时,鹅厂已在Github上放出82个项目,标星24万+ | 附AI项目链接...
- Ceph 故障修复记录(持续更新)
- php manager如何安装目录,宝塔面板安装OneManager-php – Onedrive的列表索引和管理程序...
- python 打开当前目录的txt文件-Python - 读取其他文件夹/目录中的文本文件
- 虚拟桌面模拟查找点击自绘控件
- 【正一专栏】梅西大婚——一辈子守候你都是值得的
- 5G NR RLC:PDU Parameters
- 【Java爬虫】爬取网页中的内容,提取其中文字
- KnockoutJS 3.X API 第七章 其他技术(2) 使用扩展器来增加可观察量(监控属性)
- Flutter基础—定位对齐之填充
- [转载] Python语言程序设计基础(第二版)嵩天等课后习题答案
- 分享:20 本优秀的 Python 电子书
- 十、基于FPGA的PCIE协议介绍(一)
- 电商小程序实战教程-分类导航
- CAD图纸转换成高质量的PDF文件,两种方法一步搞定哦
- 后浪:移动互联网时代的数据中心设计
- Ubuntu20.04开放指定端口
- 微信公众号发送模版消息详细过程
- 肠道菌群检测在临床感染判别中的应用
- 谁是未来人类?虚拟人已进入日常生活