当前位置: 首页>編程日記>正文

5步完成物联网小程序开发

5步完成物联网小程序开发

前言

在 5G 热潮的推动下,IoT 愈发的如火如荼。越来越多品牌选择涂鸦智能的开发者平台实现产品智能化。在配网控制端,也有更多开发者希望利用好微信小程序即开即用低门槛的优点,提高设备配网率以及使用频次或实现设备分享功能。业务完全可以以小程序为核心,例如小兔健康小程序,在小程序里就能实现产品购买、配网、控制管理的闭环。
为此,涂鸦推出了 Tuya-Weapp-CloudBase SDK(以下简称小程序 SDK), 结合腾讯云函数,让您可以快速高效的完成小程序的开发,打通从智能设备到小程序的链路。


使用步骤

• 第 1 步:获取小程序 SDK 授权

为了获取小程序的 SDK 及相关授权,您需要在 IoT 平台上创建小程序 SDK。

  1. 登录 涂鸦 IoT 控制台的 App 工作台。
  2. 单击 App 工作台,选择 小程序 SDK
  3. 单击 创建小程序
    在这里插入图片描述
  4. 输入小程序名称(和您的小程序同名)、小程序 AppID(可在微信小程序后台查看)、小程序描述、小程序,单击 确定
    创建成功之后,可以获取到专属于您 SDK 的 Schema,AccessID,AppSecret。其中 Schema 用来标识一个您的应用(在这里就是表示您的小程序),AccessID 和 AppSecret 用来生成 Token 信息。

• 第 2 步:启动 Demo 项目

接下来您可以克隆 项目仓库 里的示例代码。

  1. 克隆项目代码。
$ git clone https://github.com/TuyaInc/tuya-miniapp-demo.git
  1. 安装相关依赖。
$ npm install
  1. 开启自动打包。
$ npm run dev:weapp
  1. 启动微信开发工具,单击 导入项目,导入您的项目。

在这里插入图片描述
5. 选择项目目录,填写您的 AppID,单击 导入
在这里插入图片描述
小程序导入之后,会自动进入小程序的设备列表页,如果看到 “网络错误” 的信息提示,表明项目导入成功,但是未能上传云函数,可以参考下一步来上传云函数。
在这里插入图片描述

• 第 3 步:上传云函数

您的小程序如果要访问涂鸦云,需要通过之前获得的 AccessID 和 AppSecret 去调涂鸦云端接口生成访问涂鸦云的 Token。通常情况下这种操作都是由服务端完成,详情请参考 云开发平台方案介绍,但是也可以用更简单方便的小程序云函数的方式,相关的代码及 SDK 我们已准备好,请根据下面的示例来操作。

  1. 在小程序开发者工具中选中云函数目录的 ty-service(该目录是我们的涂鸦云函数目录,主要是登录、token 生成、统一接口调用等功能的封装) 上传上去。
    在这里插入图片描述
    如果没有开通云开发环境,单击 “云开发” 的时候会引导您自助开通。
  2. 项目中调用云函数的工具方法在 src/Utils/Request.ts 中,通过云函数调用涂鸦的 API 的方式可以参照下面的示例。
