Xiaomi Vela QuickApp

https://iot.mi.com/vela/quickapp
Admin
Xiaomi Vela QuickApp is a developer-friendly, high-performance IoT cross-platform application...
Tokens:55,677
Snippets:280
Trust Score:10
Update:1 year ago
Show doc for...
Tokens:
Raw
### Full Application Manifest Configuration Example (JSON)

Source: https://iot.mi.com/vela/quickapp/zh/guide/framework/manifest

An example demonstrating a comprehensive manifest.json configuration. It includes essential fields like package name, app name, icon, version details, minimum platform version, feature declarations, router setup, and interface declarations.

```json
{
  "package": "com.company.unit",
  "name": "appName",
  "icon": "/Common/icon.png",
  "versionName": "1.0",
  "versionCode": 1,
  "minPlatformVersion": 1000,
  "features": [{ "name": "system.network" }],
  "router": {
    "entry": "Hello",
    "pages": {
      "Hello": {
        "component": "hello",
        "path": "/"
      }
    }
  }
}
```

--------------------------------

### Implementing Page Initialization Lifecycle Hook

Source: https://iot.mi.com/vela/quickapp/zh/guide/framework/script

Provides an example of the 'onInit' lifecycle hook, which is executed when the application or page is initialized. This hook is suitable for setting up initial states or performing one-time setup tasks. The example logs a message to the console.

```javascript
// 会在应用/页面被初始化的时候执行这个函数
onInit() {
  console.log('page initialized！')
}
```

--------------------------------

### CSS Selector Examples

Source: https://iot.mi.com/vela/quickapp/zh/guide/framework/style

Provides examples of CSS selectors used for styling components. It covers class selectors, ID selectors, tag selectors, and the comma combinator for applying styles to multiple selectors simultaneously.

```css
/* 单个选择器 */
text {
}
.class-abc {
}
#idAbc {
}
/* 同一样式适应多个选择器 */
.font-text, .font-comma {
}
```

--------------------------------

### Start Recording with Parameters (JavaScript)

Source: https://iot.mi.com/vela/quickapp/zh/features/system/record

Shows how to start audio recording using the `record.start` method. This function accepts an object with various parameters to control the recording process, including duration, sample rate, number of channels, encoding bitrate, and audio format. It also includes success, fail, and complete callback functions to handle the recording outcome.

```javascript
record.start({
  duration: 10000,
  sampleRate: 8000,
  numberOfChannels: 1,
  encodeBitRate: 128000,
  format: 'pcm',
  success: function(data) {
    console.log(`handling success: ${data.uri}`)
  },
  fail: function(data, code) {
    console.log(`handling fail, code = ${code}, errorMsg=${data}`)
  },
  complete: function () {
    console.log(`handling complete`)
  }
})
```

--------------------------------

### Start Vibration with Custom Parameters (JavaScript)

Source: https://iot.mi.com/vela/quickapp/zh/features/system/vibrator

Illustrates how to start a vibration with custom duration, interval, and count. Includes success, fail, and complete callback functions.

```javascript
vibrator.start({
  duration: 1000,
  interval: 1000,
  count: 10,
  success: function (data) {
    console.log(`handling success, id = ${data.id}`)
  },
  fail: function(data, code) {
    console.log(`handling fail, code = ${code}, errorMsg=${data}`)
  },
  complete: function () {
    console.log(`handling complete`)
  }
})
```

--------------------------------

### JavaScript: Fetch Network Requests with @system.fetch

Source: https://context7.com/context7/iot_mi_vela_quickapp/llms.txt

Demonstrates how to use the `@system.fetch` module in JavaScript to perform various HTTP requests. It covers GET and POST requests, handling responses as text or JSON, and using Promises for asynchronous operations. It also includes examples for downloading files and fetching binary data.

```javascript
import fetch from '@system.fetch'

export default {
  private: {
    responseData: '',
    isLoading: false
  },

  // GET 请求示例
  fetchTextData() {
    fetch.fetch({
      url: 'https://api.example.com/data',
      method: 'GET',
      responseType: 'text',
      header: {
        'Accept-Language': 'zh-CN,en-US;q=0.8'
      },
      success: (response) => {
        console.log('状态码: ' + response.code)
        console.log('响应数据: ' + response.data)
        console.log('响应头: ' + JSON.stringify(response.headers))
        this.responseData = response.data
      },
      fail: (data, code) => {
        console.log('请求失败: ' + data + ', 错误码: ' + code)
      },
      complete: () => {
        console.log('请求完成')
        this.isLoading = false
      }
    })
  },

  // POST 请求提交表单数据
  submitFormData() {
    fetch.fetch({
      url: 'https://api.example.com/submit',
      method: 'POST',
      data: {
        username: 'user123',
        password: 'pass456'
      },
      header: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      responseType: 'json',
      success: (response) => {
        if (response.code === 200) {
          const result = response.data
          console.log('提交成功: ' + JSON.stringify(result))
        }
      },
      fail: (data, code) => {
        console.log('提交失败: errMsg=' + data + ', errCode=' + code)
      }
    })
  },

  // Promise 方式处理请求
  async fetchJsonData() {
    try {
      const res = await fetch.fetch({
        url: 'https://api.example.com/users/123',
        method: 'GET',
        responseType: 'json'
      })

      const result = res.data
      console.log('用户信息: ' + JSON.stringify(result.data))
      return result.data
    } catch (error) {
      console.log('请求异常: ' + error.data + ', code=' + error.code)
      return null
    }
  },

  // 下载文件
  downloadFile() {
    fetch.fetch({
      url: 'https://example.com/file.pdf',
      method: 'GET',
      responseType: 'file',
      success: (response) => {
        console.log('文件下载成功,临时路径: ' + response.data)
        // response.data 是临时文件URI
      }
    })
  },

  // ArrayBuffer 请求
  fetchBinaryData() {
    fetch.fetch({
      url: 'https://api.example.com/binary',
      method: 'GET',
      responseType: 'arraybuffer',
      success: (response) => {
        const buffer = response.data
        console.log('接收到二进制数据, 大小: ' + buffer.byteLength + ' bytes')
      }
    })
  }
}
```

