uni-app

https://uniapp.dcloud.net.cn
Admin
A framework that enables developers to write a single codebase using Vue.js and deploy it to...
Tokens:2,536,469
Snippets:13,258
Trust Score:8.1
Update:1 day ago
Show doc for...
Tokens:
Raw
### element.touchstart and element.touchend example

Source: https://uniapp.dcloud.net.cn/worktile/auto/api.html

Simulates touch start and touch end events on an element. The example selects an element with class 'touch' and passes touches and changedTouches arrays with identifier and coordinates.

```javascript
  const page = await program.currentPage()
  const element = await page.$('.touch')
  await element.touchstart({
    touches: [
      {
        identifier: 1,
        pageX: 500,
        pageY: 500
      }
    ],
    changedTouches: [
      {
        identifier: 1,
        pageX: 500,
        pageY: 500
      }
    ]
  })
  await element.touchend({
    touches: [],
    changedTouches: [
      {
        identifier: 1,
        pageX: 500,
        pageY: 500
      }
    ]
  })
```

```javascript
const page = await program.currentPage()
  const element = await page.$('.touch')
  await element.touchstart({
    touches: [
      {
        identifier: 1,
        pageX: 500,
        pageY: 500
      }
    ],
    changedTouches: [
      {
        identifier: 1,
        pageX: 500,
        pageY: 500
      }
    ]
  })
  await element.touchend({
    touches: [],
    changedTouches: [
      {
        identifier: 1,
        pageX: 500,
        pageY: 500
      }
    ]
  })
```

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

### uni.getSetting example

Source: https://uniapp.dcloud.net.cn/api/other/setting

Calls uni.getSetting and logs the authSetting object in the success callback. The withSubscriptions parameter is optional and defaults to false.

```JavaScript
uni.getSetting({
   success(res) {
      console.log(res.authSetting)
   }
})
```

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

### Java: Call startActivity to make a phone call

Source: https://uniapp.dcloud.net.cn/tutorial/native-js.html

Java example showing how to get the main Activity instance and use it to start an Intent for dialing a phone number.

```java
import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
//...
// 获取主Activity对象的实例
Activity main = context;
// 创建Intent
Uri uri = Uri.parse("tel:10086");
Intent call = new Intent("android.intent.action.CALL",uri);
// 调用startActivity方法拨打电话
main.startActivity(call);
//...
```

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

### livePusherContext.startPreview(OBJECT)

Source: https://uniapp.dcloud.net.cn/api/media/live-player-context

Starts the camera preview. Accepts an optional OBJECT with success, fail, and complete callbacks.

```APIDOC
## livePusherContext.startPreview(OBJECT)

### Description
开启摄像头预览

### Parameters
#### OBJECT
- **success** (Function) - Optional - 接口调用成功的回调函数
- **fail** (Function) - Optional - 接口调用失败的回调函数
- **complete** (Function) - Optional - 接口调用结束的回调函数（调用成功、失败都会执行）
```

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

### uni.startCompass example

Source: https://uniapp.dcloud.net.cn/api/system/compass

Starts listening to compass data. No parameters are required in this example.

```javascript
uni.startCompass();
```

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

### element.text - Get element text

Source: https://uniapp.dcloud.net.cn/worktile/auto/api.html

Use element.text to get the text content of an element. The example shows getting the text of an element and logging it.

```javascript
  const page = await program.currentPage()
  const element = await page.$('.index-desc')
  console.log(await element.text())
```

```javascript
const page = await program.currentPage()
  const element = await page.$('.index-desc')
  console.log(await element.text())
```

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

### uni.openSetting example

Source: https://uniapp.dcloud.net.cn/api/other/setting

Calls uni.openSetting to open the settings interface and logs the authSetting object in the success callback.

```javascript
uni.openSetting({
  success(res) {
    console.log(res.authSetting)
  }
});
```

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

### recorderManager.start(options)

Source: https://uniapp.dcloud.net.cn/api/media/record-manager.html

开始录音。

```APIDOC
## recorderManager.start(options)

### Description
开始录音。

### Method
CALL

### Endpoint
recorderManager.start(options)

### Parameters
#### Request Body
- **options** (object) - Required - 录音参数，具体字段未在文档中说明。

### Response
None

### Platform Differences
无平台差异说明。
```

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

### Usage Example

