---
title: 快速开始
summary: "智能小程序开发快速入门，涵盖环境搭建、注册入驻、工程初始化、调试到审核上线的完整流程。"
tags: [智能小程序快速开始, 智能小程序开发教程, IDE创建智能小程序]
questions:
  - 开发智能小程序需要搭建什么环境？
  - 如何在涂鸦小程序开发者平台注册并创建智能小程序？
  - 如何通过 Tuya MiniApp IDE 新建项目并关联智能小程序？
  - 智能小程序的开发调试和预览流程是怎样的？
  - 智能小程序如何设为体验版并生成体验二维码？
  - 智能小程序的安全合规要求是什么？
  - 哪些 API 需要在开发者平台配置多区服务器域名？
  - 智能小程序的审核上线流程是什么？
  - 如何将智能小程序投放到指定 App 上？
  - 如何在 App 中自定义 Tab 页面配置小程序入口？
---

{<Block>

  <a href="https://developer.tuya.com/cn/miniapp-codelabs/codelabs/project-start/index.html#0">
    如需更好的阅读体验，请移步 Codelabs。
  </a>
</Block>}

## 一、搭建环境

### 前置条件

- 在开发小程序之前，请确保电脑上已经安装node运行环境。可前往[Node.js官网](https://nodejs.org/en)下载安装。

### 安装编辑器

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

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

### 安装 App

> 如果需要安装特定的 App 版本，请通过 [涂鸦开发者平台提交工单](https://service.console.tuya.com/8/3/list?source=support_center) 联系我们，寻求支持。

**iOS:**

前往 [App Store 上的 “智能生活”](https://apps.apple.com/cn/app/id1586125720)，或通过手机上官方 App Store 应用下搜索 `智能生活 App` 并点击下载安装即可。

**安卓:**

前往 [应用宝上的 ”智能生活“](https://a.app.qq.com/o/simple.jsp?pkgname=com.tuya.smartlifeiot)，或在手机端通过各大厂商提供的应用商店下搜索 `智能生活 App` 并点击下载安装即可。

### 安装 Tuya MiniApp IDE

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

前往 [Tuya MiniApp IDE](/cn/miniapp/devtools/tools/download) 下载并安装 Tuya MiniApp IDE 的最新版本。

### 安装 NVM

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

1. 打开终端。

2. 安装 [NVM](https://github.com/nvm-sh/nvm)。

   ```shell
   	curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash
   ```

3. 输入 `nvm -v`，确认 NVM 已正常安装，若输出版本号，则表明安装成功（检查 Node.js 版本号在 18.0.0 以上，若低于 18.0.0，则需要安装更高版本，您可参考 4），若报错 `nvm: command not found`，您可参考文末常见问题的解决方法。

4. 输入`nvm install 18.20.8 `，安装 Node.js 18.20.8 版本。

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

   ```shell
   	nvm use 18.20.8
   ```

### 安装 Yarn

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

1. 打开终端。

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

3. （可选）输入 `yarn -v `，确认 Yarn 已正常安装。

## 二、注册入驻

[注册涂鸦开发者账号](https://auth.tuya.com/register?from=https%3A%2F%2Fiot.tuya.com%2Fminiapp%2F)。

## 三、初始化工程

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

1. 登录 [涂鸦小程序 开发者平台](https://iot.tuya.com/miniapp/)，可以看到小程序列表页面。

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

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

<Image
  src='/images/guide/quick-start/start/create-project.png'
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
  }}
/>

## 四、开发调试

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

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

<Image
  src='/images/guide/quick-start/start/ide-create-project.png'
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
  }}
/>

### 2.编写代码

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

- 了解小程序的目录结构与不同类型文件的作用：[框架](/cn/miniapp/develop/miniapp/framework/overview)
- 了解小程序的基础组件：[组件](/cn/miniapp/develop/miniapp/component)

### 3.预览调试

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

由于模拟器尚未支持全部 API，因此，您还需要使用 [真机调试](/cn/miniapp/devtools/tools/debug) 来预览与调试小程序的实际运行情况。

<Image
  src='/images/guide/quick-start/start/remote-debug.png'
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
  }}
/>

### 4.上传代码

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

[涂鸦小程序 开发者平台](https://iot.tuya.com/miniapp/) 中就会对应显示上传的版本。

<Image
  src='/images/guide/quick-start/start/upload.png'
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
  }}