--------------------------------

### Record API

Source: https://iot.mi.com/vela/quickapp/zh/features/system/record

Provides methods to start and stop audio recording.

```APIDOC
## POST system.record.start

### Description
Starts audio recording with specified parameters.

### Method
POST

### Endpoint
system.record.start

### Parameters
#### Request Body
- **duration** (Number) - Optional - Recording duration in milliseconds. Stops recording when the specified duration is reached.
- **sampleRate** (Number) - Optional - Sampling rate. Defaults to 8000. Recommended values: 8000/16000/32000/44100/48000.
- **numberOfChannels** (Number) - Optional - Number of recording channels. Valid values: 1/2.
- **encodeBitRate** (Number) - Optional - Encoding bitrate. Depends on the sampling rate and audio format.
- **format** (String) - Optional - Audio format. Valid values: pcm/opus/wav. Defaults to pcm.
- **success** (Function) - Optional - Success callback function.
- **fail** (Function) - Optional - Failure callback function.
- **complete** (Function) - Optional - Callback function executed after completion.

### Request Example
```json
{
  "duration": 10000,
  "sampleRate": 8000,
  "numberOfChannels": 1,
  "encodeBitRate": 128000,
  "format": "pcm",
  "success": "function(data) { console.log(`handling success: ${data.uri}`); }",
  "fail": "function(data, code) { console.log(`handling fail, code = ${code}, errorMsg=${data}`); }",
  "complete": "function() { console.log('handling complete'); }"
}
```

### Response
#### Success Response (200)
- **uri** (String) - The storage path of the recorded audio file, located in the application's cache directory.

#### Response Example
```json
{
  "uri": "file:///data/user/0/com.example.app/cache/recordings/recording123.pcm"
}
```

#### Error Handling
- **205**: Recording already in progress.
- **202**: Invalid parameters.
```

```APIDOC
## POST system.record.stop

### Description
Stops the current audio recording.

### Method
POST

### Endpoint
system.record.stop

### Parameters
No parameters required.

### Request Example
```json
{}
```

### Response
No specific response body for success, indicates the recording has stopped.
```

--------------------------------

### Pass Parameters with router.replace

Source: https://iot.mi.com/vela/quickapp/zh/guide/framework/page-switch

This example shows how to pass parameters when navigating to a new page using router.replace. The 'params' object in the configuration allows you to send key-value pairs to the destination page.

```javascript
import router from '@system.router'

export default {
  private: {
    title: 'Hello, world!'
  },

  onInit () {
    console.info('Interface router switches pages and passes parameters')
  },

  routePageReplaceWithParams () {
    // Jump to a page within the application
    router.replace({
      uri: '/PageParams/receiveparams',
      params: { key: this.title }
    })
  }
}
```

--------------------------------

### Switch Component Usage Example

Source: https://iot.mi.com/vela/quickapp/zh/components/form/switch

This code snippet demonstrates how to use the switch component in a web template. It includes setting the initial state, handling changes, and displaying the current status. Dependencies include the switch component itself and basic text elements.

```html
<template>
  <div class="page">
    <text class="title">switch 组件</text>
    <switch checked="{{ switchValue }}" class="switch" @change="onSwitchChange"></switch>
    <text>状态：{{ switchValue }}</text>
  </div>
</template>

<script>
  export default {
    private: {
      switchValue: true
    },
    onSwitchChange(e) {
      this.switchValue = e.checked
    }
  }
</script>

<style>
  .page {
    flex-direction: column;
    padding: 30px;
    background-color: #ffffff;
  }

  .title {
    font-weight: bold;
  }

  .switch {
    width: 100px;
    margin-top: 10px;
  }
</style>
```

--------------------------------

### Async Navigation with Unified Storage (JavaScript)

Source: https://iot.mi.com/vela/quickapp/zh/guide/best-practice/start

Example of using the unified storage API with async/await for navigation logic on the logo page. It fetches 'ifHome' status from storage and navigates to the home page if the condition is met, without `setTimeout`.