Source: https://uniapp.dcloud.net.cn/plugin/uts-component-compatible.html

Example of using the uts-animation-view component in a uni-app page, including template and script setup.

```APIDOC
## Usage Example

### Description
Example of using the `uts-animation-view` component in a uni-app page, demonstrating how to bind properties and handle events.

### Template
```html
<template>
    <div>
        <button @tap="changeUrl">播放本地动画资源</button>
        <button @tap="changeServerUrl">播放远程动画资源</button>
        <button @tap="changeAutoPlay">测试AutoPlay</button>
        <button @tap="changeLoop">测试Loop</button>
        <button @tap="changeAction(1)">测试action play</button>
        <button @tap="changeAction(2)">测试action pause</button>
        <button @tap="changeAction(3)">测试action stop</button>
        <uts-animation-view ref="animView" :path="animUrl" :autoplay="autoplay" :loop="loop" :action="action"
            :hidden="hidden" @bindended="testAnimEnd" @click="lottieClickTest" @longpress="lottieLongpressTest"
            :style="{width:widthNum+'rpx',height:heightNum+'px',background:yanse}">
        </uts-animation-view>
    </div>
</template>
```

### Script
```javascript
<script>
    export default {
        data() {
            return {
                hidden: false,
                autoplay: false,
                action: "play",
                loop: false,
                yanse: "red",
                widthNum: 750,
                heightNum: 200,
                comShow: true,
                animUrl: "/static/anim_a.json"
            }
        },
        methods: {
            changeAutoPlay: function() {
                this.autoplay = !this.autoplay
            },
            changeUrl: function() {
                if (this.animUrl == "/static/anim_a.json") {
                    this.animUrl = "/static/anim_b.json"
                } else {
                    this.animUrl = "/static/anim_a.json"
                }
            },
            changeServerUrl: function() {
                this.animUrl = "https://b.bdstatic.com/miniapp/images/lottie_example_one.json"
            },
            changeAction: function(type) {
                if (type == 1) {
                    this.action = "play"
                } else if (type == 2) {
                    this.action = "pause"
                } else if (type == 3) {
                    this.action = "stop"
                }
            },
            changeLoop: function() {
                this.loop = !this.loop
            },
            testAnimEnd: function(res) {
                console.log("testAnimEnd");
            },
            changeRepeat: function(res) {
                let repeatConfig = {
                    count: 3,
                    mode: "restart"
                }
                this.$refs["animView"].updateRepeatConfig(repeatConfig, function(res) {
                    console.log(res);
                });
            },
            lottieClickTest: function(res) {
                console.log("lottieClickTest");
                console.log(res);
            },
            lottieLongpressTest: function(res) {
                console.log("lottieClickTest");
                console.log(res);
            },
        }
    }
</script>
```

```

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

### start(options)

Source: https://uniapp.dcloud.net.cn/api/media/record-manager

Starts audio recording with the specified options. The method accepts an options object with various parameters to control recording duration, sample rate, channels, bitrate, format, and more. Platform-specific limitations are noted for each parameter.

