[微信篇]ESP8266-NonOS学习笔记(十一)之微信小程序控制LED灯 Part 1

Hi,大家好,最近有点偷懒,没怎么写文章,也主要是最近一直在瞎鼓捣硬件了,忙里偷闲今天教大家如何用微信小程序控制自己的硬件,相信大家都有用过微信小程序了,小程序相比于普通App开发来说就很简单了,主要是一些前端技术,而且在微信的体系内可以很好的跨平台,这一点是非常不错的,本篇文章就教大家如何构建自己的小程序来控制自己的设备,闲话少说,just do it!

在开始之前你需要注册几个账号,请确保先注册完成,再开始:

1.微信小程序账号

微信公众平台​

2.百度云天工物联网账号

天工-物联网平台-物联网云-百度云​

这里的MQTT服务器我们使用的是百度天工物联网服务,一年十块钱,一个月有两百万条消息配额,非常划算,我已经购买很久了,貌似一直在闲置着请大家先注册一下账号,注册好以后我们开始一步步来

首先我们需要先在百度天工上创建个计费套餐,一个月1块钱最低配就可,一年十元,如果不舍得就先看看别的文章吧~啊哈哈哈,开玩笑的,看我姿势:

[微信篇]ESP8266-NonOS学习笔记(十一)之微信小程序控制LED灯 Part 1_第1张图片
image

这里我们点击创建计费套餐就可,在百度天工这边我们只需要四大步就好,其实有点麻烦,我们慢慢来点击创建计费套餐,选择一下付钱就可以了,这里资源类型选**物接入**,不要选成**SIM版**了,有个区域选择,你看你离那个地区近就选哪一个,个人建议长江以南选广州,长江以北选北京

[微信篇]ESP8266-NonOS学习笔记(十一)之微信小程序控制LED灯 Part 1_第2张图片
image

购买完成后我们进入项目列表,然后新创建一个项目,如下图:

[微信篇]ESP8266-NonOS学习笔记(十一)之微信小程序控制LED灯 Part 1_第3张图片
image

我这里今天测试已经创建好了一个项目,不过为了给不太熟悉的同学展示一下,我这里再新建一个项目,跟着我一步步来就好了,稍微有点麻烦,图片有点多,请大家见谅~

[微信篇]ESP8266-NonOS学习笔记(十一)之微信小程序控制LED灯 Part 1_第4张图片
image

项目名称大家随便填,主要起一个标识作用,项目类型大家要选择数据型,这里不要选错哦,然后点击提交,这时候会发现项目列表里多了一个项目,如下图:

[微信篇]ESP8266-NonOS学习笔记(十一)之微信小程序控制LED灯 Part 1_第5张图片
image

创建项目就好了,这里有几个网址,等会我们会用到一个,先不用着急记,等会大家知道来这里找就好了,然后我们点击项目名称,就是你刚刚起的名字:

[微信篇]ESP8266-NonOS学习笔记(十一)之微信小程序控制LED灯 Part 1_第6张图片
image

然后我们点击创建用户,名称没什么讲究,大家可以自行选择,下面的用户名就是一会我们用来登录MQTT时用到的用户名,密码会在最后一步生成,大家先不要着急,然后再点击下一步:

[微信篇]ESP8266-NonOS学习笔记(十一)之微信小程序控制LED灯 Part 1_第7张图片
image

这一步让我们选择身份,由于我们还没有创建身份,这里选择创建身份就好,然后填写一个名称,认证方式选择密码认证,然后点击下一步:

[微信篇]ESP8266-NonOS学习笔记(十一)之微信小程序控制LED灯 Part 1_第8张图片
image

同样的,我们选择创建策略,名称不重要,大家可自行起一个,这里主题大家要注意了,主题是我们在这里设置好的,不是随便订阅的,如果你在设备或者小程序里订阅没有设置过的主题是不会收到任何消息的,而且还会断连,这一点请注意,这里我创建了三个主题,分别是控制灯、温度和湿度的,大家根据自己需要去创建或者跟我一样就好,权限把发布和订阅都选上即可,然后我们点击下一步:

[微信篇]ESP8266-NonOS学习笔记(十一)之微信小程序控制LED灯 Part 1_第9张图片
image

这里让我们配置确认,这一步大家把密钥记录下来备用,记得不要搞丢哟~

接下来我们进行连接测试,我们回到用户列表,然后点击连接测试:

[微信篇]ESP8266-NonOS学习笔记(十一)之微信小程序控制LED灯 Part 1_第10张图片
image

身份密钥填上那会我们生成的密码,然后点击连接,应该会看到连接成功的提示:

[微信篇]ESP8266-NonOS学习笔记(十一)之微信小程序控制LED灯 Part 1_第11张图片
image

然后我们在左侧publish的主题里填上我们前面创建的主题,右侧Subscriptions处订阅相同的主题,然后随便发一条消息,看看不能在下面 Messages处收到,如果能接收到,表示我们设置成功,可以进行下一步了~

前面你已经注册完微信小程序账号后,我们还需要设置一下服务器地址,因为小程序的安全机制是不允许你随便去连接一个网址的,所以我们需要先在后台设置好:

[微信篇]ESP8266-NonOS学习笔记(十一)之微信小程序控制LED灯 Part 1_第12张图片
image

点击开发设置,然后找到服务器域名,点击修改,然后再socket合法域名中填写前面让大家记住的网址就好,记得端口号不要一块复制进去,如下图:

[微信篇]ESP8266-NonOS学习笔记(十一)之微信小程序控制LED灯 Part 1_第13张图片
image

小程序的AppID,大家一块记录一下,一会我们会用到~

至此大部分的设置就完成了,接下来我们需要下载一下小程序开发工具了,俗称IDE,大家戳卡片下载就可以了,建议大家选择稳定版下载哦~

下载 · 小程序

恭喜你到这一步,你已经走完一大步了,接下来,就是最重要的一步了,废话少说,先把小程序代码下下来呀,戳卡片:

imliubo/Wechat_MQTT_ESP8266_BaiduIoT​

Part 1 就先到这,大家可以先看看小程序的代码,如果你了解JS的话,相信很快就能看懂,如果不了解的话,也没关系,后面我会录个视频讲解一下,当然我对JS也是半路出家,啊哈哈哈哈,大神勿喷~

最后如果喜欢的话,可以给我的仓库点个star,您的star是对我最大的鼓励!

下篇我们再来看看硬件代码,其实跟之前的写过的MQTT的Demo是一样的,有能力的同学,可以自己搞起来先~

你可能感兴趣的:([微信篇]ESP8266-NonOS学习笔记(十一)之微信小程序控制LED灯 Part 1)