```javascript
//logo.ux
async onInit(){
   const ifHome = await storage.getItem('ifHome')
  if(!ifHome){
     router.push({uri:'pages/home'})
  }
}

```

--------------------------------

### Input Component Examples (Vue.js Template)

Source: https://iot.mi.com/vela/quickapp/zh/components/form/input

Provides a Vue.js template demonstrating the usage of input components for buttons, checkboxes, and radio buttons. It includes event handling for user interactions.

```html
<template>
  <div class="page">
    <div class="section">
      <text class="title">input-button 组件</text>
      <input class="button" type="button" value="按钮" @click="onButtonClick" />
      <text>{{ buttonText }}</text>
    </div>
    <div class="section">
      <text class="title">input-checkbox 组件</text>
      <input class="checkbox" type="checkbox" checked="{{ checkboxChecked }}" @change="onCheckboxChange" />
      <text>我的勾选状态: {{ checkboxChecked }}</text>
    </div>
    <div class="section">
      <text class="title">input-radio 组件</text>
      <div>
        <input class="radio" type="radio" name="radio" value="1" checked="{{radioValue === '1'}}" @change="onRadioChange" />
        <input class="radio" type="radio" name="radio" value="2" checked="{{radioValue === '2'}}" @change="onRadioChange" />
        <input class="radio" type="radio" name="radio" value="3" checked="{{radioValue === '3'}}" @change="onRadioChange" />
      </div>
      <text>当前选中第{{ radioValue }}个</text>
    </div>
  </div>
</template>
```

--------------------------------

### Install PostCSS Loaders

Source: https://iot.mi.com/vela/quickapp/zh/guide/framework/style/page-style-and-layout

Installs the necessary PostCSS loaders for CSS parsing. This step includes installing `postcss-loader` and `precss` as development dependencies.

```bash
npm i postcss-loader precss@3.1.2 -D
```

--------------------------------

### List Component Example in Vue.js

Source: https://iot.mi.com/vela/quickapp/zh/components/container/list

This example demonstrates how to use the List component with list items, event handlers for scrolling, and basic styling. It includes a predefined product list and console logs for scroll events.

```html
<template>
  <div class="page">
    <list class="list" bounces="true" 
      onscroll="onScroll" 
      onscrolltop="onScrollTop" 
      onscrollbottom="onScrollBottom"
      onscrolltouchup="onScrollTouchup">
      <list-item for="{{productList}}" class="item" type="item">
        <text>{{$item.name}}: {{$item.price}}</text>
      </list-item>
    </list>
  </div>
</template>

<script>
  export default {
    private: {
      productList: [
        { name: '衣服', price: '100' },
        { name: '裤子', price: '200' },
        { name: '鞋子', price: '300' },
        { name: '帽子', price: '60' },
        { name: '雨伞', price: '300' },
        { name: '书包', price: '60' },
        { name: '书本', price: '30' }
      ],
    },
    onScroll(e) {
      console.log('### list onScroll evt: ', e)
    },
    onScrollTop(e) {
      console.log('### list onScrollTop evt: ', e)
    },
    onScrollBottom(e) {
      console.log('### list onScrollBottom evt: ', e)
    },
    onScrollTouchup(e) {
      console.log('### list onScrollTouchup evt: ', e)
    }
  }
</script>

<style>
  .page {
    justify-content: center;
    align-items: center;
    background-color: #000;
  }

  .list {
    width: 300px;
    height: 200px;
    border: 1px solid #fff;
  }

  text {
   color: #fff;
  }
  .item {
    height: 40px;
    width: 100%;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
  }
</style>
```

--------------------------------

### Unified Storage API with Promises (JavaScript)

Source: https://iot.mi.com/vela/quickapp/zh/guide/best-practice/start

Provides a unified interface for storage operations (get, set, delete, clear) by wrapping the native storage API with the promisified utility function. This allows for cleaner asynchronous handling of storage data.

```javascript
//统一封装storage方法
import storage from '@system.storage';
import {promisify} from './promise';

const _get = promisify(storage.get);
const _set = promisify(storage.set);
const _clear = promisify(storage.clear);
const _delete = promisify(storage.delete);
export default {
  getItem(key) {
    return _get({key});
  },

  setItem(key, value) {
    return _set({key, value});
  },

  deleteItem(key) {
    return _delete({key});
  },

  clear() {
    return _clear();
  },
}

```

--------------------------------

### Vela JS Full UX Page Example

Source: https://context7.com/context7/iot_mi_vela_quickapp/llms.txt

An example of a complete UX page in the Xiaomi Vela JS framework. It includes template (HTML-like structure), style (CSS), and script (JavaScript) sections, demonstrating basic UI elements and event handling.