```APIDOC
## start(options)

### Description
Starts audio recording with the specified options. The method accepts an options object with various parameters to control recording duration, sample rate, channels, bitrate, format, and more. Platform-specific limitations are noted for each parameter.

### Method
start

### Parameters
#### Options
- **duration** (Number) - Optional - Specifies the recording duration in milliseconds. If a valid duration is provided, recording will automatically stop after the specified duration. Maximum value is 600000 (10 minutes), default is 60000 (1 minute). Supported on App and Mini Programs.
- **sampleRate** (Number) - Optional - Sample rate. Valid values: 8000/16000/44100. Supported on App and Mini Programs, with platform limitations as noted below.
- **numberOfChannels** (Number) - Optional - Number of recording channels. Valid values: 1/2. Only supported on Mini Programs.
- **encodeBitRate** (Number) - Optional - Encoding bitrate. Valid values are listed in the table below. Only supported on Mini Programs.
- **format** (String) - Optional - Audio format. Valid values: aac/mp3/wav/PCM. Default is mp3 on App and aac on Mini Programs. Supported on App and Mini Programs.
- **frameSize** (String) - Optional - Specifies the frame size in KB. When frameSize is provided, the recorded file content will be called back after each frame of the specified size is recorded. If not specified, no callback will occur. Currently only supports mp3 format. Not supported on App and Baidu Mini Programs.
- **hideTips** (Boolean) - Optional - Hide the recording icon. Supported on Alipay Mini Program 10.1.85+.
- **audioSource** (String) - Optional - Specifies the audio input source for recording. Supported on WeChat Mini Program, Alipay Mini Program, Baidu Mini Program, and Kuaishou Mini Program. See platform documentation for details.
- **detectDecibel** (Boolean) - Optional - Detect sound decibel level. Supported on Alipay Mini Program 10.2.0+. See platform documentation for details.

### Encoding Format, Sample Rate, and Bitrate Relationship

#### Android, iOS, WeChat Mini Program Platforms
| Sample Rate | Encoding Bitrate |
| --- | --- |
| 8000 | 16000 - 48000 |
| 11025 | 16000 - 48000 |
| 12000 | 24000 - 64000 |
| 16000 | 24000 - 96000 |
| 22050 | 32000 - 128000 |
| 24000 | 32000 - 128000 |
| 32000 | 48000 - 192000 |
| 44100 | 64000 - 320000 |
| 48000 | 64000 - 320000 |

#### HarmonyOS Platform
For HarmonyOS, the available container formats and sample rates can be referenced in the [HarmonyOS Audio Parameter Configuration Table](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-media-i#%E9%9F%B3%E9%A2%91%E5%8F%82%E6%95%B0%E9%85%8D%E7%BD%AE%E5%AF%B9%E7%85%A7%E8%A1%A8?ha_source=Dcloud&ha_sourceId=89000448).

Common encoding format, sample rate, and bitrate limitations are as follows:
- aac encoding format supports bitrate range [32000 - 500000]
- mp encoding format supports bitrate range [8000, 16000, 32000, 40000, 48000, 56000, 64000, 80000, 96000, 112000, 128000, 160000, 192000, 224000, 256000, 320000]
  - When sample rate is below 16K, corresponding bitrate range is [8000 - 64000]
  - When sample rate is 16K~32K, corresponding bitrate range is [8000 - 160000]
  - When sample rate is above 32K, corresponding bitrate range is [32000 - 320000]
- wav encoding format uses fixed sample rate 8000, bitrate 64000, and 1 channel.
```

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

### element.attribute - Get element attribute

Source: https://uniapp.dcloud.net.cn/worktile/auto/api.html

Use element.attribute to get the value of an attribute on the element. The example shows getting the 'src' attribute of an element with class 'logo'.

```javascript
  const page = await program.currentPage()
  const element = await page.$('.logo')
  console.log(await element.attribute('src')) // -> 'static/logo.png'
```

```javascript
const page = await program.currentPage()
  const element = await page.$('.logo')
  console.log(await element.attribute('src')) // -> 'static/logo.png'
```

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

### uni.shareWithSystem example

Source: https://uniapp.dcloud.net.cn/api/plugins/share

Example of calling uni.shareWithSystem with summary and href parameters. Note that the success callback does not guarantee a successful share, and the fail callback handles share failures.

```javascript
uni.shareWithSystem({
  summary: '',
  href: 'https://uniapp.dcloud.io',
  success(){
    // 分享完成，请注意此时不一定是成功分享
  },
  fail(){
    // 分享失败
  }
})
```

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

### element.size - Get element size

Source: https://uniapp.dcloud.net.cn/worktile/auto/api.html

Use element.size to get the width and height of an element. The example shows destructuring the returned object to get width and height.

```javascript
  const page = await program.currentPage()
  const element = await page.$('.index-bd')
  const { width, height } = await element.size()
  console.log(width, height)
```

```javascript
const page = await program.currentPage()
  const element = await page.$('.index-bd')
  const { width, height } = await element.size()
  console.log(width, height)
```

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

### uni.getLocation example

Source: https://uniapp.dcloud.net.cn/api/location/location

Example of using uni.getLocation to get the current position with type 'wgs84'. The success callback logs the longitude and latitude.

```javascript
uni.getLocation({
	type: 'wgs84',
	success: function (res) {
		console.log('当前位置的经度：' + res.longitude);
		console.log('当前位置的纬度：' + res.latitude);
	}
});
```

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

### uni.chooseMedia Example

Source: https://uniapp.dcloud.net.cn/api/media/video

