- 端能力API
- 数据缓存
- 位置
- 设备
- 系统信息
- 网络状态
- 加速度计
- 罗盘
- 拨打电话
- 扫码
- 剪贴板
- 蓝牙
- Taro.openBluetoothAdapter(OBJECT)
- Taro.closeBluetoothAdapter(OBJECT)
- Taro.getBluetoothAdapterState(OBJECT)
- Taro.onBluetoothAdapterStateChange(CALLBACK)
- Taro.startBluetoothDevicesDiscovery(OBJECT)
- Taro.stopBluetoothDevicesDiscovery(OBJECT)
- Taro.getBluetoothDevices(OBJECT)
- Taro.getConnectedBluetoothDevices(OBJECT)
- Taro.onBluetoothDeviceFound(CALLBACK)
- Taro.createBLEConnection(OBJECT)
- Taro.closeBLEConnection(OBJECT)
- Taro.getBLEDeviceServices(OBJECT)
- Taro.getBLEDeviceCharacteristics(OBJECT)
- Taro.readBLECharacteristicValue(OBJECT)
- Taro.writeBLECharacteristicValue(OBJECT)
- Taro.notifyBLECharacteristicValueChange(OBJECT)
- Taro.onBLEConnectionStateChange(CALLBACK)
- Taro.onBLECharacteristicValueChange(CALLBACK)
- iBeacon
- 屏幕亮度
- 用户截屏事件
- 振动
- 手机联系人
- NFC
- Wi-Fi
- 界面
端能力API
由于不同的端自身会提供不同的端能力API,例如微信小程序中提供了网络请求、本地存储等等端能力的封装,目前在所有端中,微信小程序所提供的端能力API最为丰富,所以 Taro 在设计之初端能力的 API 便是采用微信小程序标准,在其他端各自对应实现,同时又对微信小程序的 API 进行了一些优化处理,例如异步的 API 支持 Promise
化,利用队列解决了 wx.request
的请求个数限制问题等等。
因为采用微信小程序标准的缘故,Taro 项目在编译到微信小程序端 API 都是可以正常运行的,如果编译到其他端,则要视当前端的能力支持而定,例如H5端就无法调用扫码、蓝牙等端能力,所以这些 API 在H5端运行的时候将什么也不做。
网络
发起请求
Taro.request(OBJECT)
发起网络请求,支持 Promise
化使用。
OBJECT 参数说明:
参数 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
url | String | 是 | 开发者服务器接口地址 | |
data | Object/String/ArrayBuffer | 否 | 请求的参数 | |
header | Object | 否 | 设置请求的 header,header 中不能设置 Referer。 | |
method | String | 否 | GET | (需大写)有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT |
dataType | String | 否 | json | 如果设为json,会尝试对返回的数据做一次 JSON.parse |
responseType | String | 否 | text | 设置响应的数据类型。合法值:text、arraybuffer |
success | Function | 否 | 接口调用成功的回调函数 | |
fail | Function | 否 | 接口调用失败的回调函数 | |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
H5 端附加参数说明:
参数 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
jsonp | String/Boolean | 否 | 使用 jsonp,且使用此值作为回调函数名 | |
jsonpCache | Boolean | 否 | false | jsonp 请求 url 是否需要被缓存 |
mode | String | 否 | same-origin | 是否允许跨域请求。有效值:no-cors, cors, same-origin |
credentials | String | 否 | omit | 是否携带 Cookie。有效值:include, same-origin, omit |
cache | String | 否 | default | 缓存模式。有效值:default, no-cache, reload, force-cache, only-if-cached |
success 返回参数说明:
参数 | 类型 | 说明 |
---|---|---|
data | Object/String/ArrayBuffer | 开发者服务器返回的数据 |
statusCode | Number | 开发者服务器返回的 HTTP 状态码 |
header | Object | 开发者服务器返回的 HTTP Response Header |
示例代码:
import Taro from '@tarojs/taro'
Taro.request({
url: 'http://localhost:8080/test',
data: {
foo: 'foo',
bar: 10
},
header: {
'content-type': 'application/json'
}
})
.then(res => console.log(res.data))
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.request | ✔️ | ✔️ | ✔️ |
上传、下载
Taro.uploadFile(OBJECT)
使用方式同 wx.uploadFile
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
const uploadTask = Taro.uploadFile(params).then(...)
Taro.downloadFile(OBJECT)
使用方式同 wx.downloadFile
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.downloadFile(params).then(...)
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.uploadFile | ✔️ | ✔️ | |
Taro.downloadFile | ✔️ | ✔️ |
WebSocket
Taro.connectSocket(OBJECT)
创建一个 WebSocket 链接。
支持存在最多两个 WebSocket 链接,每次成功调用 Taro.connectSocket 会返回一个新的 SocketTask。
OBJECT 参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
url | String | 是 | 开发者服务器接口地址,必须是 wss 协议 |
header | Object | 否 | HTTP Header , header 中不能设置 Referer |
method | String | 否 | 默认是GET,有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT |
protocols | StringArray | 否 | 子协议数组 |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码:
import Taro from '@tarojs/taro'
Taro.connectSocket({
url: 'ws://echo.websocket.org/echo',
success: function () {
console.log('connect success')
}
})
.then(task => {
task.onOpen(function () {
console.log('onOpen')
task.send({ data: 'xxx' })
})
task.onMessage(function (msg) {
console.log('onMessage: ', msg)
task.close()
})
task.onError(function () {
console.log('onError')
})
task.onClose(function (e) {
console.log('onClose: ', e)
})
})
SocketTask
WebSocket 任务,可通过 wx.connectSocket() 接口创建返回。
属性
socketTask.readyState: websocket 当前的连接状态。
socketTask.CONNECTING: websocket 状态值:连接中。
socketTask.OPEN: websocket 状态值:已连接。
socketTask.CLOSING: websocket 状态值:关闭中。
socketTask.CLOSED: websocket 状态值:已关闭。
socketTask.ws: 浏览器 websocket 实例。(h5 端独有)
方法
SocketTask.send(OBJECT)
通过 WebSocket 连接发送数据。
OBJECT 参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
data | String/ArrayBuffer | 是 | 需要发送的内容 |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
SocketTask.close(OBJECT)
关闭 WebSocket 连接。
OBJECT 参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
code | Number | 否 | 一个数字值表示关闭连接的状态号,表示连接被关闭的原因。如果这个参数没有被指定,默认的取值是1000 (表示正常连接关闭) |
reason | String | 否 | 一个可读的字符串,表示连接被关闭的原因 |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
SocketTask.onOpen(CALLBACK)
监听 WebSocket 连接打开事件。
SocketTask.onClose(CALLBACK)
监听 WebSocket 连接关闭事件。
CALLBACK返回参数
参数 | 类型 | 说明 |
---|---|---|
code | Number | 关闭连接的状态号 |
reason | String | 连接被关闭的原因 |
SocketTask.onError(CALLBACK)
监听 WebSocket 错误。
CALLBACK返回参数
参数 | 类型 | 说明 |
---|---|---|
errMsg | String | 错误信息 |
SocketTask.onMessage(CALLBACK)
监听WebSocket接受到服务器的消息事件。
CALLBACK返回参数
参数 | 类型 | 说明 |
---|---|---|
data | String/ArrayBuffer | 服务器返回的消息 |
Taro.onSocketOpen
@Deprecated
请使用 SocketTask.onOpen
Taro.onSocketError
@Deprecated
请使用 SocketTask.onError
Taro.sendSocketMessage
@Deprecated
请使用 SocketTask.send
Taro.onSocketMessage
@Deprecated
请使用 SocketTask.onMessage
Taro.closeSocket
@Deprecated
请使用 SocketTask.close
Taro.onSocketClose
@Deprecated
请使用 SocketTask.onClose
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.connectSocket | ✔️ | ✔️ | ✔️ |
SocketTask | ✔️ | ✔️ | ✔️ |
Taro.onSocketOpen | ✔️ | ||
Taro.onSocketError | ✔️ | ||
Taro.sendSocketMessage | ✔️ | ||
Taro.onSocketMessage | ✔️ | ||
Taro.closeSocket | ✔️ | ||
Taro.onSocketClose | ✔️ |
媒体
图片
Taro.chooseImage(OBJECT)
使用方式同 wx.chooseImage
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.chooseImage(params).then(...)
Taro.previewImage(OBJECT)
使用方式同 wx.previewImage
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.previewImage(params).then(...)
Taro.getImageInfo(OBJECT)
使用方式同 wx.getImageInfo
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.getImageInfo(params).then(...)
Taro.saveImageToPhotosAlbum(OBJECT)
使用方式同 wx.saveImageToPhotosAlbum
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.saveImageToPhotosAlbum(params).then(...)
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.chooseImage | ✔️ | ||
Taro.previewImage | ✔️ | ✔️ | |
Taro.getImageInfo | ✔️ | ✔️ | |
Taro.saveImageToPhotosAlbum | ✔️ | ✔️ |
录音
Taro.startRecord(OBJECT)
使用方式同 wx.startRecord
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.startRecord(params).then(...)
Taro.stopRecord()
主动调用停止录音。
示例代码:
import Taro from '@tarojs/taro'
Taro.stopRecord()
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.startRecord | ✔️ | ||
Taro.stopRecord | ✔️ |
录音管理
Taro.getRecorderManager()
使用方式同 wx.getRecorderManager
。
示例代码:
import Taro from '@tarojs/taro'
const recorderManager = Taro.getRecorderManager()
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.getRecorderManager | ✔️ |
音频播放控制
Taro.playVoice(OBJECT)
使用方式同 wx.playVoice
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.playVoice(params).then(...)
Taro.pauseVoice()
暂停正在播放的语音。再次调用 Taro.playVoice 播放同一个文件时,会从暂停处开始播放。如果想从头开始播放,需要先调用 Taro.stopVoice。
示例代码:
import Taro from '@tarojs/taro'
Taro.startRecord(params)
.then(res => {
const filePath = res.tempFilePath
Taro.playVoice({ filePath })
setTimeout(Taro.pauseVoice, 5000)
})
Taro.stopVoice
结束播放语音。
示例代码:
import Taro from '@tarojs/taro'
Taro.startRecord(params)
.then(res => {
const filePath = res.tempFilePath
Taro.playVoice({ filePath })
setTimeout(Taro.stopVoice, 5000)
})
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.playVoice | ✔️ | ||
Taro.pauseVoice | ✔️ | ||
Taro.stopVoice | ✔️ |
音乐播放控制
Taro.getBackgroundAudioPlayerState(OBJECT)
使用方式同 wx.getBackgroundAudioPlayerState
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.getBackgroundAudioPlayerState(params).then(...)
Taro.playBackgroundAudio(OBJECT)
使用方式同 wx.playBackgroundAudio
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.playBackgroundAudio(params).then(...)
Taro.pauseBackgroundAudio()
暂停播放音乐。
示例代码:
import Taro from '@tarojs/taro'
Taro.pauseBackgroundAudio()
Taro.seekBackgroundAudio(OBJECT)
使用方式同 wx.seekBackgroundAudio
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.seekBackgroundAudio(params).then(...)
Taro.stopBackgroundAudio()
停止播放音乐。
示例代码:
import Taro from '@tarojs/taro'
Taro.stopBackgroundAudio()
Taro.onBackgroundAudioPlay(CALLBACK)
监听音乐播放。
Taro.onBackgroundAudioPause(CALLBACK)
监听音乐暂停。
Taro.onBackgroundAudioStop(CALLBACK)
监听音乐停止。
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.getBackgroundAudioPlayerState | ✔️ | ||
Taro.playBackgroundAudio | ✔️ | ||
Taro.pauseBackgroundAudio | ✔️ | ||
Taro.seekBackgroundAudio | ✔️ | ||
Taro.stopBackgroundAudio | ✔️ | ||
Taro.onBackgroundAudioPlay | ✔️ | ||
Taro.onBackgroundAudioPause | ✔️ | ||
Taro.onBackgroundAudioStop | ✔️ |
背景音频播放管理
Taro.getBackgroundAudioManager()
使用方式同 wx.getBackgroundAudioManager
。
示例代码:
import Taro from '@tarojs/taro'
const backgroundAudioManager = Taro.getBackgroundAudioManager()
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.getBackgroundAudioManager | ✔️ |
音频组件控制
Taro.createAudioContext(audioId, this.$scope)
使用方式同 wx.createAudioContext
。
示例代码:
import Taro from '@tarojs/taro'
const audioCtx = Taro.createAudioContext('myAudio')
Taro.createInnerAudioContext()
使用方式同 wx.createInnerAudioContext
。
示例代码:
import Taro from '@tarojs/taro'
const innerAudioContext = Taro.createInnerAudioContext()
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.createAudioContext | ✔️ | ||
Taro.createInnerAudioContext | ✔️ |
视频
Taro.chooseVideo(OBJECT)
使用方式同 wx.chooseVideo
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.chooseVideo(params).then(...)
Taro.saveVideoToPhotosAlbum(OBJECT)
使用方式同 wx.saveVideoToPhotosAlbum
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.saveVideoToPhotosAlbum(params).then(...)
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.chooseVideo | ✔️ | ||
Taro.saveVideoToPhotosAlbum | ✔️ |
视频组件控制
Taro.createVideoContext(videoId, this.$scope)
使用方式同 wx.createVideoContext
。
示例代码:
import Taro from '@tarojs/taro'
const videoContext = Taro.createVideoContext('myVideo')
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.createVideoContext | ✔️ |
相机组件控制
Taro.createCameraContext(this.$scope)
使用方式同 wx.createCameraContext
。
示例代码:
import Taro from '@tarojs/taro'
const cameraContext = Taro.createCameraContext()
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.createCameraContext | ✔️ |
文件
Taro.saveFile(OBJECT)
使用方式同 wx.saveFile
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.saveFile(params).then(...)
Taro.getFileInfo(OBJECT)
使用方式同 wx.getFileInfo
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.getFileInfo(params).then(...)
Taro.getSavedFileList(OBJECT)
使用方式同 wx.getSavedFileList
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.getSavedFileList(params).then(...)
Taro.getSavedFileInfo(OBJECT)
使用方式同 wx.getSavedFileInfo
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.getSavedFileInfo(params).then(...)
Taro.removeSavedFile(OBJECT)
使用方式同 wx.removeSavedFile
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.removeSavedFile(params).then(...)
Taro.openDocument(OBJECT)
使用方式同 wx.openDocument
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.openDocument(params).then(...)
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.saveFile | ✔️ | ||
Taro.getFileInfo | ✔️ | ||
Taro.getSavedFileList | ✔️ | ||
Taro.getSavedFileInfo | ✔️ | ||
Taro.removeSavedFile | ✔️ | ||
Taro.openDocument | ✔️ |
数据缓存
Taro.setStorage(OBJECT)
将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口,支持 Promise
化使用。
OBJECT 参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
key | String | 是 | 本地缓存中的指定的 key |
data | Object/String | 是 | 需要存储的内容 |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码:
import Taro from '@tarojs/taro'
Taro.setStorage({ key: 'key', data: 'value' })
.then(res => console.log(res))
Taro.setStorageSync(KEY, DATA)
将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。
参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
key | String | 是 | 本地缓存中的指定的 key |
data | Object/String | 是 | 需要存储的内容 |
示例代码:
import Taro from '@tarojs/taro'
Taro.setStorageSync('key', 'value')
Taro.getStorage(OBJECT)
从本地缓存中异步获取指定 key 对应的内容,支持 Promise
化使用。
OBJECT 参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
key | String | 是 | 本地缓存中的指定的 key |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
success 返回参数说明:
参数 | 类型 | 说明 |
---|---|---|
data | String | key 对应的内容 |
示例代码:
import Taro from '@tarojs/taro'
Taro.getStorage({ key: 'key' })
.then(res => console.log(res.data))
Taro.getStorageSync(KEY)
从本地缓存中同步获取指定 key 对应的内容。
参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
key | String | 是 | 本地缓存中的指定的 key |
示例代码:
import Taro from '@tarojs/taro'
const data = Taro.getStorageSync('key')
Taro.getStorageInfo(OBJECT)
异步获取当前storage的相关信息,支持 Promise
化使用。
OBJECT 参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
success | Function | 否 | 接口调用成功的回调函数,详见返回参数说明 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
success 返回参数说明:
参数 | 类型 | 说明 |
---|---|---|
keys | String Array | 当前 storage 中所有的 key |
示例代码:
import Taro from '@tarojs/taro'
Taro.getStorageInfo()
.then(res => console.log(res.keys))
Taro.getStorageInfoSync()
同步获取当前storage的相关信息。
示例代码:
import Taro from '@tarojs/taro'
const res = Taro.getStorageInfoSync()
console.log(res.keys)
Taro.removeStorage(OBJECT)
从本地缓存中异步移除指定 key,支持 Promise
化使用。
OBJECT 参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
keys | String | 是 | 本地缓存中的指定的 key |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码:
import Taro from '@tarojs/taro'
Taro.removeStorage({ key: 'key' })
.then(res => console.log(res))
Taro.removeStorageSync(KEY)
从本地缓存中同步移除指定 key 。
参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
key | String | 是 | 本地缓存中的指定的 key |
示例代码:
import Taro from '@tarojs/taro'
Taro.removeStorageSync('key')
Taro.clearStorage()
清理本地数据缓存。
示例代码:
import Taro from '@tarojs/taro'
Taro.clearStorage()
Taro.clearStorageSync()
同步清理本地数据缓存
示例代码:
import Taro from '@tarojs/taro'
Taro.clearStorageSync()
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.setStorage | ✔️ | ✔️ | ✔️ |
Taro.setStorageSync | ✔️ | ✔️ | |
Taro.getStorage | ✔️ | ✔️ | ✔️ |
Taro.getStorageSync | ✔️ | ✔️ | |
Taro.getStorageInfo | ✔️ | ✔️ | ✔️ |
Taro.getStorageInfoSync | ✔️ | ✔️ | |
Taro.removeStorage | ✔️ | ✔️ | ✔️ |
Taro.removeStorageSync | ✔️ | ✔️ | |
Taro.clearStorage | ✔️ | ✔️ | ✔️ |
Taro.clearStorageSync | ✔️ | ✔️ |
位置
获取位置
Taro.getLocation(OBJECT)
使用方式同 wx.getLocation
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.getLocation(params).then(...)
Taro.chooseLocation(OBJECT)
使用方式同 wx.chooseLocation
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.chooseLocation(params).then(...)
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.getLocation | ✔️ | ✔️ | |
Taro.chooseLocation | ✔️ |
查看位置
Taro.openLocation(OBJECT)
使用方式同 wx.openLocation
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.openLocation(params).then(...)
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.openLocation | ✔️ |
地图组件控制
Taro.createMapContext(mapId, this.$scope)
使用方式同 wx.createMapContext
。
示例代码:
import Taro from '@tarojs/taro'
const mapCtx = Taro.createMapContext('myMap')
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.createMapContext | ✔️ |
设备
系统信息
Taro.getSystemInfo(OBJECT)
获取系统信息,支持 Promise
化使用。
OBJECT 参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
success | Function | 否 | 接口调用成功的回调函数,详见返回参数说明 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
success 返回参数说明:
参数 | 说明 |
---|---|
brand | 手机品牌 |
model | 手机型号 |
system | 操作系统版本 |
pixelRatio | 设备像素比 |
screenWidth | 屏幕宽度 |
screenHeight | 屏幕高度 |
windowWidth | 可使用窗口宽度 |
windowHeight | 可使用窗口高度 |
version | 微信版本号 |
statusBarHeight | 状态栏的高度 |
platform | 客户端平台 |
language | 微信设置的语言 |
fontSizeSetting | 用户字体大小设置。以“我-设置-通用-字体大小”中的设置为准,单位:px |
SDKVersion | 客户端基础库版本 |
注意:H5 端不支持 version、statusBarHeight、fontSizeSetting、SDKVersion
示例代码:
import Taro from '@tarojs/taro'
Taro.getSystemInfo({
success: res => console.log(res)
})
.then(res => console.log(res))
Taro.getSystemInfoSync()
获取系统信息同步接口。
同步返回参数说明:
参数 | 说明 |
---|---|
brand | 手机品牌 |
model | 手机型号 |
system | 操作系统版本 |
pixelRatio | 设备像素比 |
screenWidth | 屏幕宽度 |
screenHeight | 屏幕高度 |
windowWidth | 可使用窗口宽度 |
windowHeight | 可使用窗口高度 |
version | 微信版本号 |
statusBarHeight | 状态栏的高度 |
platform | 客户端平台 |
language | 微信设置的语言 |
fontSizeSetting | 用户字体大小设置。以“我-设置-通用-字体大小”中的设置为准,单位:px |
SDKVersion | 客户端基础库版本 |
注意:H5 端不支持 version、statusBarHeight、fontSizeSetting、SDKVersion
示例代码:
import Taro from '@tarojs/taro'
const res = Taro.getSystemInfoSync()
console.log(res.model)
console.log(res.pixelRatio)
console.log(res.windowWidth)
console.log(res.windowHeight)
console.log(res.language)
console.log(res.version)
console.log(res.platform)
Taro.canIUse(String)
使用方式同 wx.canIUse
。
示例代码:
import Taro from '@tarojs/taro'
Taro.canIUse('openBluetoothAdapter')
Taro.canIUse('getSystemInfoSync.return.screenWidth')
Taro.canIUse('getSystemInfo.success.screenWidth')
Taro.canIUse('showToast.object.image')
Taro.canIUse('onCompassChange.callback.direction')
Taro.canIUse('request.object.method.GET')
Taro.canIUse('live-player')
Taro.canIUse('text.selectable')
Taro.canIUse('button.open-type.contact')
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.getSystemInfo | ✔️ | ✔️ | ✔️ |
Taro.getSystemInfoSync | ✔️ | ✔️ | ✔️ |
Taro.canIUse | ✔️ |
网络状态
Taro.getNetworkType(OBJECT)
获取网络类型,支持 Promise
化使用。
OBJECT 参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
success | Function | 否 | 接口调用成功的回调函数,返回网络类型 networkType |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
success 返回参数说明:
参数 | 说明 |
---|---|
networkType | 网络类型 |
networkType 有效值:
参数 | 说明 |
---|---|
wifi | wifi 网络 |
2g | 2g 网络 |
3g | 3g 网络 |
4g | 4g 网络 |
none | 无网络 |
unknow | Android 下不常见的网络类型 |
注意:
H5 下此 API 兼容性较差,详见 Can I use。并且标准不一,对于三种规范分别支持的 networkType 有效值如下。
- 仅支持不符合规范的 navigator.connetion.type,详情。networkType 有效值为:’wifi’、’3g’、’2g’、’unknown’。
- 支持 navigator.connetion.type。networkType 有效值为:’cellular’、’wifi’、’none’。
- 支持 navigator.connetion.effectiveType。networkType 有效值为:’slow-2g’、’2g’、’3g’、’4g’。
示例代码:
import Taro from '@tarojs/taro'
Taro.getNetworkType({
success: res => console.log(res.networkType)
})
.then(res => console.log(res.networkType))
Taro.onNetworkStatusChange(CALLBACK)
监听网络状态变化。
CALLBACK 返回参数:
参数 | 类型 | 说明 |
---|---|---|
isConnected | Boolean | 当前是否有网络连接 |
networkType | String | 网络类型 |
注意:H5 端兼容情况较差,只有当 navigator.connection 支持监听 onChange 事件时才会生效。
示例代码:
import Taro from '@tarojs/taro'
Taro.onNetworkStatusChange(res => {
console.log(res.isConnected)
console.log(res.networkType)
})
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.getNetworkType | ✔️ | ✔️ | ✔️ |
Taro.onNetworkStatusChange | ✔️ | ✔️ | ✔️ |
加速度计
Taro.onAccelerometerChange(CALLBACK)
使用方式同 wx.onAccelerometerChange
。
示例代码:
import Taro from '@tarojs/taro'
Taro.onAccelerometerChange(res => {
console.log(res.x)
console.log(res.y)
console.log(res.z)
})
Taro.startAccelerometer(OBJECT)
使用方式同 wx.startAccelerometer
。
示例代码:
import Taro from '@tarojs/taro'
Taro.startAccelerometer({ interval: 'game' })
Taro.stopAccelerometer(OBJECT)
使用方式同 wx.stopAccelerometer
。
示例代码:
import Taro from '@tarojs/taro'
Taro.stopAccelerometer()
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.onAccelerometerChange | ✔️ | ||
Taro.startAccelerometer | ✔️ | ||
Taro.stopAccelerometer | ✔️ |
罗盘
Taro.onCompassChange(CALLBACK)
使用方式同 wx.onCompassChange
。
示例代码:
import Taro from '@tarojs/taro'
Taro.onCompassChange(res => {
console.log(res.direction)
})
Taro.startCompass(OBJECT)
使用方式同 wx.startCompass
。
示例代码:
import Taro from '@tarojs/taro'
Taro.startCompass()
Taro.stopCompass(OBJECT)
使用方式同 wx.stopCompass
。
示例代码:
import Taro from '@tarojs/taro'
Taro.stopCompass()
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.onCompassChange | ✔️ | ||
Taro.startCompass | ✔️ | ||
Taro.stopCompass | ✔️ |
拨打电话
Taro.makePhoneCall(OBJECT)
使用方式同 wx.makePhoneCall
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.makePhoneCall(params).then(...)
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.makePhoneCall | ✔️ | ✔️ |
扫码
Taro.scanCode(OBJECT)
使用方式同 wx.scanCode
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.scanCode(params).then(...)
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.scanCode | ✔️ |
剪贴板
Taro.setClipboardData(OBJECT)
使用方式同 wx.setClipboardData
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.setClipboardData(params).then(...)
Taro.getClipboardData(OBJECT)
使用方式同 wx.getClipboardData
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.getClipboardData(params).then(...)
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.setClipboardData | ✔️ | ✔️ | |
Taro.getClipboardData | ✔️ | ✔️ |
蓝牙
Taro.openBluetoothAdapter(OBJECT)
使用方式同 wx.openBluetoothAdapter
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.openBluetoothAdapter(params).then(...)
Taro.closeBluetoothAdapter(OBJECT)
使用方式同 wx.closeBluetoothAdapter
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.closeBluetoothAdapter(params).then(...)
Taro.getBluetoothAdapterState(OBJECT)
使用方式同 wx.getBluetoothAdapterState
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.getBluetoothAdapterState(params).then(...)
Taro.onBluetoothAdapterStateChange(CALLBACK)
使用方式同 wx.onBluetoothAdapterStateChange
。
示例代码:
import Taro from '@tarojs/taro'
Taro.onBluetoothAdapterStateChange(res => {
console.log(`adapterState changed, now is`, res)
})
Taro.startBluetoothDevicesDiscovery(OBJECT)
使用方式同 wx.startBluetoothDevicesDiscovery
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.startBluetoothDevicesDiscovery(params).then(...)
Taro.stopBluetoothDevicesDiscovery(OBJECT)
使用方式同 wx.stopBluetoothDevicesDiscovery
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.stopBluetoothDevicesDiscovery(params).then(...)
Taro.getBluetoothDevices(OBJECT)
使用方式同 wx.getBluetoothDevices
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.getBluetoothDevices(params).then(...)
Taro.getConnectedBluetoothDevices(OBJECT)
使用方式同 wx.getConnectedBluetoothDevices
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.getConnectedBluetoothDevices(params).then(...)
Taro.onBluetoothDeviceFound(CALLBACK)
使用方式同 wx.onBluetoothDeviceFound
。
示例代码:
import Taro from '@tarojs/taro'
Taro.onBluetoothDeviceFound(devices => {
console.log(devices)
console.log(devices[0].advertisData)
})
Taro.createBLEConnection(OBJECT)
使用方式同 wx.createBLEConnection
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.createBLEConnection(params).then(...)
Taro.closeBLEConnection(OBJECT)
使用方式同 wx.closeBLEConnection
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.closeBLEConnection(params).then(...)
Taro.getBLEDeviceServices(OBJECT)
使用方式同 wx.getBLEDeviceServices
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.getBLEDeviceServices(params).then(...)
Taro.getBLEDeviceCharacteristics(OBJECT)
使用方式同 wx.getBLEDeviceCharacteristics
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.getBLEDeviceCharacteristics(params).then(...)
Taro.readBLECharacteristicValue(OBJECT)
使用方式同 wx.readBLECharacteristicValue
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.readBLECharacteristicValue(params).then(...)
Taro.writeBLECharacteristicValue(OBJECT)
使用方式同 wx.writeBLECharacteristicValue
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.writeBLECharacteristicValue(params).then(...)
Taro.notifyBLECharacteristicValueChange(OBJECT)
使用方式同 wx.notifyBLECharacteristicValueChange
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.notifyBLECharacteristicValueChange(params).then(...)
Taro.onBLEConnectionStateChange(CALLBACK)
使用方式同 wx.onBLEConnectionStateChange
。
示例代码:
import Taro from '@tarojs/taro'
Taro.onBLEConnectionStateChange(res => {
// 该方法回调中可以用于处理连接意外断开等异常情况
console.log(`device ${res.deviceId} state has changed, connected: ${res.connected}`)
})
Taro.onBLECharacteristicValueChange(CALLBACK)
使用方式同 wx.onBLECharacteristicValueChange
。
示例代码:
import Taro from '@tarojs/taro'
Taro.onBLECharacteristicValueChange(res => {
console.log(`characteristic ${res.characteristicId} has changed, now is ${res.value}`)
console.log(res.value)
})
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.openBluetoothAdapter | ✔️ | ||
Taro.closeBluetoothAdapter | ✔️ | ||
Taro.getBluetoothAdapterState | ✔️ | ||
Taro.onBluetoothAdapterStateChange | ✔️ | ||
Taro.startBluetoothDevicesDiscovery | ✔️ | ||
Taro.stopBluetoothDevicesDiscovery | ✔️ | ||
Taro.getBluetoothDevices | ✔️ | ||
Taro.getConnectedBluetoothDevices | ✔️ | ||
Taro.onBluetoothDeviceFound | ✔️ | ||
Taro.createBLEConnection | ✔️ | ||
Taro.closeBLEConnection | ✔️ | ||
Taro.getBLEDeviceServices | ✔️ | ||
Taro.getBLEDeviceCharacteristics | ✔️ | ||
Taro.readBLECharacteristicValue | ✔️ | ||
Taro.writeBLECharacteristicValue | ✔️ | ||
Taro.notifyBLECharacteristicValueChange | ✔️ | ||
Taro.onBLEConnectionStateChange | ✔️ | ||
Taro.onBLECharacteristicValueChange | ✔️ |
iBeacon
Taro.startBeaconDiscovery(OBJECT)
使用方式同 wx.startBeaconDiscovery
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.startBeaconDiscovery(params).then(...)
Taro.stopBeaconDiscovery(OBJECT)
使用方式同 wx.stopBeaconDiscovery
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.stopBeaconDiscovery(params).then(...)
Taro.getBeacons(OBJECT)
使用方式同 wx.getBeacons
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.getBeacons(params).then(...)
Taro.onBeaconUpdate(CALLBACK)
使用方式同 wx.onBeaconUpdate
。
Taro.onBeaconServiceChange(CALLBACK)
使用方式同 wx.onBeaconServiceChange
。
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.startBeaconDiscovery | ✔️ | ||
Taro.stopBeaconDiscovery | ✔️ | ||
Taro.getBeacons | ✔️ | ||
Taro.onBeaconUpdate | ✔️ | ||
Taro.onBeaconServiceChange | ✔️ |
屏幕亮度
Taro.setScreenBrightness(OBJECT)
使用方式同 wx.setScreenBrightness
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.setScreenBrightness(params).then(...)
Taro.getScreenBrightness(OBJECT)
使用方式同 wx.getScreenBrightness
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.getScreenBrightness(params).then(...)
Taro.setKeepScreenOn(OBJECT)
使用方式同 wx.setKeepScreenOn
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.setKeepScreenOn(params).then(...)
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.setScreenBrightness | ✔️ | ||
Taro.getScreenBrightness | ✔️ | ||
Taro.setKeepScreenOn | ✔️ |
用户截屏事件
Taro.onUserCaptureScreen(CALLBACK)
监听用户主动截屏事件,用户使用系统截屏按键截屏时触发此事件。
示例代码:
import Taro from '@tarojs/taro'
Taro.onUserCaptureScreen(() => {
console.log('用户截屏了')
})
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.onUserCaptureScreen | ✔️ |
振动
Taro.vibrateLong(OBJECT)
使用方式同 wx.vibrateLong
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.vibrateLong(params).then(...)
Taro.vibrateShort(OBJECT)
使用方式同 wx.vibrateShort
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.vibrateShort(params).then(...)
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.vibrateLong | ✔️ | ✔️ | |
Taro.vibrateShort | ✔️ | ✔️ |
手机联系人
Taro.addPhoneContact(OBJECT)
使用方式同 wx.addPhoneContact
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.addPhoneContact(params).then(...)
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.addPhoneContact | ✔️ |
NFC
Taro.getHCEState(OBJECT)
使用方式同 wx.getHCEState
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.getHCEState(params).then(...)
Taro.startHCE(OBJECT)
使用方式同 wx.startHCE
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.startHCE(params).then(...)
Taro.stopHCE(OBJECT)
使用方式同 wx.stopHCE
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.stopHCE(params).then(...)
Taro.onHCEMessage(CALLBACK)
使用方式同 wx.onHCEMessage
。
Taro.sendHCEMessage(OBJECT)
使用方式同 wx.sendHCEMessage
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.sendHCEMessage(params).then(...)
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.getHCEState | ✔️ | ||
Taro.startHCE | ✔️ | ||
Taro.stopHCE | ✔️ | ||
Taro.onHCEMessage | ✔️ | ||
Taro.sendHCEMessage | ✔️ |
Wi-Fi
Taro.startWifi(OBJECT)
使用方式同 wx.startWifi
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.startWifi(params).then(...)
Taro.stopWifi(OBJECT)
使用方式同 wx.stopWifi
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.stopWifi(params).then(...)
Taro.connectWifi(OBJECT)
使用方式同 wx.connectWifi
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.connectWifi(params).then(...)
Taro.getWifiList(OBJECT)
使用方式同 wx.getWifiList
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.getWifiList(params).then(...)
Taro.onGetWifiList(CALLBACK)
使用方式同 wx.onGetWifiList
。
Taro.setWifiList(OBJECT)
使用方式同 wx.setWifiList
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.setWifiList(params).then(...)
Taro.onWifiConnected(CALLBACK)
使用方式同 wx.onWifiConnected
。
Taro.getConnectedWifi(OBJECT)
使用方式同 wx.getConnectedWifi
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.getConnectedWifi(params).then(...)
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.startWifi | ✔️ | ||
Taro.stopWifi | ✔️ | ||
Taro.connectWifi | ✔️ | ||
Taro.getWifiList | ✔️ | ||
Taro.onGetWifiList | ✔️ | ||
Taro.setWifiList | ✔️ | ||
Taro.onWifiConnected | ✔️ | ||
Taro.getConnectedWifi | ✔️ |
界面
交互反馈
Taro.showToast(OBJECT)
显示消息提示框,支持 Promise
化使用。
OBJECT 参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
title | String | 是 | 提示的内容 |
icon | String | 否 | 图标,有效值 “success”, “loading”, “none” |
image | String | 否 | 自定义图标的本地路径,image 的优先级高于 icon |
duration | Number | 否 | 提示的延迟时间,单位毫秒,默认:1500 |
mask | Boolean | 否 | 是否显示透明蒙层,防止触摸穿透,默认:false |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
icon 有效值
有效值 | 说明 |
---|---|
success | 显示成功图标 |
loading | 显示加载图标 |
none | 不显示图标 |
示例代码:
import Taro from '@tarojs/taro'
Taro.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
.then(res => console.log(res))
Taro.showLoading(OBJECT)
显示 loading 提示框, 需主动调用 Taro.hideLoading 才能关闭提示框,支持 Promise
化使用。
OBJECT 参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
title | String | 是 | 提示的内容 |
mask | Boolean | 否 | 是否显示透明蒙层,防止触摸穿透,默认:false |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码:
import Taro from '@tarojs/taro'
Taro.showLoading({
title: 'loading'
})
.then(res => console.log(res))
Taro.hideToast()
隐藏消息提示框
Taro.hideLoading()
隐藏 loading 提示框
Taro.showModal(OBJECT)
显示模态弹窗,支持 Promise
化使用。
OBJECT 参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
title | String | 是 | 提示的标题 |
content | String | 是 | 提示的内容 |
showCancel | Boolean | 否 | 是否显示取消按钮,默认为 true |
cancelText | String | 否 | 取消按钮的文字,默认为”取消”,最多 4 个字符 |
cancelColor | HexColor | 否 | 取消按钮的文字颜色,默认为”#000000” |
confirmText | String | 否 | 确定按钮的文字,默认为”确定”,最多 4 个字符 |
confirmColor | HexColor | 否 | 确定按钮的文字颜色,默认为”#3CC51F” |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
success 返回参数说明:
参数值 | 类型 | 说明 |
---|---|---|
confirm | Boolean | 为 true 时,表示用户点击了确定按钮 |
cancel | Boolean | 为 true 时,表示用户点击了取消 |
示例代码:
import Taro from '@tarojs/taro'
// 注意:无论用户点击确定还是取消,Promise 都会 resolve。
Taro.showModal({
title: 'xxx',
content: 'hello world',
})
.then(res => console.log(res.confirm, res.cancel))
Taro.showActionSheet(OBJECT)
显示操作菜单,支持 Promise
化使用。
OBJECT 参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
itemList | String Array | 是 | 按钮的文字数组,数组长度最大为6个 |
itemColor | HexColor | 否 | 按钮的文字颜色,默认为”#000000” |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
success 返回参数说明:
参数值 | 类型 | 说明 |
---|---|---|
tapIndex | Number | 用户点击的按钮,从上到下的顺序,从0开始 |
import Taro from '@tarojs/taro'
// 注意:当用户点击选项时 Promise 会 resolve,而当用户点击取消或蒙层时,Promise 会 reject。
Taro.showActionSheet({
itemList: ['a', 'b', 'c']
})
.then(res => console.log(res.errMsg, res.tapIndex))
.catch(err => console.log(res.errMsg))
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.showToast | ✔️ | ✔️ | ✔️ |
Taro.showLoading | ✔️ | ✔️ | ✔️ |
Taro.hideToast | ✔️ | ✔️ | ✔️ |
Taro.hideLoading | ✔️ | ✔️ | ✔️ |
Taro.showModal | ✔️ | ✔️ | ✔️ |
Taro.showActionSheet | ✔️ | ✔️ | ✔️ |
设置导航条
Taro.setNavigationBarTitle(OBJECT)
使用方式同 wx.setNavigationBarTitle
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.setNavigationBarTitle(params).then(...)
Taro.showNavigationBarLoading()
在当前页面显示导航条加载动画。
Taro.hideNavigationBarLoading()
隐藏导航条加载动画。
Taro.setNavigationBarColor(OBJECT)
使用方式同 wx.setNavigationBarColor
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.setNavigationBarColor(params).then(...)
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.setNavigationBarTitle | ✔️ | ||
Taro.showNavigationBarLoading | ✔️ | ||
Taro.hideNavigationBarLoading | ✔️ | ||
Taro.setNavigationBarColor | ✔️ |
设置tabBar
Taro.setTabBarBadge(OBJECT)
使用方式同 wx.setTabBarBadge
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.setTabBarBadge(params).then(...)
Taro.removeTabBarBadge(OBJECT)
使用方式同 wx.removeTabBarBadge
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.removeTabBarBadge(params).then(...)
Taro.showTabBarRedDot(OBJECT)
使用方式同 wx.showTabBarRedDot
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.showTabBarRedDot(params).then(...)
Taro.hideTabBarRedDot(OBJECT)
使用方式同 wx.hideTabBarRedDot
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.hideTabBarRedDot(params).then(...)
Taro.setTabBarStyle(OBJECT)
使用方式同 wx.setTabBarStyle
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.setTabBarStyle(params).then(...)
Taro.setTabBarItem(OBJECT)
使用方式同 wx.setTabBarItem
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.setTabBarItem(params).then(...)
Taro.showTabBar(OBJECT)
使用方式同 wx.showTabBar
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.showTabBar(params).then(...)
Taro.hideTabBar(OBJECT)
使用方式同 wx.hideTabBar
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.hideTabBar(params).then(...)
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.setTabBarBadge | ✔️ | ||
Taro.removeTabBarBadge | ✔️ | ||
Taro.showTabBarRedDot | ✔️ | ||
Taro.hideTabBarRedDot | ✔️ | ||
Taro.setTabBarStyle | ✔️ | ||
Taro.setTabBarItem | ✔️ | ||
Taro.showTabBar | ✔️ | ||
Taro.hideTabBar | ✔️ |
设置置顶信息
Taro.setTopBarText(OBJECT)
使用方式同 wx.setTopBarText
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.setTopBarText(params).then(...)
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.setTopBarText | ✔️ |
导航
Taro.navigateTo(OBJECT)
使用方式同 wx.navigateTo
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.navigateTo(params).then(...)
Taro.redirectTo(OBJECT)
使用方式同 wx.redirectTo
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.redirectTo(params).then(...)
Taro.switchTab(OBJECT)
使用方式同 wx.switchTab
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.switchTab(params).then(...)
Taro.navigateBack(OBJECT)
使用方式同 wx.navigateBack
。
示例代码:
import Taro from '@tarojs/taro'
Taro.navigateBack({ delta: 2 })
Taro.reLaunch(OBJECT)
使用方式同 wx.reLaunch
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.reLaunch(params).then(...)
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.navigateTo | ✔️ | ✔️ | ✔️ |
Taro.redirectTo | ✔️ | ✔️ | ✔️ |
Taro.switchTab | ✔️ | ✔️ | |
Taro.navigateBack | ✔️ | ✔️ | ✔️ |
Taro.reLaunch | ✔️ | ✔️ |
动画
Taro.createAnimation(OBJECT)
使用方式同 wx.createAnimation
。
示例代码:
import Taro from '@tarojs/taro'
const animation = Taro.createAnimation({
transformOrigin: "50% 50%",
duration: 1000,
timingFunction: "ease",
delay: 0
})
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.createAnimation | ✔️ |
位置
Taro.pageScrollTo(OBJECT)
使用方式同 wx.pageScrollTo
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.pageScrollTo(params).then(...)
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.pageScrollTo | ✔️ |
绘图
Taro.createCanvasContext(canvasId, this.$scope)
使用方式同 wx.createCanvasContext
。
Taro.createContext(不推荐使用)
创建并返回绘图上下文。
Taro.drawCanvas(不推荐使用)
使用方式同 wx.drawCanvas
。
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.createCanvasContext | ✔️ | ||
Taro.createContext | ✔️ | ||
Taro.drawCanvas | ✔️ |
下拉刷新
Taro.startPullDownRefresh(OBJECT)
使用方式同 wx.startPullDownRefresh
,支持 Promise
化使用。
示例代码:
import Taro from '@tarojs/taro'
Taro.startPullDownRefresh(params).then(...)
Taro.stopPullDownRefresh()
停止当前页面下拉刷新。
示例代码:
import Taro from '@tarojs/taro'
Taro.stopPullDownRefresh()
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.startPullDownRefresh | ✔️ | ||
Taro.stopPullDownRefresh | ✔️ |
WXML节点信息
Taro.createSelectorQuery()
返回一个SelectorQuery对象实例。可以在这个实例上使用select等方法选择节点,并使用boundingClientRect等方法选择需要查询的信息。
示例代码:
import Taro from '@tarojs/taro'
const query = Taro.createSelectorQuery()
selectorQuery.in(component)
将选择器的选取范围更改为自定义组件component内。(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点。)
注意:对 h5 侧不起作用,h5 侧还是从全局查找。
示例代码:
import Taro from '@tarojs/taro'
Component({
ready () {
const query = Taro.createSelectorQuery().in(this.$scope)
})
})
selectorQuery.select(selector)
在当前页面下选择第一个匹配选择器selector的节点,返回一个NodesRef对象实例,可以用于获取节点信息。
- ID 选择器:
#the-id
- class选择器(可以连续指定多个):
.a-class.another-class
- 子元素选择器:
.the-parent > .the-child
- 后代选择器:
.the-ancestor .the-descendant
- 跨自定义组件的后代选择器:
.the-ancestor >>> .the-descendant
- 多选择器的并集:
#a-node, .some-other-nodes
selectorQuery.selectAll(selector)
在当前页面下选择匹配选择器 selector 的节点,返回一个 NodesRef 对象实例。 与 selectorQuery.selectNode(selector) 不同的是,它选择所有匹配选择器的节点。
selectorQuery.selectViewport()
选择显示区域,可用于获取显示区域的尺寸、滚动位置等信息,返回一个 NodesRef 对象实例。
nodesRef.boundingClientRect([callback])
添加节点的布局位置的查询请求,相对于显示区域,以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回值是 nodesRef 对应的 selectorQuery。
返回的节点信息中,每个节点的位置用 left、right、top、bottom、width、height 字段描述。如果提供了 callback 回调函数,在执行 selectQuery 的 exec 方法后,节点信息会在 callback 中返回。
示例代码:
import Taro from '@tarojs/taro'
const query = Taro.createSelectorQuery()
query
.select('#the-id')
.boundingClientRect(rect => {
rect.id // 节点的ID
rect.dataset // 节点的dataset
rect.left // 节点的左边界坐标
rect.right // 节点的右边界坐标
rect.top // 节点的上边界坐标
rect.bottom // 节点的下边界坐标
rect.width // 节点的宽度
rect.height // 节点的高度
})
.exec()
})
nodesRef.scrollOffset([callback])
添加节点的滚动位置查询请求,以像素为单位。节点必须是 scroll-view 或者 viewport。返回值是 nodesRef 对应的 selectorQuery。
返回的节点信息中,每个节点的滚动位置用 scrollLeft、scrollTop 字段描述。如果提供了 callback 回调函数,在执行 selectQuery 的 exec 方法后,节点信息会在 callback 中返回。
示例代码:
import Taro from '@tarojs/taro'
Taro.createSelectorQuery()
.selectViewport()
.scrollOffset(rect => {
rect.id // 节点的ID
rect.dataset // 节点的dataset
res.scrollLeft // 节点的水平滚动位置
res.scrollTop // 节点的竖直滚动位置
})
.exec()
})
nodesRef.fields(fields, [callback])
获取节点的相关信息,需要获取的字段在 fields 中指定。返回值是 nodesRef 对应的 selectorQuery。可指定获取的字段包括:
字段名 | 默认值 | 说明 |
---|---|---|
id | 否 | 是否返回节点 id |
dataset | 否 | 是否返回节点 dataset |
rect | 否 | 是否返回节点布局位置(left right top bottom ) |
size | 否 | 是否返回节点尺寸(width height ) |
scrollOffset | 否 | 是否返回节点的 scrollLeft scrollTop ,节点必须是 scroll-view 或者 viewport |
properties | [] | 指定属性名列表,返回节点对应属性名的当前属性值(只能获得组件文档中标注的常规属性值, id class style 和事件绑定的属性值不可获取) |
computedStyle | [] | 指定样式名列表,返回节点对应样式名的当前值 |
注意: computedStyle 的优先级高于 size,当同时在 computedStyle 里指定了 width/height 和传入了 size: true,则优先返回 computedStyle 获取到的 width/height。
示例代码:
import Taro from '@tarojs/taro'
Taro.createSelectorQuery()
.select('#the-id')
.fields({
dataset: true,
size: true,
scrollOffset: true,
properties: ['scrollX', 'scrollY'],
computedStyle: ['margin', 'backgroundColor']
}, res => {
res.dataset // 节点的dataset
res.width // 节点的宽度
res.height // 节点的高度
res.scrollLeft // 节点的水平滚动位置
res.scrollTop // 节点的竖直滚动位置
res.scrollX // 节点 scroll-x 属性的当前值
res.scrollY // 节点 scroll-y 属性的当前值
// 此处返回指定要返回的样式名
res.margin
res.backgroundColor
})
.exec()
})
selectorQuery.exec([callback])
执行所有的请求,请求结果按请求次序构成数组,在 callback 的第一个参数中返回。
API 支持度
API | 微信小程序 | H5 | ReactNative |
---|---|---|---|
Taro.createSelectorQuery | ✔️ | ✔️ | |
selectorQuery.in | ✔️ | ✔️ | |
selectorQuery.select | ✔️ | ✔️ | |
selectorQuery.selectAll | ✔️ | ✔️ | |
selectorQuery.selectViewport | ✔️ | ✔️ | |
nodesRef.boundingClientRect | ✔️ | ✔️ | |
nodesRef.scrollOffset | ✔️ | ✔️ | |
nodesRef.fields | ✔️ | ✔️ | |
selectorQuery.exec | ✔️ | ✔️ |