面板小程序搭建环境指南

本文介绍进行面板小程序开发前所必要的环境搭建工作。如果您已具备以下开发环境,可跳过本文。

前提条件

了解面板小程序

面板小程序是一种特殊的小程序开发模式,专注于设备控制面板场景,有特定的开发和加载模式。 它在智能小程序基础之上增加了如下的能力和约束

  • 创建的时候需要和涂鸦IoT平台上的产品进行关联
  • 在IDE上会提供虚拟设备插件来放方便调试
  • 当前必须从App的设备列表才能打开唤起
面板小程序是如何工作的?

首先,我们需要在涂鸦 IoT 平台创建产品,面板开发工程师,硬件开发工程师以及产品设计师进行功能点的定义。

然后,面板开发工程师来开发围绕操作功能点的面板小程序,在开发阶段可以直接使用IDE提供的虚拟设备进行调试。与此同时,硬件开发工程师也同样围绕功能点进行嵌入式程序的开发。

在联调阶段,面板小程序发布体验版本,通过智能生活 App 连接到真实设备进行测试(或者使用真机调试功能)。

测试完成后,我们可以将面板小程序提交审核,并发布正式版本。然后在 IoT 平台进行产品和面板小程序的绑定,那么,你就完成了面板小程序的整个开发工作了。

快速开始

尝鲜面板小程序,快速开始一个面板小程序项目

了解相关名词概念

虚拟设备

非真实存在的设备,用于体验面板和呈现产品功能逻辑的设备。

更具体点来说,虚拟设备不会主动上报 DP 以及处理联动的逻辑。例如,一个插座产品,假设它有一个总开关以及两个子开关的 DP,当您下发了总开关开启的指令后,虚拟设备只会上报总开关开启。

然而,真实设备通过固件的处理后,它会上报总开关以及两个子开关开启的信息。

真实设备

集成了云模组,并且完成了固件逻辑处理的设备。

PID

PID 为 Product ID 的缩写。开发者在涂鸦 IoT 开发平台创建的每一个产品都会产生一个唯一的产品编号,即 PID。PID 关联了产品具体的功能、App 控制面板、出货信息等所有跟这个产品相关的信息。如果把产品比喻为人,那么 PID 则是产品的身份证。

DP (Data Point)

常被称为功能点,是智能产品开发中的最重要的环节,用于描述产品功能及其参数。定义产品 DP 后,即可根据 DP 的类型进行产品开发。

一键执行(场景)

一键执行是一组预设的动作,动作包括对设备的操作、延时。一键执行被存储在云端,可以远程执行一键执行里的动作。

自动化(场景)

可以为一键执行增加触发条件,例如可以根据时间变化、设备状态变化、地理位置变化、天气变化来触发一键执行的动作。

群组

群组是指家庭中同一类设备的分组。通过群组可以对同类设备进行统一的批量控制。

面板

控制面板指的是一类运行在涂鸦公版 App、OEM App 或基于涂鸦智能生活 App SDK 开发的 App 上的用于控制 Powered by Tuya 智能产品的界面程序。其基于智能小程序框架实现,不仅支持动态更新,同时最大程度的保留了原生 App 的流畅体验。

其中,基于智能小程序实现的控制面板又可被称为面板小程序。

UIID

UIID 指的是其智能产品所对应的控制面板的 ID 标识,即开发完面板项目后上传后生成的 UI 包唯一标识。

公版面板

公版面板指的是在涂鸦官方开发人员在涂鸦 IoT 开发平台上开放出来的一系列品类的通用面板,用于快速使用和赋能智能产品。

设备入网

指支持涂鸦生态的设备激活的过程。设备激活后才能够使用 APP、微信小程序等端对设备进行控制。

因此,设备入网是对设备进行智能控制的前提条件。

设备 OTA

OTA(Over-the-air),是要通过某种方法将新的固件文件远程传输到设备上进行安装升级。

微信面板小程序中支持连云设备和单点蓝牙(BLE)设备的 OTA 升级。

设备移除

将已入网的设备从已激活状态变为未激活状态的过程,分为设备移除与恢复出厂设置两种。设备移除不会删除设备的数据;恢复出厂设置则会将删除设备的设置数据,并将设置恢复到出厂时的设置。

下发 DP

向设备发送指令,已控制设备,如:对灯下发开灯指令。

上报 DP

设备本身的状态会变更,为了能够正常向用户展示设备的当前状态,需要将状态上报同步到云端或客户端,这个过程则为上报 DP。

设备上下线

设备通过某种通讯方式(如 WiFi/4G/蓝牙等)连接到涂鸦云或客户端的情况为设备上线。 设备未连接到涂鸦云或客户端情况为设备下线。