/>

<Image
  src='/images/guide/quick-start/start/platform-version.png'
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
  }}
/>

## 五、体验测试

#### 步骤 1：安装 App

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

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

要求开发者在 [小程序开发者平台 > 成员管理](https://iot.tuya.com/miniapp/) 中添加测试人员账号。这样，测试人员就可以在自己的账号列表下找到小程序项目。

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

具体流程，请参考：[小程序开发者平台 > 体验二维码](/cn/miniapp/common/desc/platform#%E4%BD%93%E9%AA%8C%E4%BA%8C%E7%BB%B4%E7%A0%81)。

#### 步骤 3：生成体验二维码

1. 在 [小程序开发者平台 > 版本管理](https://iot.tuya.com/miniapp/) 中，将需要测试的版本设为体验版。
2. 单击 **体验二维码** 按钮。
3. 配置二维码信息，可以指定小程序自动进入某个页面。也可以什么都不配置，直接单击 **确定**。
4. 扫描体验二维码。

<Image
  src='/images/guide/qa-guide/set-experience.png'
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
  }}
/>

<Image
  src='/images/guide/qa-guide/experience-qrcode.png'
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
  }}
/>

## 六、小程序安全合规

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

在使用下表中所列 API 以及加载静态资源时，小程序开发者需要在 [开发者平台](https://iot.tuya.com/miniapp/) 做相应配置，才可成功调用对应 API。<font style={{color: 'red'}}>否则，发起请求后，会出现页面加载问题及请求问题</font>。

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

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

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

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

<Image
  src="/images/guide/audit/multi-area.png"
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
  }}
/>

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

**注意：配置时，域名不要携带根路径 `/` 。**

<Image
  src="/images/guide/audit/multi-static.png"
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
  }}
/>

## 七、审核上线

1. 登录 [涂鸦小程序 开发者平台](https://iot.tuya.com/miniapp/)，单击所需要上传的小程序名称，跳转至 **版本管理** 页。
2. 在 **开发版本** 页签 下，找到对应版本，单击 **提交审核**。
3. 提交审核后，在 **审核版本** 页签中，您可看到提交版本的审核状态。
4. 审核通过后，在 **线上版本** 页签中，您可看到待上线的版本。您可以单击 **启用服务** 按钮，使该版本小程序上线，或者单击 **停用服务** 按钮，使上线的小程序下线。

| 版本阶段 | 说明                                                                         | 可操作的按钮                                                                                                            |
| -------- | :--------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------- |
| 开发版本 | 每次上传的代码都对应独立的开发版本。                                         | **提交审核**、**删除**                                                                                                  |
| 体验版本 | 【可选】在正式上线之前，可以设置体验版本，让权限成员优先测试体验。           | **设为体验版**                                                                                                          |
| 审核版本 | 开发版本的提审阶段。如果某版本审核不通过，需要根据驳回原因，将版本退回修改。 | 不同的审核状态对应不同的操作按钮：<br/>- 审核中：**取消审核**<br/> - 审核通过：**申请上线**<br/> - 不通过：**取消审核** |
| 线上版本 | 面向全部用户的正式版本。                                                     | **启用服务**、**停用服务**                                                                                              |

## 八、小程序投放

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

<Image
  src="/images/guide/platform/output-manage1.png"
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
  }}
/>

## 九、自定义Tab页配置

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

### 1. 在「智能」Tab页面配置入口。（详情可查看：[智能配置](https://iot.tuya.com/oem/smartConfig)）

<Image src="/images/guide/overview/guide-entry.png"/>

### 2. App首页

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

<Image src="/images/guide/overview/app-home.png"/>

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

在[涂鸦开发者平台 app 开发](https://iot.tuya.com/oem/index)选择您自己的 app。点击详细配置。

<Image src="/images/guide/overview/guide-configapp11.png"/>

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

<Image src="/images/guide/overview/guide-configapp22.png"/>

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

更多配置内容请[查看](https://developer.tuya.com/cn/docs/iot/smart-life-app-updates?id=Kd4is05osruqn#title-4-%E4%B8%AA%E6%80%A7%E5%8C%96%E5%B7%A5%E5%85%B7%E5%8D%87%E7%BA%A7%EF%BC%8C%E6%94%AF%E6%8C%81%20OEM%20App%20%E5%BE%AE%E5%AE%9A%E5%88%B6)