Example usage of uni.chooseMedia to select images and videos from album or camera, with a success callback that logs the tempFiles.

```javascript
uni.chooseMedia({
  count: 9,
  mediaType: ['image','video'],
  sourceType: ['album', 'camera'],
  maxDuration: 30,
  camera: 'back',
  success(res) {
    console.log(res.tempFiles)
  }
})
```

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

### getTemplateList Request Data Example

Source: https://uniapp.dcloud.net.cn/api/other/template

Example JSON body for the getTemplateList request. The offset starts at 0 and count is limited to 20.

```text
{
  "offset": 0,
  "count": 1
}
```

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

### Download and open a PDF file using uni.downloadFile and uni.openDocument

Source: https://uniapp.dcloud.net.cn/api/file/file

Example showing how to download a file and then open it with uni.openDocument. The filePath is obtained from the downloadFile success callback. The showMenu option is set to true to enable sharing on supported platforms.

```javascript
uni.downloadFile({
  url: 'https://example.com/somefile.pdf',
  success: function (res) {
    var filePath = res.tempFilePath;
    uni.openDocument({
      filePath: filePath,
      showMenu: true,
      success: function (res) {
        console.log('打开文档成功');
      }
    });
  }
});
```

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

### element.touchstart

Source: https://uniapp.dcloud.net.cn/worktile/auto/api.html

Simulates a touch start event on the element. Accepts an options object with touch information.

```APIDOC
## element.touchstart

### Description
Simulates a touch start event on the element.

### Method
`element.touchstart(options: Object): Promise<void>`

### Parameters
- **options** (Object) - Required - Touch event options.
  - **touches** (array) - Required - Array of touch points currently on the screen.
  - **changedTouches** (array) - Required - Array of touch points that have changed.

### Returns
- **Promise<void>** - Resolves when the touch start is complete.

### Example
```js
const page = await program.currentPage()
const element = await page.$('.touch')
await element.touchstart({
  touches: [
    {
      identifier: 1,
      pageX: 500,
      pageY: 500
    }
  ],
  changedTouches: [
    {
      identifier: 1,
      pageX: 500,
      pageY: 500
    }
  ]
})
```
```

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

### uni.getNetworkType example

Source: https://uniapp.dcloud.net.cn/api/system/network.html

Example usage of uni.getNetworkType to get the network type and log it. Note: This API is synchronous on mini-program platforms and asynchronous on other platforms.

```javascript
uni.getNetworkType({
	success: function (res) {
		console.log(res.networkType);
	}
});
```

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

### element.input example

Source: https://uniapp.dcloud.net.cn/worktile/auto/api.html

Inputs text into an input or textarea component. The example gets the current page, selects an input element, and calls element.input('test').

```JavaScript
  const page = await program.currentPage()
  const element = await page.$('input')
  await element.input('test')
```

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

### navigateTo 兼容性 - Event Channel Example

Source: https://uniapp.dcloud.net.cn/api/router

Example of using the event channel in a Vue 3 setup script to emit and listen for events between pages.

```APIDOC
## navigateTo 兼容性 - Event Channel Example

### Description
This example demonstrates how to use the event channel in a Vue 3 setup script to communicate between pages. It shows emitting events to the opener page and listening for events from the opener page.

### Method
N/A (This is a code example for event channel usage)

### Endpoint
N/A

### Parameters
N/A

### Request Example
```js
<script setup>
  import {
    onMounted,
    getCurrentInstance
  } from 'vue';

  onMounted(() => {
    const instance = getCurrentInstance().proxy
    const eventChannel = instance.getOpenerEventChannel();

    eventChannel.emit('acceptDataFromOpenedPage', {
      data: 'data from test page'
    });

    eventChannel.emit('someEvent', {
      data: 'data from test page for someEvent'
    });

    // 在 onUnmounted 取消监听
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log('acceptDataFromOpenerPage', data)
    })
  })
</script>
```

### Response
N/A
```

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

### POST /cgi-bin/wxopen/template/library/list (微信小程序)

Source: https://uniapp.dcloud.net.cn/api/other/template

获取APP模板库标题列表（微信小程序）。需要access_token、offset和count参数。返回模板库标题列表及总数。

```APIDOC
## [POST] /cgi-bin/wxopen/template/library/list

### Description
获取APP模板库标题列表（微信小程序）。

### Method
POST

### Endpoint
https://api.weixin.qq.com/cgi-bin/wxopen/template/library/list?access_token=ACCESS_TOKEN

### Parameters
#### Query Parameters
- **access_token** (string) - Required - 接口调用凭证

#### Request Body
- **offset** (number) - Required - 用于分页，表示从offset开始。从 0 开始计数。
- **count** (number) - Required - 用于分页，表示拉取count条记录。最大为 20。

### Request Example
{
  "offset": 0,
  "count": 5
}

### Response
#### Success Response (200)
- **errcode** (number) - 错误码
- **errmsg** (string) - 错误信息
- **list** (Array.<Object>) - 返回模板库标题列表
- **total_count** (number) - 模板库标题总数

#### Response Example
{
    "errcode": 0,
    "errmsg": "ok",
    "list": [
        {"id": "AT0002", "title": "购买成功通知"},
        {"id": "AT0003", "title": "交易提醒"}
    ],
    "total_count": 100
}
```

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

### start(options)

Source: https://uniapp.dcloud.net.cn/api/media/record-manager

Starts recording with the given options. This method is part of the recorderManager object returned by uni.getRecorderManager().

```APIDOC
## start(options)

### Description
Starts recording with the given options.

### Method
CALL

### Endpoint
recorderManager.start(options)

### Parameters
#### options (Object) - Required
- No specific fields are documented in the source.
```

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

### CanvasContext.quadraticCurveTo example

Source: https://uniapp.dcloud.net.cn/api/canvas/CanvasContext

Creates a canvas context, draws points and guides, then draws a quadratic Bezier curve using quadraticCurveTo. The example is shown twice in the source.

```javascript
const ctx = uni.createCanvasContext('myCanvas')

// Draw points
ctx.beginPath()
ctx.arc(20, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()

ctx.beginPath()
ctx.arc(200, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('lightgreen')
ctx.fill()

ctx.beginPath()
ctx.arc(20, 100, 2, 0, 2 * Math.PI)
ctx.setFillStyle('blue')
ctx.fill()

ctx.setFillStyle('black')
ctx.setFontSize(12)

// Draw guides
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.lineTo(20, 100)
ctx.lineTo(200, 20)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()

// Draw quadratic curve
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.quadraticCurveTo(20, 100, 200, 20)
ctx.setStrokeStyle('black')
ctx.stroke()

ctx.draw()
```

```javascript
const ctx = uni.createCanvasContext('myCanvas')

// Draw points
ctx.beginPath()
ctx.arc(20, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()

ctx.beginPath()
ctx.arc(200, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('lightgreen')
ctx.fill()

ctx.beginPath()
ctx.arc(20, 100, 2, 0, 2 * Math.PI)
ctx.setFillStyle('blue')
ctx.fill()

ctx.setFillStyle('black')
ctx.setFontSize(12)

// Draw guides
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.lineTo(20, 100)
ctx.lineTo(200, 20)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()

// Draw quadratic curve
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.quadraticCurveTo(20, 100, 200, 20)
ctx.setStrokeStyle('black')
ctx.stroke()

ctx.draw()
```

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

### CanvasContext.bezierCurveTo example

Source: https://uniapp.dcloud.net.cn/api/canvas/CanvasContext

Creates a canvas context and draws a cubic Bezier curve with control points. The example draws points, guides, and the curve, then calls ctx.draw().

```javascript
const ctx = uni.createCanvasContext('myCanvas')

// Draw points
ctx.beginPath()
ctx.arc(20, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()

ctx.beginPath()
ctx.arc(200, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('lightgreen')
ctx.fill()

ctx.beginPath()
ctx.arc(20, 100, 2, 0, 2 * Math.PI)
ctx.arc(200, 100, 2, 0, 2 * Math.PI)
ctx.setFillStyle('blue')
ctx.fill()

ctx.setFillStyle('black')
ctx.setFontSize(12)

// Draw guides
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.lineTo(20, 100)
ctx.lineTo(150, 75)

ctx.moveTo(200, 20)
ctx.lineTo(200, 100)
ctx.lineTo(70, 75)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()

// Draw quadratic curve
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20)
ctx.setStrokeStyle('black')
ctx.stroke()

ctx.draw()
```
Tokens:
Raw