操作步骤

安装编辑器

面板小程序开发前,请您按需自行下载安装下列推荐的编辑器:

  • Visual Studio Code:(推荐)自带格式化、代码跳转等常用功能,社区贡献与活跃度较高。
  • WebStorm:集成度较高的 Tuya MiniApp Tools 。
  • Sublime Text:小巧轻便。
  • Atom:小巧轻便。

安装 App

如果需要安装特定的 App 版本,请通过 涂鸦 IoT 开发平台提交工单 联系我们,寻求支持。

iOS:

前往 App Store 上的 "智能生活",或通过手机上官方 App Store 应用下搜索 智能生活 App 并点击下载安装即可。

安卓:

前往 应用宝上的 "智能生活",或在手机端通过各大厂商提供的应用商店下搜索 智能生活 App 并点击下载安装即可。

安装 Tuya MiniApp Tools

Tuya MiniApp Tools 可以帮助您创建、开发、调试、上传小程序项目。

前往 Tuya MiniApp Tools 下载并安装 Tuya MiniApp Tools 的最新版本。

安装 NVM

NVM 可以帮助您管理多 Node 版本,注意首次安装,需要根据提示设置环境变量

  1. 打开终端。

  2. 安装 NVM

    复制代码
    	curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash
  3. 输入 nvm -v,确认 NVM 已正常安装,若输出版本号,则表明安装成功(检查 Node.js 版本号在 14.16.0 以上,若低于 14.16.0,则需要安装更高版本,您可参考 4),若报错 nvm: command not found,您可参考文末常见问题的解决方法。

  4. 输入nvm install 14.20.1 ,安装 Node.js 14.20.1 版本。

  5. (可选)支持通过 nvm use 命令切换至指定 Node.js 版本。(建议安装 Node.js 14.20.1 及以上版本。)

    复制代码
    	nvm use 14.20.1

安装 Yarn

如果已安装过 yarn 或者已使用 npm、pnpm 等依赖管理工具,可忽略本内容

  1. 打开终端。

  2. 输入npm install -g yarn,安装 Yarn。

  3. (可选)输入 yarn -v ,确认 Yarn 已正常安装。

常见问题

输入 nvm -v 时,为什么报错 nvm: command not found?

可能的原因是 NVM 所在的路径未设置为环境变量,您可以参照下述步骤设置环境变量:

  1. 打开终端。

  2. 输入cd ~ ,进入当前用户的 Home 目录。

  3. 输入以下命令,打开配置文件。

    • Window 系统

      复制代码
      open .bash_profile
    • macOS 系统

      复制代码
      open .bashrc
  4. 在配置文件中,复制以下代码后,保存文件。

    复制代码
    export NVM_DIR="$HOME/.nvm"
     [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
  5. 输入 source .bash_profile 或 source .bashrc,重新加载配置文件。

  6. 输入 nvm -v,查看 NVM 版本,验证是否安装成功。

如需了解更多 nvm 官方的解决方案,可参考 NVM#Additional Notes

相关推荐
西岭千秋雪_19 小时前
RAG核心特性:ETL
数据仓库·人工智能·spring boot·ai编程·etl
无风听海19 小时前
神经网络之Softmax激活函数求导过程
人工智能·深度学习·神经网络
youcans_19 小时前
【Trae】Trae 插件实战手册(1)PyCharm 安装 Trae
人工智能·python·pycharm·ai编程·trae
卷Java19 小时前
小程序前端功能更新说明
java·前端·spring boot·微信小程序·小程序·uni-app
CTRA王大大19 小时前
【微信公众平台】小程序如何查找菜单?如何通过自定义的菜单路径生成小程序二维码?小程序二维码指定生成
小程序·微信公众平台
说私域19 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的引流爆款设计策略研究
人工智能·小程序
weixin_lynhgworld19 小时前
短剧小程序系统开发:构建便捷高效的影视观看平台
小程序·短剧
知识分享小能手19 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(下)——知识点详解 + 案例实战(5)
前端·javascript·学习·微信小程序·小程序·vue·前端开发
张较瘦_19 小时前
[论文阅读] AI + 软件工程 | 从“事后补救”到“实时防控”,SemGuard重塑LLM代码生成质量
论文阅读·人工智能·软件工程
IT古董19 小时前
【第五章:计算机视觉-项目实战之生成对抗网络实战】1.对抗生成网络原理-(1)对抗生成网络算法基础知识:基本思想、GAN的基本架构、应用场景、标注格式
人工智能·生成对抗网络·计算机视觉