Widget 代表應(yīng)用的一個小部件，負責小部件的展示和交互。

小部件(Widget) 的開發(fā)在智能小程序的基礎(chǔ)上增加一個目錄即可，用于存放小部件(Widget)的代碼。并在?project.tuya.json?中增加一個聲明。

創(chuàng)建小部件(Widget)項目

在 Tuya MiniApp Tools 中，新建項目并選擇小部件(Widget)對應(yīng)模板即可自動創(chuàng)建小部件(Widget)項目。

工程配置

1. project.tuya.json 中聲明小部件(Widget)開發(fā)目錄

{
  "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 目錄下。

• 在小程序項目內(nèi)新增 widget 目錄, 項目整體目錄結(jié)構(gòu)如下:

├── 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. 創(chuàng)建小部件(Widget)頁面文件

每個小部件(Widget)對應(yīng)一個子目錄，一般有多少個小部件(Widget)，就有多少個子目錄。

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

• [WidgetPath].ts：注冊小部件(Widget)
• [WidgetPath].tyml：小部件(Widget)結(jié)構(gòu)
• [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 和 自定義的高/寬比數(shù)值(寬以頁面寬為準)。size 必填, 不支持動態(tài)尺寸。

• isDisablePadding: 是否顯示間距和圓角, 布爾類型。

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

小部件(Widget)組件

小部件(Widget)不同于小程序頁面，僅支持有限的組件，用于繪制小部件(Widget) 的 UI 界面?，F(xiàn)支持的內(nèi)置組件如下：

小部件(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 函數(shù)，是一個構(gòu)造函數(shù)，用來指定小部件的初始數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等。小部件必須使用 Widget() 函數(shù) 注冊且只注冊一次。

小部件(Widget)的注冊方式與小程序頁面選項基本一致，具體可查看 Widget() 函數(shù)使用。

Widget({
 data: { text: '初始化數(shù)據(jù)'},
 onLoad(query){
  console.log(query); // 可以在 onLoad 的參數(shù)中獲取打開當前 Widget 路徑中的參數(shù)
 }, // Widget 加載
 onShow(){}, // 容器可見時觸發(fā)
 onReady(options){ // Widget 初次渲染完成
   this.setData({ text: "更新數(shù)據(jù)" })
 },
 onHide(){}, // 容器隱藏時觸發(fā)
 onRefresh(){} // Widget 重新加載更新, 常用于App下拉刷新場景
 onPageScroll(){} // Widget 卡片內(nèi)滾動觸發(fā)
 onUnload(){}, // 容器卸載時觸發(fā)
 onThemeChange(){} //監(jiān)聽主題變化
   ...
 // 其它方法
})

Tip:

1. 小部件(Widget)之間的間距為 12px。
2. 小部件(Widget)各個圓角為 16px。

小部件(Widget)支持動態(tài)高度

• 小部件(Widget) API?ty.setWidgetHeight: 動態(tài)設(shè)置小部件(Widget)的高度

參數(shù)(Object object)

• 小部件(Widget) 實例方法?getWidgetInfo: 獲取小部件(Widget)的寬高信息
• 小部件(Widget) 實例方法?rpxToPx: 將rpx值轉(zhuǎn)為px值, 參數(shù)為數(shù)值型
• 小部件(Widget) 生命周期?onResize: 監(jiān)聽小部件(Widget)動態(tài)高度變化, 回調(diào)參數(shù)為當前小部件(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值轉(zhuǎn)為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)案例

文章來源地址http://www.zghlxwxcb.cn/news/detail-792774.html

到了這里，關(guān)于智能小程序小部件(Widget)開發(fā)詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！