智能小程序小部件(Widget)开发详解

最新推荐文章于 2025-06-11 11:25:56 发布

IoT砖家涂拉拉

最新推荐文章于 2025-06-11 11:25:56 发布

阅读量1.5k

点赞数 19

CC 4.0 BY-SA版权

文章标签：小程序 apache iot 物联网小部件 Widget 微信小程序

本文链接：https://blog.youkuaiyun.com/Ms_Smart/article/details/135556731

本文详细介绍了如何在TuyaMiniApp中创建、配置和使用Widget小部件，包括项目结构设置、工程配置、小部件信息描述、组件支持、API使用以及动态高度管理的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Widget 代表应用的一个小部件，负责小部件的展示和交互。

小部件(Widget) 的开发在智能小程序的基础上增加一个目录即可，用于存放小部件(Widget)的代码。并在 project.tuya.json 中增加一个声明。

创建小部件(Widget)项目

在 Tuya MiniApp Tools 中，新建项目并选择小部件(Widget)对应模板即可自动创建小部件(Widget)项目。

工程配置

1. project.tuya.json 中声明小部件(Widget)开发目录

{
  "projectname": "widget-demo",
  "i18n": true,
+ "miniprogramRoot": "app/",  # 小程序源码
+ "widgetRoot": "widget/",    # 小部件(Widget)源码
  "baseversion": "2.10.12",
  "compileType": "widget",
  "dependencies": {
    "BaseKit": "3.0.0",
    "MiniKit": "3.0.0",
    "BizKit": "3.0.1"
  }
}

注：小程序文件迁移到 app 目录下。

在小程序项目内新增 widget 目录, 项目整体目录结构如下:

├── package.json
├── project.tuya.json
├── app
│     ├── app.js
│     ├── app.json
│     ├── app.tyss
│     ├── assets
│     ├── i18n
│     ├── components
│     ├── pages
│     │     └── home
│     │         ├── index.json
│     │         ├── index.tyss
│     │         ├── index.tyml
│     │         ├── index.js,ts
│     │         └── index.rjs
│     └── theme.json
├── widget
│     ├── assets
│     ├── cards
│     │   └── weather
│     │       ├── index.json
│     │       ├── index.tyss
│     │       ├── index.tyml
│     │       ├── index.js