有奖捉虫:办公协同&微信生态&物联网文档专题 HOT
腾讯云物联网开发平台为开发者提供一个 Demo 小程序参考,开发者可以按本文档的指引流程部署并体验一个属于自己的 Demo 小程序。Demo 小程序以开源的方式向开发者开放,便于开发者在开发自主品牌小程序时进行参考。在开始之前需完成以下操作:
已注册 腾讯云账号 并完成 实名认证
已安装 Node.js
已在物联网开发平台中 创建产品

步骤1:创建应用

1. 登录腾讯云 物联网开发平台,选择公共实例或您购买的标准企业实例。
2. 在项目列表中选择项目,进入项目详情页面。
3. 在左侧菜单中选择应用开发,单击新建应用,进入新建应用页面。
4. 填写应用信息。
应用开发 - 新建应用


应用名称:必填,根据实际业务填写便于识别的应用名称。
备注:非必填,填写应用的备注信息(选填)。
5. 单击保存,页面提示保存成功,回到应用开发页面。
6. 单击应用列表中应用的名称,进入应用详情页面。
7. 记录小程序应用下显示的 APP Key APP Secret


8. 在页面下方的关联产品列表中,单击关联列的开关,使小程序与产品关联(开关为开启状态)。



注意:
小程序只能对已关联产品下的设备进行绑定、控制等操作,请确保小程序已关联其需要操作的产品。若小程序尝试绑定、控制未关联的产品下的设备,会出现“APP对操作该产品无权限”的错误提示。

步骤2:注册、配置小程序

1. 前往 微信公众平台 注册小程序。
2. 登录微信公众平台的小程序后台,选择开发管理 > 开发设置
3. 记录开发者 ID 中显示的 AppID(小程序 ID)


4. 在服务器域名中单击开始配置(若曾经配置过则单击修改),根据页面指引完成身份确认。


5. 填写服务器信息。
微信公众平台小程序后台 - 配置服务器信息


request 合法域名:https://iot.cloud.tencent.com
socket 合法域名:wss://iot.cloud.tencent.com
6. 单击保存并提交
注意:
小程序只能与服务器域名列表中指定的域名进行网络通信。若未配置小程序的服务器域名,则小程序不能正常连接到物联网开发平台。在真机预览时若遇到接口出错,请确认此步骤域名是否配置正确。

步骤3:下载、配置 Demo 小程序

1. 前往 qcloud-iotexplorer-appdev-miniprogram-sdk-demo,选择 Code > Download ZIP,下载 Demo小程序代码到本地并解压。
2. demo/miniprogram/app.js 文件中填写 步骤1 获得的 AppKey。
const APP_KEY = 'YOUR_APP_KEY_HERE'; // 填写 AppKey
3. demo/cloudfunctions/login/index.js 文件中填写 步骤1 获得的 AppKey 与 AppSecret。
const APP_KEY = 'YOUR_APP_KEY_HERE'; // 填写 AppKey
const APP_SECRET = 'YOUR_APP_SECRET_HERE'; // 填写 AppSecret
4. 打开命令行,切换到 Demo 代码中的 demo/miniprogram 目录。
5. 执行以下命令安装依赖。
npm install
6. 运行微信开发者工具,在项目列表中单击“+”,进入创建小程序页面,填写项目信息。


项目名称:可自行填写。
目录:选择 Demo 代码中的 demo 目录。
AppID:填写 步骤2 获取的 AppID。
7. 单击界面右下角的新建,项目创建完成后,进入微信开发者工具的主界面。选择菜单栏的工具 > 构建 npm,构建成功后界面提示完成构建。
微信开发者工具 - 构建 npm


8. 选择菜单栏的项目 > 重新打开此项目,以加载上一步构建的 npm 依赖。

步骤4:开通微信云开发并部署云函数

