腾讯云物联网开发平台为开发者提供一个 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'; // 填写 AppKeyconst APP_SECRET = 'YOUR_APP_SECRET_HERE'; // 填写 AppSecret
4. 打开命令行,切换到 Demo 代码中的
demo/miniprogram
目录。5. 执行以下命令安装依赖。
npm install
6. 运行微信开发者工具,在项目列表中单击“+”,进入创建小程序页面,填写项目信息。


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


8. 选择菜单栏的项目 > 重新打开此项目,以加载上一步构建的 npm 依赖。
步骤4:开通微信云开发并部署云函数
本步骤指导您使用微信云开发部署登录接口,以实现小程序用户登录物联网开发平台。
注意:
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 成功。


步骤5:编译、运行小程序
1. 在微信开发者工具的主界面,单击界面上方的编译,编译完成后小程序在模拟器中运行(或单击界面上方的预览,编译完成后小程序在真机中运行)。
2. 小程序启动后会自动登录,并进入设备列表页面。
步骤6:通过小程序绑定设备
配网绑定设备
1. 在小程序的设备列表页面,选择 添加设备 > 自定义配网 UI 方式。
2. 在配网方式列表中,选择设备支持的配网方式,然后根据页面指引进行设备配网。


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


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


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


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


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


6. 小程序扫描控制台页面展示的二维码。扫码成功后小程序提示绑定设备成功。单击确定回到设备列表页面,设备列表中显示已绑定的设备。
步骤7:通过小程序控制设备
1. 小程序进入设备列表页面,单击要控制的设备,进入设备操控页面。


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


说明: