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

这篇具有很好参考价值的文章主要介绍了智能小程序小部件(Widget)开发详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

智能小程序小部件(Widget)开发详解,小程序,apache,iot,物联网,小部件,Widget,微信小程序

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

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

创建小部件(Widget)项目

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

智能小程序小部件(Widget)开发详解,小程序,apache,iot,物联网,小部件,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,ts
│     │       └── index.rjs
└─────└── widget.json

2. widget.json 文件描述当前小部件(Widget)的信息

{
  widgets: ['pages/home/index', 'pages/list/index'];
}

可声明多个小部件(Widget).

3. 创建小部件(Widget)页面文件

每个小部件(Widget)对应一个子目录,一般有多少个小部件(Widget),就有多少个子目录。

每个小部件(Widget)一般包含四个文件。

  • [WidgetPath].ts:注册小部件(Widget)
  • [WidgetPath].tyml:小部件(Widget)结构
  • [WidgetPath].tyss:小部件(Widget)样式
  • [WidgetPath].json:小部件(Widget)配置
  • [WidgetPath].rjs:小部件(Widget)渲染脚本文件(可选)
widget
├── cards
│   └── home
│       ├── index.json
│       ├── index.tyss
│       ├── index.tyml
│       ├── index.ts
│       └── index.rjs
└── widget.json

小部件(Widget)配置

  • size: 小部件(Widget)的尺寸大小, size 的值支持: tiny, small, middle, large 和 自定义的高/宽比数值(宽以页面宽为准)。size 必填, 不支持动态尺寸。

  • isDisablePadding: 是否显示间距和圆角, 布尔类型。

{
  "size": "middle",
  // "size": "middle"
  // "size": "large"
  // "size": 0.75
  "isDisablePadding": true
}

小部件(Widget)组件

小部件(Widget)不同于小程序页面,仅支持有限的组件,用于绘制小部件(Widget) 的 UI 界面。现支持的内置组件如下:

名称 功能说明
view 布局容器
button 按钮
text 文本
image 图像容器
swiper 滑块视图容器
swiper-item 滑块视图容器子项
canvas 画布 (使用 rjs 渲染脚本 绘制图表)
movable-area 可移动区域
movable-view 可移动的视图容器,在页面中可以拖拽滑动。movable-view 必须在 movable-area 组件中,并且必须是直接子节点,否则不能移动。
switch 开关选择器。
slider 滑动选择器。

小部件(Widget)API

小部件(Widget)不同于小程序页面, 小部件(Widget)的 API 是通过 kit 插件注入的, 小部件(Widget)的 kit 插件与所属小程序保持一致, 都是在 project.tuya.json 中声明需要的 kit, 如下:

{
  "dependencies": {
    "BaseKit": "3.0.0",
    "MiniKit": "3.0.0",
    "BizKit": "3.0.1"
  }
}

注册小部件(Widget)

Widget 函数,是一个构造函数,用来指定小部件的初始数据、生命周期回调、事件处理函数等。小部件必须使用 Widget() 函数 注册且只注册一次。

小部件(Widget)的注册方式与小程序页面选项基本一致,具体可查看 Widget() 函数使用。

Widget({
 data: { text: '初始化数据'},
 onLoad(query){
  console.log(query); // 可以在 onLoad 的参数中获取打开当前 Widget 路径中的参数
 }, // Widget 加载
 onShow(){}, // 容器可见时触发
 onReady(options){ // Widget 初次渲染完成
   this.setData({ text: "更新数据" })
 },
 onHide(){}, // 容器隐藏时触发
 onRefresh(){} // Widget 重新加载更新, 常用于App下拉刷新场景
 onPageScroll(){} // Widget 卡片内滚动触发
 onUnload(){}, // 容器卸载时触发
 onThemeChange(){} //监听主题变化
   ...
 // 其它方法
})

Tip:

  1. 小部件(Widget)之间的间距为 12px。
  2. 小部件(Widget)各个圆角为 16px。

小部件(Widget)支持动态高度

  • 小部件(Widget) API ty.setWidgetHeight: 动态设置小部件(Widget)的高度

参数(Object object)

属性 类型 默认值 必填 说明
height number 设置的高度, 单位: px
complete function 接口调用结束的回调函数(调用成功、失败都会执行)
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
  • 小部件(Widget) 实例方法 getWidgetInfo: 获取小部件(Widget)的宽高信息
  • 小部件(Widget) 实例方法 rpxToPx: 将rpx值转为px值, 参数为数值型
  • 小部件(Widget) 生命周期 onResize: 监听小部件(Widget)动态高度变化, 回调参数为当前小部件(Widget)宽高

使用示例

Widget({
  data: {},
  onResize(query) {
    console.log('onResize', query); // query: {height, width} 单位:px
  },
  changeHeight(e) {
    const widgetInfo = this.getWidgetInfo(); // widgetInfo: {height, width} 单位:px
    const addHeight = this.rpxToPx(100); // rpx值转为px
    
    const allHeight = widgetInfo.height + addHeight;
    ty.setWidgetHeight({
      height: allHeight, // 高度单位:px
      success: (res) => {
        console.log('Widget height set successfully', res);
      },
      fail: (err) => {
        console.log('Widget height setting failed', err);
      }
    });
  },
})

小部件(Widget)案例

智能小程序小部件(Widget)开发详解,小程序,apache,iot,物联网,小部件,Widget,微信小程序

智能小程序小部件(Widget)开发详解,小程序,apache,iot,物联网,小部件,Widget,微信小程序文章来源地址https://www.toymoban.com/news/detail-792774.html

到了这里,关于智能小程序小部件(Widget)开发详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于物联网设计的智能储物柜(4G+华为云IOT+微信小程序)

    在游乐场、商场、景区等人流量较大的地方,往往存在用户需要临时存放物品的情况,例如行李箱、外套、购物袋等。为了满足用户的储物需求,并提供更加便捷的服务体验,当前设计了一款物联网智能储物柜。 该智能储物柜通过与华为云物联网服务器的连接,实现了数据的

    2024年01月16日
    浏览(47)
  • OpenRemote: Java 开源 IoT 物联网开发平台,匹配智慧城市、智能家居、能源管理

    OpenRemote 是一个直观、用户友好的基于Java语言的开源 IoT 物联网设备管理平台,它包括从连接设备到构建应用程序和特定领域的智能应用程序的所有功能和特性。通过OpenRemote物联网平台,用户可以收集和处理来自不同设备的传感器数据,适用于智能家居、智慧城市、能源管理

    2024年02月08日
    浏览(50)
  • Android widget 小部件使用指南强化版

    小部件是主屏幕定制的一个重要方面。您可以将它们视为应用程序最重要的数据和功能的“概览”视图,这些数据和功能可以直接在用户的主屏幕上访问。用户可以在主屏幕面板上移动小部件,如果支持的话,还可以调整它们的大小以根据自己的喜好定制小部件中的信息量。

    2024年01月19日
    浏览(48)
  • 颠覆IoT行业的开发神器!涂鸦智能重磅推出TuyaOS操作系统【程序员必备】

    1 前言 作为降低 IoT 技术门槛的开发神器,TuyaOS 操作系统重磅发布 3.6.0 新版本啦!针对设备安全、功耗、通信速率等关键功能,做了重大创新和优化升级。为了助力开发者更快速便捷地接入涂鸦IoT PaaS,并低门槛开发出有创意的智能单品,每个开发框架新增不少新功能。 具体

    2024年02月02日
    浏览(48)
  • 基于 IoT 物联网 + 5G 技术搭建 100万台电梯智能化运维平台

    随着近20年我国房地产的蓬勃发展, 电梯 已经成为人们现代生活中不可或缺的一部分,也是城市化建设中重要的建筑设备之一。据中国电梯行业协会统计,截至2022年底,我国电梯保有量为 990万台,电梯运营健康度,减少事故发生变得十分重要。 国内有接近约 1.5万多 家电梯

    2024年01月25日
    浏览(46)
  • PandaX : Go语言企业级 IoT 物联网平台快速开发框架

    PandaX  是一个基于前后端分离架构开发的开源企业级物联网平台低代码开发基座,后端系统采用 Go 语言和前端基于 VUE3 开发,支持设备接入、设备管控,规则链引擎,云组态,可视化大屏,报表设计器,表单设计器,代码生成器等功能,帮助你快速建立企业 IoT 物联网平台相

    2024年02月06日
    浏览(55)
  • 【IoT物联网】IoT小程序在展示中央空调采集数据和实时运行状态上的应用

      利用前端语言实现跨平台应用开发似乎是大势所趋,跨平台并不是一个新的概念,“一次编译、到处运行”是老牌服务端跨平台语言Java的一个基本特性。随着时代的发展,无论是后端开发语言还是前端开发语言,一切都在朝着减少工作量,降低工作成本的方向发展。  

    2024年02月16日
    浏览(39)
  • 车联网场景中 JT/T 808 协议终端免开发快速接入阿里云 IoT 物联网平台实战

    车联网场景中 JT/T 808协议 是一种在中国广泛应用的车载终端通信协议,用于车辆与监控中心之间的数据通信。 01 JT/T808 协议 JT/T808 协议是指交通部颁布的《 道路运输车辆卫星定位系统终端通讯协议及数据格式 》,广泛应用于车辆远程监管、物流管理、车辆安防等领域。它为

    2024年02月04日
    浏览(61)
  • IoT 物联网共享充电桩场景中设备资产定位和地理围栏开发实践

    基于经纬度的设备资产定位和地理围栏在物联网场景中应用广泛 01 物联网 GEO 场景架构方案 首先,IoT 终端设备通过卫星定位模块获取当前经纬度;然后,将坐标信息实时上报到物联网平台;最后,存储到 Redis GEO 数据库中。 当你打开小程序是,手机定位模块获取到你当前

    2024年02月08日
    浏览(39)
  • 安卓程序开发——widget组件开发Widget就是可以放在桌面上的组件,包括像天气、便签、等。AppWidget 框架类练习Widget组件的基础应用、widget的配置、widget与服务结合实现

       掌握Android  widget组件的应用,练习Widget组件的基础应用、widget的配置、widget与服务结合实现时间倒计时 1.创建一个Android 应用,练习widget的基础用法。 2.在布局文件添加TextView ImageButton两个控件 3.在res下创建xml文件夹,再创建widget_template.xml元数据 4.添加WidgetProvider.java文件

    2024年02月20日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包