本步骤指导您使用微信云开发部署登录接口,以实现小程序用户登录物联网开发平台。
注意:
小程序 Demo 的登录功能依赖于微信云开发服务,微信云开发为用户提供了一定的免费额度,超出免费额度的部分需要收费,详情请参见 微信云开发计费说明
您也可以通过自建后端服务的方式实现小程序用户登录物联网开发平台,请参见 接入微信登录
1. 单击微信开发者工具主界面上方的云开发,进入开通小程序云开发页面。
2. 单击开通,进入创建云开发环境页面。
3. 填写云开发环境名称,单击新建
微信开发者工具 - 创建云开发环境

云开发环境创建完成后,自动进入云开发控制台页面。
4. 在云开发控制台界面右上角复制该环境的环境 ID。


5. demo/miniprogram/app.js 文件中填写上述步骤获得的环境 ID。
wx.cloud.init({
env: '此处填写您的云开发环境 ID',
});
6. 单击微信开发者工具主界面上方的编辑器,打开文件编辑器。
7. 右键单击文件列表中的 cloudfunctions,选择当前环境,然后选择上述步骤中创建的云开发环境。
微信开发者工具 - 选择云开发环境


8. 展开文件列表中的 cloudfunctions > login,右键单击 login,选择创建并部署:云端安装依赖(不上传 node_modules),上传完成后界面右上角提示上传云函数 login 成功。
微信开发者工具 - 创建并部署 login 云函数到云开发



步骤5:编译、运行小程序

1. 在微信开发者工具的主界面,单击界面上方的编译,编译完成后小程序在模拟器中运行(或单击界面上方的预览,编译完成后小程序在真机中运行)。
2. 小程序启动后会自动登录,并进入设备列表页面。

步骤6:通过小程序绑定设备

配网绑定设备

配网绑定设备需要配合真实设备(如 ESP8266 模组或 ESP32 模组)进行操作。关于配网协议与配网流程,详情请参见 配网开发概述。在 Demo 小程序中进行设备配网的步骤如下:
自定义配网 UI 方式
配网插件方式
1. 在小程序的设备列表页面,选择 添加设备 > 自定义配网 UI 方式
2. 在配网方式列表中,选择设备支持的配网方式,然后根据页面指引进行设备配网。



1. 登录小程序后台,进入“设置-第三方设置-插件管理”,单击添加插件。
2. 在输入框中输入腾讯连连小程序插件,单击搜索
3. 选择腾讯连连小程序插件,单击添加



4. 参考 文档 中的步骤,将腾讯连连小程序插件添加到小程序中。
5. 在小程序的设备列表页面,选择添加设备 > 配网插件方式
6. 输入要配网的设备对应的产品 ID。
7. 根据页面指引进行设备配网。




扫描设备调试二维码绑定设备

说明:
物联网开发平台提供的设备二维码可以用于快速绑定真实设备,帮助开发者降低开发难度。量产后为了安全性,将会关闭二维码入口。
1. 登录腾讯云 物联网开发平台,选择公共实例或您购买的标准企业实例。
2. 在项目列表中选择产品所属的项目,进入项目详情页面。
3. 在产品列表中选择设备所属的产品,进入产品开发页面。
4. 单击页面上方的设备调试,进入设备调试页面。根据设备类型,按照以下步骤获取设备调试二维码。
真实设备:在设备列表中单击二维码,页面展示设备调试二维码。
设备调试 - 获取真实设备二维码


虚拟设备:单击虚拟设备调试,进入虚拟设备调试页面,页面展示虚拟设备调试二维码。
设备调试 - 获取虚拟设备二维码


5. 在小程序的设备列表页面,选择添加设备 > 扫描设备调试二维码,进入扫码页面。



6. 小程序扫描控制台页面展示的二维码。扫码成功后小程序提示绑定设备成功。单击确定回到设备列表页面,设备列表中显示已绑定的设备。

步骤7:通过小程序控制设备

1. 小程序进入设备列表页面,单击要控制的设备,进入设备操控页面。



2. 单击设备属性列表中列出的属性,可以修改对应的设备属性。



说明:
物联网开发平台提供了真实设备在线调试及虚拟设备调试功能,可通过控制台查询设备上报的当前数据、历史通信日志、事件及上下线记录等。具体操作请参见 设备调试