```javascript
<template>
  <div class="page">
    <text class="title">欢迎打开{{title}}</text>
    <input class="btn" type="button" value="跳转到详情页" onclick="routeDetail">
  </div>
</template>

<style>
  .page {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .btn {
    width: 400px;
    height: 60px;
    background-color: #09ba07;
    color: #ffffff;
  }
</style>

<script>
  import router from '@system.router'

  export default {
    // 页面私有数据
    private: {
      title: '示例页面'
    },
    // 生命周期函数
    onInit() {
      console.log('页面初始化')
    },
    onReady() {
      console.log('页面渲染完成')
    },
    onShow() {
      console.log('页面显示')
    },
    // 事件处理方法
    routeDetail() {
      router.push({
        uri: '/pages/detail'
      })
    }
  }
</script>
```

--------------------------------

### Vibrator API Reference

Source: https://iot.mi.com/vela/quickapp/zh/features/system/vibrator

This section details the various functions available in the Vibrator API, including their parameters, return values, and usage examples.

```APIDOC
## vibrator.vibrate(OBJECT)

### Description
Triggers vibration on the device.

### Method
`vibrator.vibrate()

### Parameters
#### Request Body
- **mode** (String) - Optional - Vibration mode, "long" for long vibration, "short" for short vibration. Defaults to "long".

### Request Example
```json
{
  "mode": "long"
}
```

### Response
#### Success Response (200)
This function does not return a specific value on success.

#### Response Example
(No specific response body for success is defined)
```

```APIDOC
## vibrator.start(OBJECT)

### Description
Starts a vibration sequence.

