Skip to content
简体中文
Tuya MiniApp
开发
Ray 开发
指南
快速开始
智能小程序

如需更好的阅读体验,请移步 Codelabs。 (opens in a new tab)

一、搭建环境

前置条件

安装编辑器

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

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

安装 App

如果需要安装特定的 App 版本,请通过 涂鸦开发者平台提交工单 (opens in a new tab) 联系我们,寻求支持。

iOS:

前往 App Store 上的 “智能生活” (opens in a new tab),或通过手机上官方 App Store 应用下搜索 智能生活 App 并点击下载安装即可。

安卓:

前往 应用宝上的 ”智能生活“ (opens in a new tab),或在手机端通过各大厂商提供的应用商店下搜索 智能生活 App 并点击下载安装即可。

安装 Tuya MiniApp IDE

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

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

安装 NVM

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

  1. 打开终端。

  2. 安装 NVM (opens in a new tab)

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

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

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

    	nvm use 16.20.2

安装 Yarn

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

  1. 打开终端。

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

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

二、注册入驻

注册涂鸦开发者账号 (opens in a new tab)

三、初始化工程

您需要拥有涂鸦开发者平台账号,然后以开发者身份入驻 Tuya MiniApp 开发者平台,才能创建小程序。

  1. 登录 Tuya MiniApp 开发者平台 (opens in a new tab),可以看到小程序列表页面。

  2. 在 列表页面,单击 创建 按钮。

  3. 填写小程序名称、头像、类型等相关信息,然后单击 确定

Preview

四、开发调试

1.新建项目 & 关联小程序

  1. 启动 Tuya MiniApp IDE ,登录开发者 涂鸦开发者平台账号,新建小程序。
  2. 根据提示设置 项目路径项目名称关联智能小程序,单击 确认,进入主界面。
  3. 关联智能小程序, 是指您需要先拥有 Tuya MiniApp 开发者平台 (opens in a new tab) 中对应智能小程序的开发者权限。然后, 在 Tuya MiniApp IDE 中新建或导入小程序时,关联 Tuya MiniApp 开发者平台 中对应的智能小程序,才能进行开发、调试、上传代码。
Preview

2.编写代码

Tuya MiniApp IDE 会自动在项目路径下为您初始化项目模板,您可以使用代码编辑器打开该项目,进行编写。

  • 了解小程序的目录结构与不同类型文件的作用:框架
  • 了解小程序的基础组件:组件

3.预览调试

在开发过程中,小程序的运行效果会在主界面左侧的模拟器中显示。

由于模拟器尚未支持全部 API,因此,您还需要使用 真机调试 来预览与调试小程序的实际运行情况。

Preview

4.上传代码

在完成开发之后,点击 Tuya MiniApp IDE 中的 上传 按钮,本地代码将会上传至云端。

Tuya MiniApp 开发者平台 (opens in a new tab) 中就会对应显示上传的版本。

Preview
Preview

五、体验测试

步骤 1:安装 App

测试人员首先需要找到客户端开发人员拿到需要测试的 App 安装包。客户端开发人员需要保证 App 已集成小程序能力,同时基础库版本、Kit 包版本兼容当前要扫码的小程序。

步骤 2:成为项目成员、加入白名单

要求开发者在 小程序开发者平台 > 成员管理 (opens in a new tab) 中添加测试人员账号。这样,测试人员就可以在自己的账号列表下找到小程序项目。

同时,还需要让开发者正确的配置 投放管理,并且在 白名单 中添加测试人员账号。

具体流程,请参考:小程序开发者平台 > 体验二维码

步骤 3:生成体验二维码

  1. 小程序开发者平台 > 版本管理 (opens in a new tab) 中,将需要测试的版本设为体验版。
  2. 单击 体验二维码 按钮。
  3. 配置二维码信息,可以指定小程序自动进入某个页面。也可以什么都不配置,直接单击 确定
  4. 扫描体验二维码。
