On this page
Core FeaturesDifferences and ConstraintsStrong Association with ProductsDifferent Invocation EntryBuilt-in Device EnvironmentSolution Process

Solution Introduction

The Panel MiniApp is a lightweight development solution designed specifically for smart device control panels. Based on the MiniApp framework, it supports cross-platform development and powerful IoT functions, helping developers quickly and cost-effectively build smart device management solutions.

Core Features

  • Easy to Use: Developed using JavaScript / Typescript, similar to H5 page development, easy to get started.
  • Device Tools: Provides integrated IDE and device debugging tools, supporting the entire development process from coding to testing, improving efficiency.
  • IoT Integration: Built-in device control API and SDK, simplifying IoT function integration for smart management.
  • Multi-Platform Distribution: Write once, adapt to Android and iOS, saving development time.

Differences and Constraints

Strong Association with Products

The Panel MiniApp is designed specifically for smart device control and is closely associated with device products. Developers need to bind the MiniApp with the product on the Tuya developer platform, as shown in the image below.

Different Invocation Entry

The Panel MiniApp is invoked through the device list entry and is strongly associated with smart devices. Users and developers need to enter the MiniApp from the device list, as shown in the image below. During the development phase, it must be entered from the device list entry in the IDE's device tools, and similarly, in the App environment, it must be entered from the device list entry.

Built-in Device Environment

The Panel MiniApp relies on a virtual or real device environment, integrating device ID, group ID, and multi-language support for products. Below is sample code for obtaining the device ID and multi-language settings:

import { getLaunchOptionsSync } from '@ray-js/ray';

// Obtain the device ID (single device)
const { deviceId } = getLaunchOptionsSync()?.query ?? {};

// Obtain the group ID (group device)
const { groupId } = getLaunchOptionsSync()?.query ?? {};

// Obtain the corresponding multi-language value for the product or group
Strings.getDpLang('switch_led');

Solution Process

Info

For a complete development process, please refer to Quick Start - Panel MiniApp.

  • Create Product: First, we need to create a product on the Tuya Developer Platform, where panel development engineers, hardware engineers, and product designers define the functionality points.

  • Development and Debugging: Next, the panel development engineer develops the Panel MiniApp around the operation functionality points. During the development phase, the Tuya MiniApp IDE provides a virtual device for debugging. Meanwhile, the hardware engineer also develops embedded programs around the functionality points.

  • Experience Testing: In the joint debugging phase, the Panel MiniApp releases a trial version, which connects to real devices via the SmartLife App for testing (or utilizes the real device debugging feature).

  • Review and Launch: After testing is complete, the Panel MiniApp can be submitted for review and officially released. Then, you can bind the product and Panel MiniApp on the Tuya Developer Platform, completing the entire Panel MiniApp development process.