const params = {name: 'ty-service', // 云函数名称data: {action: 'hello', // 涂鸦云接口名params: {} // 接口参数}}// 调用 Request return Request(params)

• 第 4 步:腾讯云云开发配置

云开发配置主要是为了配置您之前获得的的 Schema,AccessID,AppSecret,用于在云函数云端生成 Token 并提供给小程序使用。这些信息存储在云开发的数据库中,可以保证云函数能够方便调用的同时还能最大限度的保证信息安全。可以根据下面的示例来操作。

  1. 单击 云开发,进入 数据库,添加名称为 “iot-collection” 的集合,单击 确定
    在这里插入图片描述
  2. 选择 “iot-collection” 集合,,选择项目目录 db/data.json 文件,单击 导入 按钮,即可导入相关字段。在这里插入图片描述
  3. 导入完成之后填写涂鸦 IoT 工作台上小程序 SDK 的 Schema、AccessID、AppSecret 的内容。在这里插入图片描述
  4. 配置完成之后,刷新一下小程序,可以看到一个 “欢迎使用涂鸦云小程序云函数”,说明云函数配置成功。
    在这里插入图片描述
    SDK 更多的信息和调用说明,请参考小程序 SDK 概述。

• 第 5 步:为设备配网

目前小程序支持 AP 模式(慢闪热点)配网,后期还将支持蓝牙配网。通过配网,可以将一个设备配到您的账号下,您就有权限控制这个设备。

  1. 单击微信小程序开发工具的 预览,在弹出的二维码使用微信去扫码。

  2. 在手机的小程序中单击 添加设备 按钮,进入配网页面。
    在这里插入图片描述

  3. 将设备重置到 AP 配网模式,可以参照下面的视频来操作。

    设备重置到 AP 配网模式(暂时存放)

  4. 设备重置 AP 配网模式后,开始在小程序上配网,可以参照下面的视频来操作。

    小程序配网(暂时存放)

  5. 配网成功后,进入设备控制页,就能控制配网的设备。
    在这里插入图片描述

小结

基于涂鸦开发平台和小程序 SDK,可以快速实现一款智能小程序,搭配使用 三明治开发套件,也可以用它搭建一个产品原型来实现最后一个步骤。

扩展

如果您希望您的小程序不仅仅是配网、控制这些常规功能,希望结合云端算法提供更多服务,可以结合 涂鸦云开发平台 里的开放接口做进一步的整合。您也可以访问我们的 案例中心 参考其他开发者的成功案例。


https://www.fengoutiyan.com/post/15178.html

相关文章:

  • 联通物联网怎么在小程序打开
  • 物联网微信小程序配网
  • 微信小程序物联网应用
  • 物联网大数据开发
  • 小程序自动化
  • 物联网开源项目
  • 物联网程序
  • 物联网怎么做
  • 鏡像模式如何設置在哪,圖片鏡像操作
  • 什么軟件可以把圖片鏡像翻轉,C#圖片處理 解決左右鏡像相反(旋轉圖片)
  • 手機照片鏡像翻轉,C#圖像鏡像
  • 視頻鏡像翻轉軟件,python圖片鏡像翻轉_python中鏡像實現方法
  • 什么軟件可以把圖片鏡像翻轉,利用PS實現圖片的鏡像處理
  • 照片鏡像翻轉app,java實現圖片鏡像翻轉
  • 什么軟件可以把圖片鏡像翻轉,python圖片鏡像翻轉_python圖像處理之鏡像實現方法
  • matlab下載,matlab如何鏡像處理圖片,matlab實現圖像鏡像
  • 圖片鏡像翻轉,MATLAB:鏡像圖片
  • 鏡像翻轉圖片的軟件,圖像處理:實現圖片鏡像(基于python)
  • canvas可畫,JavaScript - canvas - 鏡像圖片
  • 圖片鏡像翻轉,UGUI優化:使用鏡像圖片
  • Codeforces,CodeForces 1253C
  • MySQL下載安裝,Mysql ERROR: 1253 解決方法
  • 勝利大逃亡英雄逃亡方案,HDU - 1253 勝利大逃亡 BFS
  • 大一c語言期末考試試題及答案匯總,電大計算機C語言1253,1253《C語言程序設計》電大期末精彩試題及其問題詳解
  • lu求解線性方程組,P1253 [yLOI2018] 扶蘇的問題 (線段樹)
  • c語言程序設計基礎題庫,1253號C語言程序設計試題,2016年1月試卷號1253C語言程序設計A.pdf
  • 信奧賽一本通官網,【信奧賽一本通】1253:抓住那頭牛(詳細代碼)
  • c語言程序設計1253,1253c語言程序設計a(2010年1月)
  • 勝利大逃亡英雄逃亡方案,BFS——1253 勝利大逃亡
  • 直流電壓測量模塊,IM1253B交直流電能計量模塊(艾銳達光電)
  • c語言程序設計第三版課后答案,【渝粵題庫】國家開放大學2021春1253C語言程序設計答案
  • 18轉換為二進制,1253. 將數字轉換為16進制
  • light-emitting diode,LightOJ-1253 Misere Nim
  • masterroyale魔改版,1253 Dungeon Master
  • codeformer官網中文版,codeforces.1253 B
  • c語言程序設計考研真題及答案,2020C語言程序設計1253,1253計算機科學與技術專業C語言程序設計A科目2020年09月國家開 放大學(中央廣播電視大學)
  • c語言程序設計基礎題庫,1253本科2016c語言程序設計試題,1253電大《C語言程序設計A》試題和答案200901
  • 肇事逃逸車輛無法聯系到車主怎么辦,1253尋找肇事司機