### Method
`vibrator.start()

### Parameters
#### Request Body
- **duration** (Number) - Required - Vibration duration in milliseconds. Must be a positive integer.
- **interval** (Number) - Required - Vibration interval in milliseconds. Must be a positive integer.
- **count** (Number) - Required - Number of vibrations. Must be a positive integer.
- **success** (Function) - Optional - Callback function for successful vibration.
- **fail** (Function) - Optional - Callback function for failed vibration.
- **complete** (Function) - Optional - Callback function executed after vibration completes.

### Request Example
```json
{
  "duration": 1000,
  "interval": 1000,
  "count": 10,
  "success": function (data) { console.log(`handling success, id = ${data.id}`) },
  "fail": function(data, code) { console.log(`handling fail, code = ${code}, errorMsg=${data}`) },
  "complete": function() { console.log(`handling complete`)
}
```

### Response
#### Success Response (200)
- **id** (Number) - A unique ID identifying the vibration task.

#### Response Example
```json
{
  "id": 12345
}
```

#### Error Handling
- **205**: Task already exists.
- **202**: Invalid parameters.
```

```APIDOC
## vibrator.stop(Number)

### Description
Stops an ongoing vibration sequence.

### Method
`vibrator.stop()

### Parameters
#### Path Parameters
- **Number** (Number) - Required - The vibration task ID to stop.

### Request Example
```json
1
```

### Response
#### Success Response (200)
- **Boolean** - true if the stop operation was successful, false otherwise.

#### Response Example
```json
true
```
```

```APIDOC
## vibrator.getSystemDefaultMode()

### Description
Retrieves the system's default vibration mode.

### Method
`vibrator.getSystemDefaultMode()

### Parameters
None.

### Request Example
```json
{}
```

### Response
#### Success Response (200)
- **Number** - The default vibration mode: 0 for vibration off, 1 for standard vibration, 2 for enhanced vibration.

#### Response Example
```json
1
```
```

--------------------------------

### Move File Example

Source: https://iot.mi.com/vela/quickapp/zh/features/data/file

Example of using the file.move API to relocate a file from a source URI to a destination URI. This function is asynchronous and provides callbacks for success and failure scenarios, returning the new file URI upon successful completion.

```javascript
file.move({
  srcUri: 'internal://cache/path/to/file',
  dstUri: 'internal://files/path/to/file',
  success: function(uri) {
    console.log(`move success: ${uri}`)
  },
  fail: function(data, code) {
    console.log(`handling fail, code = ${code}`)
  }
})
```

--------------------------------

### Handle Audio Play Event (JavaScript)

Source: https://iot.mi.com/vela/quickapp/zh/features/other/audio

Sets up an event listener for the `play` event, which is triggered when audio starts playing or when `autoplay` is true. It also shows how to remove the listener by setting it to null.

```javascript
audio.onplay = function() {
  console.log(`audio starts to play`)
}
audio.onplay = null
```

--------------------------------

### Marquee Component Example (Vue.js)

Source: https://iot.mi.com/vela/quickapp/zh/components/basic/marquee

This example demonstrates how to use the Marquee component in a Vue.js template. It shows how to set attributes like scrollamount and loop, and how to control the marquee's behavior using its start method.

```html
<template>
  <div>
    <marquee id="marquee" scrollamount={{6}} loop={{-1}}>
      scrollamount控制滚动速度，默认值为6（6像素/秒）
    </marquee>
  </div>
</template>

<script>
  export default {
    onReady() {
      this.$element('marquee').start()
    }
  }
</script>

```

--------------------------------

### Get Current Geolocation (JavaScript)

Source: https://iot.mi.com/vela/quickapp/zh/features/system/geolocation

Example of using the `geolocation.getLocation` method to retrieve the device's current geographical coordinates. It includes success and fail callbacks to handle the response or errors, such as permission denial or timeouts. The default timeout is 30000ms.

```javascript
geolocation.getLocation({
  success: function(data) {
    console.log(
      `handling success: longitude = ${data.longitude}, latitude = ${data.latitude}, speed = ${data.speed}, altitude = ${data.altitude}`
    )
  },
  fail: function(data, code) {
    console.log(`handling fail, code = ${code}, errorMsg=${data}`)
  }
})
```

--------------------------------

### Project Directory Structure

Source: https://iot.mi.com/vela/quickapp/zh/guide/framework/project-structure

Illustrates a standard project layout for a Quick App, including manifest, app.ux, pages, i18n, and common resource directories.

```tree
├── manifest.json
├── app.ux
├── pages
│   ├── index
|   |   └── index.ux
│   └── detail
|       └── detail.ux
├── i18n
|   ├── defaults.json
|   ├── zh-CN.json
|   └── en-US.json
└── common
    ├── style.css
    ├── utils.js
    └── logo.png

```

--------------------------------

### Configure Router (JSON)

Source: https://iot.mi.com/vela/quickapp/zh/guide/framework/manifest

Defines the application's page structure and navigation. It includes the entry page and a list of all available pages with their component mappings and optional path configurations. Pages without explicit routing information will be skipped during compilation.

```json
{
  "router": {
    "entry": "Demo",
    "pages": {
      "Demo": {
        "component": "index"
      }
    }
  }
}
```

--------------------------------

### Get File Information Example

Source: https://iot.mi.com/vela/quickapp/zh/features/data/file

Shows how to obtain detailed information about a local file using the file.get API. This includes file URI, size, last modified time, type (file/directory), and optionally, recursive listing of sub-files if the URI points to a directory and the recursive option is set to true.

```javascript
file.get({
  uri: 'internal://files/path/to/file',
  success: function(data) {
    console.log(data.uri)
    console.log(data.length)
    console.log(data.lastModifiedTime)
  },
  fail: function(data, code) {
    console.log(`handling fail, code = ${code}`)
  }
})
```

--------------------------------

### 页面 onInit 生命周期 - JavaScript

Source: https://iot.mi.com/vela/quickapp/zh/guide/framework/script/lifecycle

页面 onInit 生命周期在 ViewModel 数据准备就绪时触发，允许开发者在此阶段访问和使用页面数据。它还演示了如何访问 $app 的数据和方法。

```javascript
private: {
  // 生命周期的文本列表
  lcList: []
},
onInit () {
  this.lcList.push('onInit')

  console.info(`触发：onInit`)
  // 执行：获取ViewModel的lcList属性：onInit
  console.info(`执行：获取ViewModel的lcList属性：${this.lcList}`)
  // $app信息
  console.info(`获取：manifest.json的config.data的数据：${this.$app.$data.name}`)
  console.info(`获取：APP文件中的数据：${this.$app.$def.data1.name}`)
  console.info(`执行：APP文件中的方法`, this.$app.$def.method1())
}
```

--------------------------------

### Install Conditional Compilation Plugin (npm)

Source: https://iot.mi.com/vela/quickapp/zh/guide/multi-screens/conditional-compilation

Installs the conditional-compilation-webpack-plugin as a development dependency using npm.

```bash
npm install conditional-compilation-webpack-plugin -D

```

--------------------------------

### Install Cross-Environment Plugin (npm)

Source: https://iot.mi.com/vela/quickapp/zh/guide/multi-screens/conditional-compilation

Installs the cross-env package as a development dependency using npm, which is used for setting environment variables across different operating systems.

```bash
npm install cross-env -D

```

--------------------------------

### Import System Record Module (JavaScript)

Source: https://iot.mi.com/vela/quickapp/zh/features/system/record

Demonstrates how to import the system.record module in JavaScript for use within a MI VELA QuickApp. This module provides access to audio recording functionalities. It can be imported using either the ES module syntax (`import`) or the CommonJS syntax (`require`).

```javascript
import record from '@system.record'
// 或 
const record = require('@system.record')
```

--------------------------------

### Delete File Example

Source: https://iot.mi.com/vela/quickapp/zh/features/data/file

Provides an example of deleting a local file using the file.delete API. This operation is asynchronous and includes success and failure callbacks to handle the outcome of the deletion attempt.

```javascript
file.delete({
  uri: 'internal://files/path/to/file',
  success: function(data) {
    console.log('handling success')
  },
  fail: function(data, code) {
    console.log(`handling fail, code = ${code}`)
  }
})
```

--------------------------------

### app.ux 应用配置和公共脚本引入

Source: https://iot.mi.com/vela/quickapp/zh/guide/framework/ux

app.ux 文件用于应用级别的配置，并且可以在 script 部分引入公共脚本，使其在所有页面中可用。必须保留 /**manifest**/ 注释。

```javascript
<script>
  /**
   * 应用级别的配置，供所有页面公用
   */
  import util from './util'

  export default {
    showMenu: util.showMenu,
    createShortcut: util.createShortcut,
    util
  }
</script>
```

--------------------------------

### Importing System Module in JavaScript

Source: https://iot.mi.com/vela/quickapp/zh/guide/framework/script

Demonstrates how to import system modules like 'fetch' using ES6 import syntax. This is crucial for accessing framework functionalities. Ensure the imported module exists and is accessible within the project scope.

```javascript
import fetch from '@system.fetch'
```

--------------------------------

### Picker Component Example (Vue.js)

Source: https://iot.mi.com/vela/quickapp/zh/components/form/picker

This example demonstrates the usage of the Picker component for both text selection and time selection. It includes the template, script, and style sections for a complete implementation. The `change` event is handled to update the displayed values.

```vue
<template>
  <div class="page">
    <text class="title">普通picker</text>
    <picker 
      class="picker" 
      type="text" 
      range="{{pickerList}}" 
      selected="1" 
      onchange="onPickerChange">
    </picker>
    <text class="value">选择的值：{{v1}}</text>

    <text class="title">时间picker</text>
    <picker 
      class="picker" 
      type="time"
      selected="12:00" 
      onchange="onTimePickerChange">
    </picker>
    <text class="value">选择的值：{{v2}}</text>
  </div>
</template>

<script>
  export default {
    private: {
      pickerList: ['apple', 'peach', 'pear', 'banana'],
      v1: 'peach',
      v2: '12:00'
    },
    onPickerChange(e) {
      this.v1 = e.newValue;
    },
    onTimePickerChange(e) {
      this.v2 = e.hour + ':' + e.minute;
    }
  }
</script>

<style>
  .page {
    flex-direction: column;
    padding: 30px;
    background-color: #ffffff;
  }

  .title {
    font-weight: bold;
    color: #000;
  }

  .value {
    margin-top: 5px;
    margin-bottom: 30px;
    color: #090;
  }

  .picker {
    font-size: 25px;
    color: #000;
    selected-font-size: 30px;
    selected-color: #09f;
    selected-background-color: #ccc;
  }
</style>

```

--------------------------------

### Multi-line Text Overflow Example (CSS)

Source: https://iot.mi.com/vela/quickapp/zh/components/basic/text

Illustrates how to configure multi-line text overflow with an example for two lines. This CSS sets a specific width and uses 'lines' and 'text-overflow: ellipsis' to manage overflow.

```css
text {
  width: 100px;
  lines: 2;
  text-overflow: ellipsis;
}
```

--------------------------------

### APP 生命周期回调 - JavaScript

Source: https://iot.mi.com/vela/quickapp/zh/guide/framework/script/lifecycle

APP 生命周期提供了 `onCreate`, `onShow`, `onHide`, `onDestroy`, `onError` 等回调函数，用于管理 APP 的全局生命周期。此外，还展示了如何暴露全局方法和数据。

```javascript
export default {
  // 监听应用创建,应用创建时调用
  onCreate() { 
    console.info('Application onCreate')
  },
  // 监听应用返回前台,应用返回前台时调用
  onShow() { 
    console.info('Application onShow')
  },
  // 监听应用退到后台,应用退到后台时调用
  onHide() { 
    console.info('Application onHide')
  },
  // 监听应用销毁,应用销毁时调用
  onDestroy() { 
    console.info('Application onDesteroy')
  },
  // 监听应用报错,应用捕获异常时调用,参数为Error对象。
  onError(e) {
    console.log('Application onError', e)
  },
  // 暴露给所有页面，在页面中通过：this.$app.$def.method1()访问
  method1() {
    console.info('这是APP的方法')
  },
  // 暴露给所有页面，在页面中通过：this.$app.$def.data1访问
  data1: {
    name: '这是APP存的数据'
  }
}
```

--------------------------------

### Avoid setTimeout for Navigation Delays (JavaScript)

Source: https://iot.mi.com/vela/quickapp/zh/guide/best-practice/start

Demonstrates replacing setTimeout-based navigation with direct routing or Promise-based asynchronous handling to reduce startup latency. Avoids blocking navigation with unnecessary delays.

```javascript
// ❌不推荐写法
onInit(){
  this.checkifHome()
  setTimeout(() => {
    if(!this.ifHome){
      router.push({uri:'pages/home'})
    }
  },1000)
}
checkifHome(){
  const that = this 
  storage.get({
    key: 'ifHome',
    success: function(data) {
      that.ifHome = data
    },
    fail: function(data, code) {
      console.log(`handling fail, code = ${code}`)
    }
  })
}

```

```javascript
// ✅推荐写法一
onInit(){
  storage.get({
    key: 'ifHome',
    success: function(data) {
      if(!data){
        router.push({uri:'pages/home'})
      }
    },
    fail: function(data, code) {
      console.log(`handling fail, code = ${code}`)
    }
  })
}

```

```javascript
// ✅推荐写法二
async onInit(){
  const ifHome = await checkifHome()
  if(!ifHome){
    router.push({uri:'pages/home'})
  }
}
checkifHome(){
  return new Promise((resolve, reject) => {
    storage.get({
      key: 'ifHome',
      success: function(data) {
        resolve(data) 
      },
      fail: function(data, code) {
        console.log(`handling fail, code = ${code}`)
        reject(code)
      }
    })
  })
}

```

--------------------------------

### Get Screen Brightness Mode in JavaScript

Source: https://iot.mi.com/vela/quickapp/zh/features/system/brightness

Demonstrates how to get the current screen brightness mode (manual or automatic) using `brightness.getMode()`. The success callback receives a `mode` parameter where 0 indicates manual and 1 indicates automatic.

```javascript
brightness.getMode({
  success: function(data) {
    console.log(`handling success, mode = ${data.mode}`)
  },
  fail: function(data, code) {
    console.log(`handling fail, code = ${code}`)
  }
})
```

--------------------------------

### Progress Component Example (Vue)

Source: https://iot.mi.com/vela/quickapp/zh/components/basic/progress

Demonstrates the usage of the progress component with horizontal and arc types. Includes examples of setting percent, type, stroke-width, start-angle, and total-angle. The horizontal progress bar has a default bottom margin of 10px, while the arc progress bar also has a 10px bottom margin and specific angle configurations.

```vue
<template>
  <div style="flex-direction: column">
    <progress class="p1" percent="40"></progress> 
    <progress class="p2" percent="80" type="arc"></progress>
  </div>
</template>
<style>
  .p1 {
    margin-bottom: 10px;
    stroke-width: 12px;
  }

  .p2 {
    margin-bottom: 10px;
    stroke-width: 12px;
    start-angle: 0;
    total-angle: 360deg;
  }
</style>
```

--------------------------------

### 导入网络模块

Source: https://iot.mi.com/vela/quickapp/zh/features/grammar

在 JavaScript 代码中导入 'system.network' 模块以供使用。支持使用 ES6 import 语法或 CommonJS require 语法。

```javascript
import network from '@system.network'
```

```javascript
const network = require('@system.network')
```

--------------------------------

### Slider Component Usage Example

Source: https://iot.mi.com/vela/quickapp/zh/components/form/slider

This example demonstrates how to integrate and use the Slider component within a Vue.js template. It includes setting initial values, handling the change event, and displaying the selected value. The component supports common attributes like min, max, step, and value, and custom styling for the slider track and block.

```html
<template>
  <div class="page">
    <text class="title">slider 组件</text>
    <slider class="slider" min="0" max="100" step="10" value="{{ initialSliderValue }}" onchange="onSliderChange"></slider>
    <text>slider的值：{{ sliderValue }}</text>
  </div>
</template>
```

```javascript
<script>
  export default {
    private: {
      initialSliderValue: 10,
      sliderValue: null
    },
    onSliderChange (e) {
      this.sliderValue = e.progress
    }
  }
</script>
```

```css
<style>
  .page {
    flex-direction: column;
    padding: 30px;
    background-color: #ffffff;
  }

  .title {
    font-weight: bold;
  }

  .slider {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 0;
    padding-right: 0;
  }
</style>
```

--------------------------------

### UX 页面模板、样式和脚本示例

Source: https://iot.mi.com/vela/quickapp/zh/guide/framework/ux

这是一个典型的 .ux 文件示例，展示了如何定义页面的模板结构、样式以及脚本逻辑，包括数据绑定和页面路由跳转。

```html
<template>
  <!-- template里只能有一个根节点 -->
  <div class="page">
    <text class="title">欢迎打开{{title}}</text>
    <!-- 点击跳转详情页 -->
    <input class="btn" type="button" value="跳转到详情页" onclick="routeDetail">
  </div>
</template>

<style>
  .page {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .title {
    font-size: 30px;
    text-align: center;
  }

  .btn {
    width: 400px;
    height: 60px;
    margin-top: 75px;
    border-radius: 43px;
    background-color: #09ba07;
    font-size: 30px;
    color: #ffffff;
  }
</style>

<script>
  import router from '@system.router'

  export default {
    // 页面级组件的数据模型，影响传入数据的覆盖机制：private内定义的属性不允许被覆盖
    private: {
      title: '示例页面'
    },
    routeDetail () {
      // 跳转到应用内的某个页面，router用法详见：文档->接口->页面路由
      router.push ({
        uri: '/DemoDetail'
      })
    }
  }
</script>
```

--------------------------------

### UX Template Structure (Single File)

Source: https://iot.mi.com/vela/quickapp/zh/guide/framework/project-structure

Demonstrates a single .ux file containing template, style, and script sections for defining a page's structure, appearance, and logic.

```html
<template>
  <div class="page">
    <text class="title">欢迎打开{{title}}</text>
    <input class="btn" type="button" value="跳转到详情页" onclick="routeDetail">
  </div>
</template>

<style>
  .btn {
    width: 400px;
    height: 60px;
    background-color: #09ba07;
    color: #ffffff;
  }
</style>

<script>
  import router from '@system.router'

  export default {
    // 页面数据对象
    private: {
      title: '示例页面'
    },
    // 按钮点击后的回调
    routeDetail() {
      router.push({
        uri: '/pages/detail'
      })
    }
  }
</script>

```

--------------------------------

### Get Interconnect Instance

Source: https://iot.mi.com/vela/quickapp/zh/features/network/interconnect

Retrieves the singleton instance of the interconnect connection object.

```APIDOC
## Get Interconnect Instance

### Description
Obtain the singleton connection object for the interconnect module. All subsequent data transmission operations will be performed using this object.

### Method
`interconnect.instance()`

### Endpoint
N/A (Module method)

### Parameters
None

### Response
Returns the interconnect connection instance object (`connect`).

### Request Example
```javascript
const connect = interconnect.instance();
```
```

--------------------------------

### Applying Component Styles with Inline and Class Attributes

Source: https://iot.mi.com/vela/quickapp/zh/guide/framework/style

Illustrates how to control component appearance using inline styles directly on elements and by applying CSS classes defined elsewhere. Inline styles offer direct control, while classes promote reusability and maintainability.

```html
<!-- 内联inline -->
<div style="color:red; margin: 10px;"/>
<!-- class声明 -->
<div class="normal append"/>
```

--------------------------------

### Get App Connection State

Source: https://iot.mi.com/vela/quickapp/zh/features/network/interconnect

Checks the current connection state of the application with the paired mobile app.

```APIDOC
## Get App Connection State

### Description
Retrieves the current connection status between the watch app and the paired mobile app.

### Method
`connect.getReadyState(OBJECT)`

### Endpoint
N/A (Method of the interconnect instance)

### Parameters
#### Request Body
- **success** (Function) - Optional - Callback function executed upon successful retrieval of the connection state.
- **fail** (Function) - Optional - Callback function executed if there's an error retrieving the connection state.

### Response
#### Success Response (200)
- **status** (Number) - The connection status. `1` indicates connected, `2` indicates disconnected.

#### Fail Response
- **data** (String) - Error message.
- **code** (Number) - Error code.

### Error Codes
- `1006`: Connection disconnected.
(Supports general error codes)

### Request Example
```javascript
connect.getReadyState({
  success: (data) => {
    if (data.status === 1) {
      console.log('Connection successful');
    } else if (data.status === 2) {
      console.log('Connection failed');
    }
  },
  fail: (data, code) => {
    console.log(`Handling fail, code = ${code}`);
  }
});
```
```

--------------------------------

### Complete JavaScript for Vela Quick App with Data Fetching and Rendering

Source: https://iot.mi.com/vela/quickapp/zh/guide/start/data-fetch

This is the complete JavaScript code for a Vela Quick App page that fetches real-time weather data and renders it. It includes the necessary imports, initial data properties, the `onReady` lifecycle method for data fetching, and a method to navigate to another page. The `weather` data property is updated with the fetched data, which drives the UI.

```javascript
<script>
  import router from '@system.router';
  import fetch from '@system.fetch';

  export default {
    private: {
      city: '武汉市',
      province: '湖北省',
      country: '中国',
      weather: {
        obsTime: "12-21 09:05",
        temp: "13",
        feelsLike: "10",
        icon: "101",
        text: "多云",
        humidity: "72",
        vis: "16"
      }
    },

    onReady() {
      let key = '<你的key>';
      // location，这里使用的是武汉的code
      // 更多的location code可以查看：https://github.com/qwd/LocationList
      fetch.fetch({
        url: `https://devapi.qweather.com/v7/weather/now?location=101200101&key=${key}`
      }).then(res => {
        const result = res.data;
        console.log('返回的数据:', JSON.stringify(result.data, null, 2));
        this.weather = result.data.now;
      }).catch(error => {
        console.log(`数据请求失败:`, error);
      })
    },

    toListPage(eve) {
      console.log(eve);
      if (eve.direction === 'up') {
        router.push({
          uri: '/pages/list'
        })
      }
    }
  }
