电子商务网站建设选择服务器要考虑的因素有,开源门户网站建设方案,个人网站怎么申请注册,新冠三阳意味着什么一、简介 在之前曾发布过一篇文章“华为云物联网平台的微信小程序开发”#xff0c;在最近接到部分用户私信在使用开发过程中出现的问题#xff0c;例如API访问的401现象等问题#xff0c;在重新查看上面的文章教程时发现教程内容的步骤不详细#xff0c;现对教…一、简介 在之前曾发布过一篇文章“华为云物联网平台的微信小程序开发”在最近接到部分用户私信在使用开发过程中出现的问题例如API访问的401现象等问题在重新查看上面的文章教程时发现教程内容的步骤不详细现对教程重新整理将具体的开发过程以及工程源码分享给大家文章可面向微信小程序开发的零基础小白。
二、开发前准备 由于我们小程序对接的时华为云物联网平台所以我们需要提前在华为云物联网平台创建产品及设备并准备以下相关信息
1. 产品ID、设备ID、设备属性 在大家完成华为云物联网平台的MQTT数据通信测试后都回准备好了相关信息如果还没有创建产品有设备可以参考这篇文文章:华为云物联网平台创建产品与设备含MQTT.fx测试.
2. 服务ID、控制名称、控制参数 在上传设备属性和命令下发时需要使用到服务ID、控制名称和控制参数具体设置如下图
3. IAM账户 1) 简介 IAM账户对初次接触华为云物联网平台的应用侧开发的伙伴来说可能比较陌生首先介绍一下在我们使用API时的流程API的使用需要通过IAM服务鉴权来获取token然后将这个Token作为API的参数之一官方开发文档华为云物联网平台——API使用指导如下图 2) 创建IAM账户 首先进入华为云控制台在右上角进入统一身份认证平台 然后点击右上角的创建用户 然后按下图创建用户 3) IAM账户登录测试 首先复制登录链接 然后打开新的浏览器推荐或者退出当前账户登录然后进入刚才复制的链接 输入新建的IAM用户和密码 能够登录即可登陆后如下图所示
4. 相关API 1) 获取Token 查看开发文档Token认证如下图可知需要构建一个HTTP请求并且按下述格式完成调用。 其中地区可以在控制台接入信息中的地址中查看大家选择自己对应的地区不要随意修改 我的HTTP请求JSON数据格式
{auth: {identity: {methods: [password],password: {user: {name: funiot_xyz,password: www.funiot.xyz,domain: {name: hw_0086xxxxxxxxxxx}}}},scope: {project: {name: cn-north-4}}}
}2) 获取设备属性通过设备影子 在完成token获取后我们即可进行其他API的调用例如获取设备影子来解析设备属性只需要利用HTTP完成对应URL的GET请求然后解析响应数据即可。
GET https://{endpoint}/v5/iot/{project_id}/devices/{device_id}/shadow3) 下发设备命令 同获取设备影子的API类似也是利用HTTP完成对应URL的相应请求然后解析响应数据即可在下发设备命令时我们暂时对返回结果不关心。
POST https://{endpoint}/v5/iot/{project_id}/devices/{device_id}/commands{service_id : Dev_data,command_name : Control,paras : {led : ON}
} 4) 终端节点Endpoint 大家可能看到了上面请求的URL链接中包含一个Endpoint信息Endpoint为指定承载REST服务端点的服务器域名或IP不同服务不同区域的Endpoint不同我们可以在地区和终端节点中查看例如我的HTTP访问的终端节点为
iam.cn-north-4.myhuaweicloud.com5) 准备信息汇总 截止到目前我们准备的信息有产品ID、设备ID、设备属性、用户名、IAM用户名、IAM用户密码、服务ID、控制名称、控制参数、相应API的数据格式等接下来我们就可以开始微信小程序的开发了。
三、微信小程序开发
1. 新建工程 1) 环境准备 官网下载并安装“微信开发工具”微信开发者工具下载地址与更新日志 2) 获取AppID 进入微信小程序开发管理网页微信小程序开发管理然后点击开发设置复制AppID。 3) 新建工程 填写在开发管理中复制的AppID并选择“JavaScript基础模板”然后点击“确定”等待项目生成 4) 精简工程 我们把模板中无关的信息进行一下删减首先删除page中的“index”以及“logs”界面并新建page “Huawei_IOT” 系统会自动生成相关文件 修改app.json文件删除界面引用 然后打开“Huawei_IOT.wxml”文件这是小程序的页面布局文件大家根据需要完成自己的界面设计
2. 初始设计 1初始界面设计 这里以非常简单的布局设计为例在”Huawei_IOT.wxml“文件中添加三个按钮和两个文本提示信息其中一个文本采用变量的形式并为按钮添加触发函数名。
text 提示信息/text
text{{result}}/text
button typeprimary bindtaptouchBtn_gettoken获取token/button
button typedefault bindtaptouchBtn_getshadow获取设备影子/button
button typewarn bindtaptouchBtn_getshadow设备命令下发/button2初始功能设计 然后在“Huawei_IOT.js”文件中的date内补充变量以及按钮触发函数 /*** 页面的初始数据*/data: {result:等待获取token,},/*** 获取token按钮按下*/touchBtn_gettoken:function(){console.log(获取token按钮按下);},/*** 获取设备影子按钮按下*/touchBtn_getshadow:function(){console.log(获取设备影子按钮按下);},/*** 设备命令下发按钮按下*/touchBtn_setCommand:function(){console.log(设备命令下发按钮按下);}, 3初始测试 编译之后在左侧模拟器中点击按钮查看右侧的输出界面可以打印的信息同时左侧模拟器的文本会对应更新 接下来我们便开始完成华为云物联网平台的相关开发。
3. 华为云物联网平台通信 1wx.request方法 wx.request方法用来建立http连接完成GET或POST请求实现各种HTTP API的调用 wx.request方法结构如下
wx.request({url: ,data:,method: , // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECTheader: {}, // 设置请求的 header success: function(res){// success// successconsole.log(res);//打印完整消息},fail:function(){// fail},complete: function() {// complete} });2获取token 在前面我们已经学习了获取token的方法即构建一个HTTP的POST请求并且按对应格式完成调用。 aurl 在wx.request方法中的url为
https://iam.cn-north-4.myhuaweicloud.com/v3/auth/tokens 注意更换自己的产品地区我的是cn-north-4 b添加合法域名 由于微信小程序对域名访问有限制需要手动添加为合法域名首先打开微信小程序开发管理网页微信小程序开发管理然后点击开发设置在服务器域名处点击修改补充上述的根域名注意截止到.com例如
https://iam.cn-north-4.myhuaweicloud.com在项目中点击右上角的“详情”“项目配置”可以看到合法域名已经被添加如果没有可以尝试点击刷新 如果刷新后仍没有请检查文章刚开始复制的AppID是否一致如果不一致可在右上角“详情”“基本信息”中修改 此处有小伙伴因为AppID有误导致合法域名未有效添加引起从而导致API调用失败的问题。 cdata 在wx.request方法中的data为上图URL下方的数据 将自己的信息填写完整例如我的data为
{auth: { identity: {methods: [password],password: {user: {name: funiot_xyz,password: yourpassword,domain: {name: hw_0086xxxxxx}}}},scope: {project: {name: cn-north-4}}}}建议大家在填写后进行json格式化验证避免在填写过程中出现json数据格式错误在线JSON校验格式化工具。有部分小伙伴因为这个问题失败。 dmethod method为POST: eheader 请求头为:
{content-type: application/json }f补充request方法
将上述整理的所需数据填写完补充如下所示 /*** 获取token*/gettoken:function(){console.log(开始获取。。。);//打印完整消息var thatthis; //这个很重要在下面的回调函数中由于异步问题不能有效修改变量需要用that获取wx.request({url: https://iam.cn-north-4.myhuaweicloud.com/v3/auth/tokens,data:{auth: { identity: {methods: [password],password: {user: {name: funiot_xyz,password: xxxxxxxx,domain: {name: hw_0086xxxxxxxx}}}},scope: {project: {name: cn-north-4}}}},method: POST, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECTheader: {content-type: application/json }, // 请求的 header success: function(res){// success// successconsole.log(获取token成功);//打印完整消息console.log(res);//打印完整消息},fail:function(){// failconsole.log(获取token失败);//打印完整消息},complete: function() {// completeconsole.log(获取token完成);//打印完整消息} });},g按键事件添加调用
this.gettoken();h编译运行 在输出端口可以看到打印了HTTP返回的消息展开可以看到token i添加解析 在wx.request方法中的 success回调函数补充解析token的代码
var token;
tokenJSON.stringify(res.header[X-Subject-Token]);//解析消息头token
tokentoken.replaceAll(\, );
console.log(获取token\ntoken);//打印token
wx.setStorageSync(token,token);//把token写到缓存中,以便可以随时随地调用再次编译运行可以看到提取了token j获取token完整函数 /*** 获取token*/gettoken:function(){console.log(开始获取。。。);//打印完整消息var thatthis; //这个很重要在下面的回调函数中由于异步问题不能有效修改变量需要用that获取wx.request({url: https://iam.cn-north-4.myhuaweicloud.com/v3/auth/tokens,data:{auth: { identity: {methods: [password],password: {user: {name: funiot_xyz,password: xxxxxxxx,domain: {name: hw_0086xxxxxxxx}}}},scope: {project: {name: cn-north-4}}}},method: POST, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECTheader: {content-type: application/json }, // 请求的 header success: function(res){// success// successconsole.log(获取token成功);//打印完整消息console.log(res);//打印完整消息var token;tokenJSON.stringify(res.header[X-Subject-Token]);//解析消息头的tokentokentoken.replaceAll(\, );console.log(获取token\ntoken);//打印tokenwx.setStorageSync(token,token);//把token写到缓存中,以便可以随时随地调用},fail:function(){// failconsole.log(获取token失败);//打印完整消息},complete: function() {// completeconsole.log(获取token完成);//打印完整消息} });},获取了token之后我们就可以开始使用其他API啦接下来以获取设备影子为例。 3获取设备属性通过设备影子 在前面我们已经学习了调用设备影子API的方法即只需要利用HTTP完成对应URL的GET请求然后解析响应数据即可。首先还是使用wx.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} });aURL 根据文档可知其中URL为 我们将自己的参数补充进去例如我的URL为
https://iotda.cn-north-4.myhuaweicloud.com/v5/iot/08e942062b80f46xxxxxxxxxxxxxx/devices/61fb2d7fde993xxxxxxx_esp8266_test01/shadowb添加合法域名 同上一次添加合法域名一样打开微信小程序开发管理网页微信小程序开发管理然后点击开发设置在服务器域名处点击修改补充上述的根域名注意截止到.com例如 cdata 此处消息体没有数据我们可以直接忽略
data:dmethod method采用GET请求 eheader 消息头为
{content-type: application/json,X-Auth-Token:token }将获取的token作为参数X-Auth-Token的值instance-Id可以忽略 f补充request方法 将上述信息补充到wx.request中例如 getshadow:function(){console.log(开始获取影子);//打印完整消息var thatthis; //这个很重要在下面的回调函数中由于异步问题不能有效修改变量需要用that获取var tokenwx.getStorageSync(token);//读缓存中保存的tokenconsole.log(我的toekn:token);//打印完整消息wx.request({url: https://iotda.cn-north-4.myhuaweicloud.com/v5/iot/08e94206xxxxxxxxxxxxxxxxxx/devices/61fb2d7fde99xxxxxxxxx_esp8266_test01/shadow,data:,method: GET, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECTheader: {content-type: application/json,X-Auth-Token:token }, //请求的header success: function(res){// success// successconsole.log(res);//打印完整消息},fail:function(){// failconsole.log(获取影子失败);//打印完整消息},complete: function() {// completeconsole.log(获取影子完成);//打印完整消息} });},g按键事件调用
this.getshadow();h编译运行 在输出端口可以看到打印了HTTP返回的消息展开可以看到设备属性数据 i添加解析 在wx.request方法中的 success回调函数补充解析设备属性的代码再次编译运行
var shadowJSON.stringify(res.data.shadow[0].reported.properties);
console.log(设备影子数据shadow);//以下根据自己的设备属性进行解析//我的设备影子{Temp:30,temp:89,Dev_data:77.20592,humi:80,light:3000,GPS_N:3904.2279,GPS_E:11706.2279,warning:1,MPU6050:1,foot:12,led:1,temps:89}var TempJSON.stringify(res.data.shadow[0].reported.properties.Temp);var HumiJSON.stringify(res.data.shadow[0].reported.properties.humi);console.log(温度Temp℃);console.log(湿度Humi%);that.setData({result:温度Temp℃,湿度Humi%});j获取设备属性通过设备影子完整函数
/**
* 获取设备影子
*/getshadow:function(){console.log(开始获取影子);//打印完整消息var thatthis; //这个很重要在下面的回调函数中由于异步问题不能有效修改变量需要用that获取var tokenwx.getStorageSync(token);//读缓存中保存的tokenwx.request({url: https://iotda.cn-north-4.myhuaweicloud.com/v5/iot/08e942062xxxxxxxxxxxxxxxxxx/devices/61fb2d7fde9xxxxxxxxx_esp8266_test01/shadow,data:,method: GET, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECTheader: {content-type: application/json,X-Auth-Token:token }, //请求的header success: function(res){// success// successconsole.log(res);//打印完整消息var shadowJSON.stringify(res.data.shadow[0].reported.properties);console.log(设备影子数据shadow);//以下根据自己的设备属性进行解析//我的设备影子{Temp:30,temp:89,Dev_data:77.20592,humi:80,light:3000,GPS_N:3904.2279,GPS_E:11706.2279,warning:1,MPU6050:1,foot:12,led:1,temps:89}var TempJSON.stringify(res.data.shadow[0].reported.properties.Temp);var HumiJSON.stringify(res.data.shadow[0].reported.properties.humi);console.log(温度Temp℃);console.log(湿度Humi%);that.setData({result:温度Temp℃,湿度Humi%});},fail:function(){// failconsole.log(获取影子失败);//打印完整消息console.log(请先获取token);//打印完整消息},complete: function() {// completeconsole.log(获取影子完成);//打印完整消息} });},4设备命令下发 通过前面的练习我们可以了解到主要的就是访问的URL不同、mode不同消息体和消息头不同完成后解析对应的数据即可在设备命令下发中前面已经介绍了这个API使用方法 aURL 根据文档可知其中URL为 补充参数后我的URL为
https://iotda.cn-north-4.myhuaweicloud.com/v5/iot/08e94206xxxxxxxxxxxxx/devices/61fb2d7fde99xxxxxxxx_esp8266_test01/commands由于此域名与获取设备影子的域名一致此处不用再次添加合法域名。 bdata 此处消息体为 我的data:
{service_id: Dev_data,command_name: Control,paras: { led: 1}}此处同样建议进行JSON格式化避免在填写过程中出现json数据格式错误在线JSON校验格式化工具。 cmethod method采用POST请求 dheader 消息头为
{content-type: application/json,X-Auth-Token:token}e按键事件调用
this.setCommand();f补充request方法 将上述信息补充到wx.request中例如 /*** 设备命令下发*/setCommand:function(){console.log(开始下发命令。。。);//打印完整消息var thatthis; //这个很重要在下面的回调函数中由于异步问题不能有效修改变量需要用that获取var tokenwx.getStorageSync(token);//读缓存中保存的tokenwx.request({url: https://iotda.cn-north-4.myhuaweicloud.com/v5/iot/08e942062b80xxxxxxxxxxxxxx/devices/61fb2d7fde9xxxxxxxxxxxxxx_esp8266_test01/commands,data:{service_id: Dev_data,command_name: Control,paras: { led: 1}},method: POST, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECTheader: {content-type: application/json,X-Auth-Token:token }, //请求的header success: function(res){// success// successconsole.log(下发命令成功);//打印完整消息console.log(res);//打印完整消息},fail:function(){// failconsole.log(命令下发失败);//打印完整消息console.log(请先获取token);//打印完整消息},complete: function() {// completeconsole.log(命令下发完成);//打印完整消息that.setData({result:设备命令下发完成});} });}, g编译运行 在输出端口可以看到打印了HTTP返回的消息展开可以看到命令下发情况 在华为云物联网平台的监控运维中可以看到具体命令 h命令下发完整函数 /*** 设备命令下发*/setCommand:function(){console.log(开始下发命令。。。);//打印完整消息var thatthis; //这个很重要在下面的回调函数中由于异步问题不能有效修改变量需要用that获取var tokenwx.getStorageSync(token);//读缓存中保存的tokenwx.request({url: https://iotda.cn-north-4.myhuaweicloud.com/v5/iot/08e942062b80xxxxxxxxxxxxxx/devices/61fb2d7fde9xxxxxxxxxxxxxx_esp8266_test01/commands,data:{service_id: Dev_data,command_name: Control,paras: { led: 1}},method: POST, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECTheader: {content-type: application/json,X-Auth-Token:token }, //请求的header success: function(res){// success// successconsole.log(下发命令成功);//打印完整消息console.log(res);//打印完整消息},fail:function(){// failconsole.log(命令下发失败);//打印完整消息console.log(请先获取token);//打印完整消息},complete: function() {// completeconsole.log(命令下发完成);//打印完整消息that.setData({result:设备命令下发完成});} });},至此本期教程到此结束大家可以通过这个项目完成基本的华为云物联网平台的设备属性查询与设备控制所有相关代码均在文中给出如有相关问题可以在文章下留言收到留言后会第一时间处理如果需要这个工程的项目文件可以在公众号“IOT趣制作”内回复关键字“华为云WXIOT”或“0619”即可获得项目文件的下载链接。