Preview
Preview

六、小程序安全合规

为促进小程序的安全合规,涂鸦对域名及请求路径提供安全校验。

在使用下表中所列 API 以及加载静态资源时,小程序开发者需要在 开发者平台 (opens in a new tab) 做相应配置,才可成功调用对应 API。否则,发起请求后,会出现页面加载问题及请求问题

需合规 API配置处
ty.request()开发者平台-开发设置-多区服务器域名
ty.uploadFile()开发者平台-开发设置-多区服务器域名
ty.downloadFile()开发者平台-开发设置-多区服务器域名
静态资源开发者平台-开发设置-多区静态资源

ty.request()、ty.uploadFile()、ty.downloadFile() 请求的域名需要添加到 小程序开发者平台 > 开发设置 > 多区服务器域名 中。

这些 API 需要根据投放的区域不同,为不同的区域配置不同的域名。注意:配置时,域名不要携带根路径 /

如需查看 App 投放的区域,请前往 小程序开发者平台 > 投放管理

Preview

小程序代码包中指定的静态资源链接,同样也需要添加到 小程序开发者平台 > 开发设置 > 多区静态资源 中。在此处,您需要配置相应的静态资源域名,不同区域对应不同的域名。

注意:配置时,域名不要携带根路径 /

Preview

七、审核上线

  1. 登录 Tuya MiniApp 开发者平台 (opens in a new tab),单击所需要上传的小程序名称,跳转至 版本管理 页。
  2. 开发版本 页签 下,找到对应版本,单击 提交审核
  3. 提交审核后,在 审核版本 页签中,您可看到提交版本的审核状态。
  4. 审核通过后,在 线上版本 页签中,您可看到待上线的版本。您可以单击 启用服务 按钮,使该版本小程序上线,或者单击 停用服务 按钮,使上线的小程序下线。
版本阶段说明可操作的按钮
开发版本每次上传的代码都对应独立的开发版本。提交审核删除
体验版本【可选】在正式上线之前,可以设置体验版本,让权限成员优先测试体验。设为体验版
审核版本开发版本的提审阶段。如果某版本审核不通过,需要根据驳回原因,将版本退回修改。不同的审核状态对应不同的操作按钮:
- 审核中:取消审核
- 审核通过:申请上线
- 不通过:取消审核
线上版本面向全部用户的正式版本。启用服务停用服务

八、小程序投放

  • 小程序需要投放到指定的 App 上才能正常打开,可在 小程序开发者平台 > 投放管理 中添加小程序需要投放的 App。
  • 添加投放的App后需要勾选对应的投放区域。比如小程序需要在美区投放,需要勾选美国数据中心。如果都不勾选则都无法访问。
  • 如果是面板小程序就则不需要投放,默认可使用。
  • 开发者平台完成小程序投放后需要在涂鸦开发者平台配置小程序入口。请查看智能Tab页配置。
Preview

九、自定义Tab页配置

  • 涂鸦提供了丰富的场景化个性化的智能服务。我们支持您在智能Tab页面配置小程序入口,也可以直接用小程序自定义一个tab页面。

1. 在「智能」Tab页面配置入口。(详情可查看:智能配置 (opens in a new tab)

Preview

2. App首页

  • App首页为客户开放卡片版位,可通过小程序开放链路,自主可控开发专属业务。
Preview

3. 自定义小程序 Tab 页面。

涂鸦开发者平台 app 开发 (opens in a new tab)选择您自己的 app。点击详细配置。

Preview

进入 app 配置页面,点击主要页面 -> 管理主要页面 -> 添加自定义小程序

Preview

输入配置的小程序 id,上传小程序图标和小程序名称。完成即可在您自己的 app tab 栏中配置小程序入口。

更多配置内容请查看 (opens in a new tab)

此页内容是否对您有帮助?
意见反馈
小程序机器人助手
需求提交
|
论坛反馈
|
问卷调查
|
官方群聊