</script>
```

--------------------------------

### Configure Minimum API Level (JSON)

Source: https://iot.mi.com/vela/quickapp/zh/guide/framework/manifest

Specifies the minimum API standard version the rpk package can be compatible with. This ensures the application runs correctly on devices meeting this standard, preventing runtime errors due to API incompatibilities. It defaults to 1 if not specified.

```json
{
  "minAPILevel": 1
}
```

--------------------------------

### Get Screen Brightness

Source: https://iot.mi.com/vela/quickapp/zh/features/system/brightness

Retrieves the current screen brightness value.

```APIDOC
## GET /system/brightness/value

### Description
Retrieves the current screen brightness value.

### Method
GET

### Endpoint
/system/brightness/value

### Parameters
#### Query Parameters
- **success** (Function) - Optional - Success callback function.
- **fail** (Function) - Optional - Failure callback function.
- **complete** (Function) - Optional - Callback function executed after completion.

### Response
#### Success Response (200)
- **value** (Integer) - The screen brightness, ranging from 0 to 255.

#### Response Example
```json
{
  "value": 150
}
```
```

--------------------------------

### Stop Vibration by ID (JavaScript)

Source: https://iot.mi.com/vela/quickapp/zh/features/system/vibrator

Provides an example of how to stop an ongoing vibration task using its unique ID.

```javascript
vibrator.stop(1)
```
Tokens:
Raw