@tarojs/taro

@tarojs/taro

Version 3.4.9
Published 7 days ago
1.03 MB
3 dependencies
MIT license

Install

npm i @tarojs/taro

yarn add @tarojs/taro

pnpm add @tarojs/taro

Overview

Taro framework

Index

Variables

variable Taro

const Taro: import('/types/index.d.ts').TaroStatic;

Interfaces

interface AddToFavoritesObject

interface AddToFavoritesObject {}

property webviewUrl

webviewUrl: string;

页面中包含web-view组件时，返回当前web-view的url

interface AddToFavoritesReturnObject

interface AddToFavoritesReturnObject {}

property imageUrl

imageUrl?: string;

自定义图片，显示图片长宽比为 1：1

property query

query?: string;

自定义query字段

property title

title?: string;

自定义标题

interface Animation

interface Animation {}

动画对象 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.html

method backgroundColor

backgroundColor: (value: string) => Animation;

设置背景色 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.backgroundColor.html

method bottom

bottom: (value: number | string) => Animation;

设置 bottom 值 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.bottom.html

method export

export: () => { actions: TaroGeneral.IAnyObject[] };

导出动画队列。**export 方法每次调用后会清掉之前的动画操作**。 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.export.html

method height

height: (value: number | string) => Animation;

设置高度 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.height.html

method left

left: (value: number | string) => Animation;

设置 left 值 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.left.html

method matrix

matrix: (
    a: number,
    b: number,
    c: number,
    d: number,
    tx: number,
    ty: number
) => Animation;

同 [transform-function matrix](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix) weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.matrix.html

method matrix3d

matrix3d: (
    a1: number,
    b1: number,
    c1: number,
    d1: number,
    a2: number,
    b2: number,
    c2: number,
    d2: number,
    a3: number,
    b3: number,
    c3: number,
    d3: number,
    a4: number,
    b4: number,
    c4: number,
    d4: number
) => Animation;

同 [transform-function matrix3d](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d) weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.matrix3d.html

method opacity

opacity: (value: number) => Animation;

设置透明度 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.opacity.html

method right

right: (value: number | string) => Animation;

设置 right 值 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.right.html

method rotate

rotate: (angle: number) => Animation;

从原点顺时针旋转一个角度 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.rotate.html

method rotate3d

rotate3d: (x: number, y?: number, z?: number, angle?: number) => Animation;

从固定轴顺时针旋转一个角度 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.rotate3d.html

method rotateX

rotateX: (angle: number) => Animation;

从 X 轴顺时针旋转一个角度 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.rotateX.html

method rotateY

rotateY: (angle: number) => Animation;

从 Y 轴顺时针旋转一个角度 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.rotateY.html

method rotateZ

rotateZ: (angle: number) => Animation;

从 Z 轴顺时针旋转一个角度 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.rotateZ.html

method scale

scale: (sx: number, sy?: number) => Animation;

缩放 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.scale.html

method scale3d

scale3d: (sx: number, sy: number, sz: number) => Animation;

缩放 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.scale3d.html

method scaleX

scaleX: (scale: number) => Animation;

缩放 X 轴 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.scaleX.html

method scaleY

scaleY: (scale: number) => Animation;

缩放 Y 轴 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.scaleY.html

method scaleZ

scaleZ: (scale: number) => Animation;

缩放 Z 轴 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.scaleZ.html

method skew

skew: (ax: number, ay: number) => Animation;

对 X、Y 轴坐标进行倾斜 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.skew.html

method skewX

skewX: (angle: number) => Animation;

对 X 轴坐标进行倾斜 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.skewX.html

method skewY

skewY: (angle: number) => Animation;

对 Y 轴坐标进行倾斜 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.skewY.html

method step

step: (option?: Animation.StepOption) => Animation;

表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.step.html

method top

top: (value: number | string) => Animation;

设置 top 值 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.top.html

method translate

translate: (tx?: number, ty?: number) => Animation;

平移变换 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.translate.html

method translate3d

translate3d: (tx?: number, ty?: number, tz?: number) => Animation;

对 xyz 坐标进行平移变换 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.translate3d.html

method translateX

translateX: (translation: number) => Animation;

对 X 轴平移 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.translateX.html

method translateY

translateY: (translation: number) => Animation;

对 Y 轴平移 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.translateY.html

method translateZ

translateZ: (translation: number) => Animation;

对 Z 轴平移 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.translateZ.html

method width

width: (value: number | string) => Animation;

设置宽度 weapp, h5
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.width.html

interface App

interface App extends TaroGeneral.IAnyObject {}

注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。

index signature

[key: string]: any;

interface AppConfig

interface AppConfig {}

property animation

animation?: RouterAnimate | boolean;

是否开启 h5 端路由动画功能，默认开启 h5 3.3.18

property appId

appId?: string;

渲染页面的容器 id "app" 3.3.18

property components

components?: string[];

接受一个数组，每一项都是字符串，来指定编译为原生小程序组件的组件入口

property darkmode

darkmode?: boolean;

配置 darkMode 为 true，即表示当前小程序已适配 DarkMode 2.11.0

property debug

debug?: boolean;

是否开启 debug 模式，默认关闭 false

property embeddedAppIdList

embeddedAppIdList?: string[];

半屏小程序 appId

property entranceDeclare

entranceDeclare?: {
    /** 声明“位置消息”场景进入小程序的启动页面 */
    locationMessage?: {
        /** 启动页路径，必须是在pages中已经定义 */
        path?: string;
        /** 启动页参数 */
        query?: string;
    };
};

微信消息用小程序打开
See Also
- https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/location-message.html

property entryPagePath

entryPagePath?: string;

小程序默认启动首页，未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。

property functionalPages

functionalPages?: boolean;

启用插件功能页时，插件所有者小程序需要设置其 functionalPages 为 true。
See Also
- https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages.html false 2.1.0

property halfPage

halfPage?: {
    /** 视频号直播打开的第一个页面的全屏状态使用自定义顶部，支持 */
    firstPageNavigationStyle?: 'default' | 'custom';
};

视频号直播半屏场景设置

property lazyCodeLoading

lazyCodeLoading?: string;

配置自定义组件代码按需注入

property navigateToMiniProgramAppIdList

navigateToMiniProgramAppIdList?: string[];

需要跳转的小程序列表 2.4.0

property networkTimeout

networkTimeout?: NetworkTimeout;

各类网络请求的超时时间，单位均为毫秒。

property pages

pages?: string[];

接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成，数组的第一项代表小程序的初始页面

property permission

permission?: Permission;

小程序接口权限相关设置微信客户端 7.0.0

property plugins

plugins?: Plugins;

使用到的插件 1.9.6

property preloadRule

preloadRule?: PreloadRule;

声明分包预下载的规则。 preloadRule 中，key 是页面路径，value 是进入此页面的预下载配置注意: 分包预下载目前只支持通过配置方式使用，暂不支持通过调用API完成。 vConsole 里有 preloadSubpackages 开头的日志信息，可以用来验证预下载的情况。 2.3.0

property requiredBackgroundModes

requiredBackgroundModes?: ('audio' | 'location')[];

申明需要后台运行的能力，类型为数组。目前支持以下项目： - audio: 后台音乐播放 - location: 后台定位微信客户端 6.7.2 及以上版本支持

property resizable

resizable?: boolean;

PC 小程序是否支持用户任意改变窗口大小（包括最大化窗口）；iPad 小程序是否支持屏幕旋转 false 2.3.0

property serviceProviderTicket

serviceProviderTicket?: string;

定制化型服务商票据

property singlePage

singlePage?: SinglePage;

单页模式相关配置

property sitemapLocation

sitemapLocation?: string;

指明 sitemap.json 的位置

property style

style?: string;

指定使用升级后的 weui 样式 - v2: 可表明启用新版的组件样式 default

property subpackages

subpackages?: SubPackage[];

property subPackages

subPackages?: SubPackage[];

分包结构配置

Example 1

[
  {
    root: 'packages/module',
    pages: [
      'pages/page/index'
    ]
  }
]

1.7.3

property supportedMaterials

supportedMaterials?: {
    /** 支持文件类型的MimeType，音频，视频支持二级配置的通配模式，例如: video/*。通配模式配置和精确类型配置同时存在时，则优先使用精确类型的配置(例如video/*和video/mp4同时存在，会优先使用video/mp4的配置)。 */
    materialType: string;
    /** 开发者配置的标题，在素材页面会展示该标题，配置中必须包含${nickname}, 代码包编译后会自动替换为小程序名称，如果声明了简称则会优先使用简称。除去${nickname}其余字数不得超过6个。 */
    name: string;
    /** 用途描述，会在推荐列表展示该描述，限定字数不超过22个。 */
    desc: string;
    /** 在该场景下打开小程序时跳转页面 */
    path: string;
};

聊天素材小程序打开相关配置
See Also
- https://developers.weixin.qq.com/miniprogram/dev/framework/material/support_material.html

property tabBar

tabBar?: TabBar;

底部 tab 栏的表现

property themeLocation

themeLocation?: string;

指明 theme.json 的位置，darkmode为true为必填 2.11.0

property useExtendedLib

useExtendedLib?: Record<string, boolean>;

指定需要引用的扩展库指定需要引用的扩展库。目前支持以下项目： - kbone: 多端开发框架 - weui: WeUI 组件库

property usingComponents

usingComponents?: Record<string, string>;

全局自定义组件配置
See Also
- https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

property window

window?: WindowConfig;

全局的默认窗口表现

property workers

workers?: string;

Worker 代码放置的目录使用 Worker 处理多线程任务时，设置 Worker 代码放置的目录 1.9.90

interface AppInstance

interface AppInstance extends Show {}

method componentDidShow

componentDidShow: (options?: Record<string, unknown>) => void;

method mount

mount: (
    component: React.ComponentClass | Vue.ComponentOptions<Vue>,
    id: string,
    cb: () => void
) => void;

method onShow

onShow: (options?: Record<string, unknown>) => void;

method unmount

unmount: (id: string, cb: () => void) => void;

interface AtMessageOptions

interface AtMessageOptions {}

property duration

duration?: number;

property message

message: string;

property type

type?: MessageType;

interface AudioBuffer

interface AudioBuffer {}

AudioBuffer 接口表示存在内存里的一段短小的音频资源，利用 [WebAudioContext.decodeAudioData](./WebAudioContext#decodeaudiodata) 方法从一个音频文件构建，或者利用 [AudioContext.createBuffer](https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/(AudioContext.createBuffer).html) 从原始数据构建。把音频放入 AudioBuffer 后，可以传入到一个 AudioBufferSourceNode 进行播放。 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/AudioBuffer.html

property duration

duration: number;

返回存储在缓存区的PCM数据的时长（单位为秒）

property length

length: number;

返回存储在缓存区的PCM数据的采样帧率

property numberOfChannels

numberOfChannels: number;

储存在缓存区的PCM数据的通道数

property sampleRate

sampleRate: number;

存储在缓存区的PCM数据的采样率（单位为sample/s)

method copyFromChannel

copyFromChannel: () => void;

从 AudioBuffer 的指定频道复制到数组终端。 weapp

Example 1

const audioCtx = Taro.createWebAudioContext()
const audioBuffer = audioCtx.createFromAudioFile({
  filePath:'/pages/res/bgm.mp3', // 静态资源
  mixToMono:true,
  sampleRate:44100
});
const channels = audioBuffer.numberOfChannels
const anotherArray = new Float32Array(frameCount);
const rate = audioBuffer.sampleRate
const startOffSet = 0
const endOffset = rate * 3;
const newAudioBuffer = audioCtx.createBuffer(channels,endOffset - startOffset,rate)
const offset = 0

for (let channel = 0; channel < channels; channel++) {
  audioBuffer.copyFromChannel(anotherArray, channel, startOffset);
  newAudioBuffer.copyToChannel(anotherArray, channel, offset);
}

method copyToChannel

copyToChannel: (
    source: Float32Array,
    channelNumber: number,
    startInChannel: number
) => void;

从指定数组复制样本到 audioBuffer 的特定通道 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/AudioBuffer.copyToChannel.html

method getChannelData

getChannelData: (channel: number) => Float32Array;

返回一个 Float32Array，包含了带有频道的PCM数据，由频道参数定义（有0代表第一个频道） weapp
Example 1
const audioCtx = Taro.createWebAudioContext() const myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate); const nowBuffering = myArrayBuffer.getChannelData(channel);
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/AudioBuffer.getChannelData.html

interface AudioContext

interface AudioContext {}

AudioContext 实例，可通过 Taro.createAudioContext 获取。
AudioContext 通过 id 跟一个 audio 组件绑定，操作对应的 audio 组件。 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/AudioContext.html

method pause

pause: () => void;

暂停音频。 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/AudioContext.pause.html

method play

play: () => void;

播放音频。 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/AudioContext.play.html

method seek

seek: (position: number) => void;

跳转到指定位置。 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/AudioContext.seek.html

method setSrc

setSrc: (src: string) => void;

设置音频地址 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/AudioContext.setSrc.html

interface AuthSetting

interface AuthSetting {}

用户授权设置信息，详情参考[权限](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html)
See Also
- https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html

property 'scope.address'

'scope.address'?: boolean;

是否授权通讯地址，对应接口 [Taro.chooseAddress](/docs/apis/open-api/address/chooseAddress)

property 'scope.bluetoothBackground'

'scope.bluetoothBackground'?: boolean;

是否授权小程序在后台运行蓝牙，对应接口 [Taro.openBluetoothAdapterBackground](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/setting/(wx.openBluetoothAdapterBackground).html)

property 'scope.camera'

'scope.camera'?: boolean;

是否授权摄像头，对应 [camera](/docs/components/media/camera) 组件

property 'scope.invoice'

'scope.invoice'?: boolean;

是否授权获取发票，对应接口 [Taro.chooseInvoice](/docs/apis/open-api/invoice/chooseInvoice)

property 'scope.invoiceTitle'

'scope.invoiceTitle'?: boolean;

是否授权发票抬头，对应接口 [Taro.chooseInvoiceTitle](/docs/apis/open-api/invoice/chooseInvoiceTitle)

property 'scope.record'

'scope.record'?: boolean;

是否授权录音功能，对应接口 [Taro.startRecord](/docs/apis/media/recorder/startRecord)

property 'scope.userInfo'

'scope.userInfo'?: boolean;

是否授权用户信息，对应接口 [Taro.getUserInfo](/docs/apis/open-api/user-info/getUserInfo)

property 'scope.userLocation'

'scope.userLocation'?: boolean;

是否授权地理位置，对应接口 [Taro.getLocation](/docs/apis/location/getLocation), [Taro.chooseLocation](/docs/apis/location/chooseLocation)

property 'scope.werun'

'scope.werun'?: boolean;

是否授权微信运动步数，对应接口 [Taro.getWeRunData](/docs/apis/open-api/werun/getWeRunData)

property 'scope.writePhotosAlbum'

'scope.writePhotosAlbum'?: boolean;

是否授权保存到相册 [Taro.saveImageToPhotosAlbum](/docs/apis/media/image/saveImageToPhotosAlbum), [Taro.saveVideoToPhotosAlbum](/docs/apis/media/video/saveVideoToPhotosAlbum)

interface BackgroundAudioManager

interface BackgroundAudioManager {}

BackgroundAudioManager 实例，可通过 [Taro.getBackgroundAudioManager](/docs/apis/media/background-audio/getBackgroundAudioManager) 获取。

Example 1

const backgroundAudioManager = Taro.getBackgroundAudioManager()
backgroundAudioManager.title = '此时此刻'
backgroundAudioManager.epname = '此时此刻'
backgroundAudioManager.singer = '许巍'
backgroundAudioManager.coverImgUrl = 'https://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000'
// 设置了 src 之后会自动播放
backgroundAudioManager.src = 'https://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'

property buffered

buffered: number;

音频已缓冲的时间，仅保证当前播放时间点到此时间点内容已缓冲。
Modifiers
- @readonly

property coverImgUrl

coverImgUrl: string;

封面图 URL，用于做原生音频播放器背景图。原生音频播放器中的分享功能，分享出去的卡片配图及背景也将使用该图。

property currentTime

currentTime: number;

当前音频的播放位置（单位：s），只有在有合法 src 时返回。
Modifiers
- @readonly

property duration

duration: number;

当前音频的长度（单位：s），只有在有合法 src 时返回。
Modifiers
- @readonly

property epname

epname: string;

专辑名，原生音频播放器中的分享功能，分享出去的卡片简介，也将使用该值。

property paused

paused: boolean;

当前是否暂停或停止。
Modifiers
- @readonly

property playbackRate

playbackRate?: number;

播放速度。范围 0.5-2.0。 1

property protocol

protocol: string;

音频协议。默认值为 'http'，设置 'hls' 可以支持播放 HLS 协议的直播音频。

property referrerPolicy

referrerPolicy?: 'origin' | 'no-referrer' | string;

origin: 发送完整的 referrer; no-referrer: 不发送

property singer

singer: string;

歌手名，原生音频播放器中的分享功能，分享出去的卡片简介，也将使用该值。

property src

src: string;

音频的数据源（[2.2.3](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) 开始支持云文件ID）。默认为空字符串，**当设置了新的 src 时，会自动开始播放**，目前支持的格式有 m4a, aac, mp3, wav。

property startTime

startTime: number;

音频开始播放的位置（单位：s）。

property title

title: string;

音频标题，用于原生音频播放器音频标题（必填）。原生音频播放器中的分享功能，分享出去的卡片标题，也将使用该值。

property webUrl

webUrl: string;

页面链接，原生音频播放器中的分享功能，分享出去的卡片简介，也将使用该值。

method onCanplay

onCanplay: (callback?: () => void) => void;

背景音频进入可以播放状态，但不保证后面可以流畅播放

method onEnded

onEnded: (callback?: () => void) => void;

背景音频自然播放结束事件

method onError

onError: (callback?: () => void) => void;

背景音频播放错误事件

method onNext

onNext: (callback?: () => void) => void;

用户在系统音乐播放面板点击下一曲事件（iOS only）

method onPause

onPause: (callback?: () => void) => void;

背景音频暂停事件

method onPlay

onPlay: (callback?: () => void) => void;

背景音频播放事件

method onPrev

onPrev: (callback?: () => void) => void;

用户在系统音乐播放面板点击上一曲事件（iOS only）

method onSeeked

onSeeked: (callback?: () => void) => void;

背景音频完成跳转操作事件

method onSeeking

onSeeking: (callback?: () => void) => void;

背景音频开始跳转操作事件

method onStop

onStop: (callback?: () => void) => void;

背景音频停止事件

method onTimeUpdate

onTimeUpdate: (callback?: () => void) => void;

背景音频播放进度更新事件

method onWaiting

onWaiting: (callback?: () => void) => void;

音频加载中事件，当音频因为数据不足，需要停下来加载时会触发

method pause

pause: () => void;

暂停

method play

play: () => void;

播放

method seek

seek: (position: any) => void;

跳转到指定位置，单位 s

method stop

stop: () => void;

停止

interface BLEPeripheralServer

interface BLEPeripheralServer {}

外围设备的服务端 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/device/bluetooth-peripheral/BLEPeripheralServer.html

method addService

addService: (
    option: BLEPeripheralServer.addService.Option
) => Promise<TaroGeneral.BluetoothError>;

添加服务 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/device/bluetooth-peripheral/BLEPeripheralServer.addService.html

method close

close: (
    option: BLEPeripheralServer.close.Option
) => Promise<TaroGeneral.BluetoothError>;

关闭当前服务端 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/device/bluetooth-peripheral/BLEPeripheralServer.close.html

method offCharacteristicReadRequest

offCharacteristicReadRequest: (
    callback: BLEPeripheralServer.onCharacteristicReadRequest.Callback
) => void;

取消监听已连接的设备请求读当前外围设备的特征值事件 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/device/bluetooth-peripheral/BLEPeripheralServer.offCharacteristicReadRequest.html

method offCharacteristicSubscribed

offCharacteristicSubscribed: (
    callback: BLEPeripheralServer.onCharacteristicSubscribed.Callback
) => void;

取消监听特征订阅事件 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/device/bluetooth-peripheral/BLEPeripheralServer.offCharacteristicSubscribed.html

method offCharacteristicUnsubscribed

offCharacteristicUnsubscribed: (
    callback: BLEPeripheralServer.onCharacteristicUnsubscribed.Callback
) => void;

取消监听取消特征订阅事件 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/device/bluetooth-peripheral/BLEPeripheralServer.offCharacteristicUnsubscribed.html

method offCharacteristicWriteRequest

offCharacteristicWriteRequest: (
    callback: BLEPeripheralServer.onCharacteristicWriteRequest.Callback
) => void;

取消监听已连接的设备请求写当前外围设备的特征值事件 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/device/bluetooth-peripheral/BLEPeripheralServer.offCharacteristicWriteRequest.html

method onCharacteristicReadRequest

onCharacteristicReadRequest: (
    callback: BLEPeripheralServer.onCharacteristicReadRequest.Callback
) => void;

监听已连接的设备请求读当前外围设备的特征值事件
收到该消息后需要立刻调用 [writeCharacteristicValue](/docs/apis/device/bluetooth-peripheral/BLEPeripheralServer#writecharacteristicvalue) 写回数据，否则主机不会收到响应。 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/device/bluetooth-peripheral/BLEPeripheralServer.onCharacteristicReadRequest.html

method onCharacteristicSubscribed

onCharacteristicSubscribed: (
    callback: BLEPeripheralServer.onCharacteristicSubscribed.Callback
) => void;

监听特征订阅事件，仅 iOS 支持 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/device/bluetooth-peripheral/BLEPeripheralServer.onCharacteristicSubscribed.html

method onCharacteristicUnsubscribed

onCharacteristicUnsubscribed: (
    callback: BLEPeripheralServer.onCharacteristicUnsubscribed.Callback
) => void;

监听取消特征订阅事件，仅 iOS 支持 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/device/bluetooth-peripheral/BLEPeripheralServer.onCharacteristicUnsubscribed.html

method onCharacteristicWriteRequest

onCharacteristicWriteRequest: (
    callback: BLEPeripheralServer.onCharacteristicWriteRequest.Callback
) => void;

监听已连接的设备请求写当前外围设备的特征值事件 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/device/bluetooth-peripheral/BLEPeripheralServer.onCharacteristicWriteRequest.html

method removeService

removeService: (
    option: BLEPeripheralServer.removeService.Option
) => Promise<TaroGeneral.BluetoothError>;

移除服务 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/device/bluetooth-peripheral/BLEPeripheralServer.removeService.html

method startAdvertising

startAdvertising: (
    option: BLEPeripheralServer.startAdvertising.Option
) => Promise<TaroGeneral.BluetoothError>;

开始广播本地创建的外围设备 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/device/bluetooth-peripheral/BLEPeripheralServer.startAdvertising.html

method stopAdvertising

stopAdvertising: (
    option: BLEPeripheralServer.stopAdvertising.Option
) => Promise<TaroGeneral.BluetoothError>;

停止广播 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/device/bluetooth-peripheral/BLEPeripheralServer.stopAdvertising.html

method writeCharacteristicValue

writeCharacteristicValue: (
    option: BLEPeripheralServer.writeCharacteristicValue.Option
) => Promise<TaroGeneral.BluetoothError>;

往指定特征写入二进制数据值，并通知已连接的主机，从机的特征值已发生变化，该接口会处理是走回包还是走订阅 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/device/bluetooth-peripheral/BLEPeripheralServer.writeCharacteristicValue.html

interface CameraContext

interface CameraContext {}

See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/media/camera/CameraContext.html

method onCameraFrame

onCameraFrame: (
    callback: CameraContext.OnCameraFrameCallback
) => CameraFrameListener;

获取 Camera 实时帧数据
****
注：使用该接口需同时在 [camera](/docs/components/media/camera) 组件属性中指定 frame-size。 weapp
Example 1
const context = wx.createCameraContext() const listener = context.onCameraFrame((frame) => { console.log(frame.data instanceof ArrayBuffer, frame.width, frame.height) }) listener.start()
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/media/camera/CameraContext.onCameraFrame.html

method setZoom

setZoom: (option: CameraContext.SetZoomOption) => void;

设置缩放级别 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/media/camera/CameraContext.setZoom.html

method startRecord

startRecord: (option: CameraContext.StartRecordOption) => void;

开始录像 weapp, rn
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/media/camera/CameraContext.startRecord.html

method stopRecord

stopRecord: (option?: CameraContext.StopRecordOption) => void;

结束录像 weapp, rn
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/media/camera/CameraContext.stopRecord.html

method takePhoto

takePhoto: (option: CameraContext.TakePhotoOption) => void;

拍摄照片 weapp, rn
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/media/camera/CameraContext.takePhoto.html

interface CameraFrameListener

interface CameraFrameListener {}

CameraContext.onCameraFrame() 返回的监听器。
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/media/camera/CameraFrameListener.html

method start

start: (option?: CameraFrameListener.StartOption) => void;

开始监听帧数据 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/media/camera/CameraFrameListener.start.html

method stop

stop: (option?: CameraFrameListener.StopOption) => void;

停止监听帧数据 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/media/camera/CameraFrameListener.stop.html

interface Canvas

interface Canvas {}

Canvas 实例，可通过 SelectorQuery 获取。
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.html

property height

height: number;

画布高度

property width

width: number;

画布宽度

method cancelAnimationFrame

cancelAnimationFrame: (requestID: number) => void;

取消由 requestAnimationFrame 添加到计划中的动画帧请求。支持在 2D Canvas 和 WebGL Canvas 下使用, 但不支持混用 2D 和 WebGL 的方法。 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.cancelAnimationFrame.html

method createImage

createImage: () => Image;

创建一个图片对象。支持在 2D Canvas 和 WebGL Canvas 下使用, 但不支持混用 2D 和 WebGL 的方法。 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.createImage.html

method createImageData

createImageData: () => ImageData;

创建一个 ImageData 对象。仅支持在 2D Canvas 中使用。 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.createImageData.html

method createPath2D

createPath2D: (path: Path2D) => Path2D;

创建 Path2D 对象 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Path2D.html

method getContext

getContext: (contextType: string) => RenderingContext;

支持获取 2D 和 WebGL 绘图上下文 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.getContext.html

method requestAnimationFrame

requestAnimationFrame: (callback: (...args: any[]) => any) => number;

在下次进行重绘时执行。支持在 2D Canvas 和 WebGL Canvas 下使用, 但不支持混用 2D 和 WebGL 的方法。 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.requestAnimationFrame.html

method toDataURL

toDataURL: (type: string, encoderOptions: number) => string;

返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.toDataURL.html

interface CanvasContext

interface CanvasContext {}

canvas 组件的绘图上下文
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.html

property fillStyle

fillStyle: string;

填充颜色。用法同 [CanvasContext.setFillStyle()]。

property font

font: string;

当前字体样式的属性。符合 [CSS font 语法](https://developer.mozilla.org/zh-CN/docs/Web/CSS/font) 的 DOMString 字符串，至少需要提供字体大小和字体族名。默认值为 10px sans-serif。

property globalAlpha

globalAlpha: number;

全局画笔透明度。范围 0-1，0 表示完全透明，1 表示完全不透明。

property globalCompositeOperation

globalCompositeOperation: string;

在绘制新形状时应用的合成操作的类型。目前安卓版本只适用于 fill 填充块的合成，用于 stroke 线段的合成效果都是 source-over。
目前支持的操作有 - 安卓：xor, source-over, source-atop, destination-out, lighter, overlay, darken, lighten, hard-light - iOS：xor, source-over, source-atop, destination-over, destination-out, lighter, multiply, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, saturation, luminosity

property lineCap

lineCap: keyof CanvasContext.LineCap;

线条的端点样式。用法同 [CanvasContext.setLineCap()]。

property lineDashOffset

lineDashOffset: number;

虚线偏移量，初始值为0

property lineJoin

lineJoin: keyof CanvasContext.LineJoin;

线条的交点样式。用法同 [CanvasContext.setLineJoin()]。

property lineWidth

lineWidth: number;

线条的宽度。用法同 [CanvasContext.setLineWidth()]。

property miterLimit

miterLimit: number;

最大斜接长度。用法同 [CanvasContext.setMiterLimit()]。

property shadowBlur

shadowBlur: number;

阴影的模糊级别

property shadowColor

shadowColor: string;

阴影的颜色

property shadowOffsetX

shadowOffsetX: number;

阴影相对于形状在水平方向的偏移

property shadowOffsetY

shadowOffsetY: number;

阴影相对于形状在竖直方向的偏移

property strokeStyle

strokeStyle: string;

边框颜色。用法同 [CanvasContext.setFillStyle()]。

method arc

arc: (
    x: number,
    y: number,
    r: number,
    sAngle: number,
    eAngle: number,
    counterclockwise?: boolean
) => void;

创建一条弧线。

- 创建一个圆可以指定起始弧度为 0，终止弧度为 2 * Math.PI。 - 用 stroke 或者 fill 方法来在 canvas 中画弧线。

针对 arc(100, 75, 50, 0, 1.5 * Math.PI)的三个关键坐标如下：

- 绿色: 圆心 (100, 75) - 红色: 起始弧度 (0) - 蓝色: 终止弧度 (1.5 * Math.PI) weapp

Example 1

const ctx = Taro.createCanvasContext('myCanvas')
// Draw coordinates
ctx.arc(100, 75, 50, 0, 2 * Math.PI)
ctx.setFillStyle('#EEEEEE')
ctx.fill()
ctx.beginPath()
ctx.moveTo(40, 75)
ctx.lineTo(160, 75)
ctx.moveTo(100, 15)
ctx.lineTo(100, 135)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()
ctx.setFontSize(12)
ctx.setFillStyle('black')
ctx.fillText('0', 165, 78)
ctx.fillText('0.5*PI', 83, 145)
ctx.fillText('1*PI', 15, 78)
ctx.fillText('1.5*PI', 83, 10)
// Draw points
ctx.beginPath()
ctx.arc(100, 75, 2, 0, 2 * Math.PI)
ctx.setFillStyle('lightgreen')
ctx.fill()
ctx.beginPath()
ctx.arc(100, 25, 2, 0, 2 * Math.PI)
ctx.setFillStyle('blue')
ctx.fill()
ctx.beginPath()
ctx.arc(150, 75, 2, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()
// Draw arc
ctx.beginPath()
ctx.arc(100, 75, 50, 0, 1.5 * Math.PI)
ctx.setStrokeStyle('#333333')
ctx.stroke()
ctx.draw()

method arcTo

arcTo: (x1: number, y1: number, x2: number, y2: number, radius: number) => void;

根据控制点和半径绘制圆弧路径。 weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.arcTo.html

method beginPath

beginPath: () => void;

开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边

- 在最开始的时候相当于调用了一次 beginPath。 - 同一个路径内的多次 setFillStyle、setStrokeStyle、setLineWidth等设置，以最后一次设置为准。 weapp

Example 1

const ctx = Taro.createCanvasContext('myCanvas')
// begin path
ctx.rect(10, 10, 100, 30)
ctx.setFillStyle('yellow')
ctx.fill()
// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)
// only fill this rect, not in current path
ctx.setFillStyle('blue')
ctx.fillRect(10, 70, 100, 30)
ctx.rect(10, 100, 100, 30)
// it will fill current path
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()

method bezierCurveTo

bezierCurveTo: (
    cp1x: number,
    cp1y: number,
    cp2x: number,
    cp2y: number,
    x: number,
    y: number
) => void;

创建三次方贝塞尔曲线路径。曲线的起始点为路径中前一个点。

针对 moveTo(20, 20) bezierCurveTo(20, 100, 200, 100, 200, 20) 的三个关键坐标如下：

- 红色：起始点(20, 20) - 蓝色：两个控制点(20, 100) (200, 100) - 绿色：终止点(200, 20) weapp

Example 1

const ctx = Taro.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()

method clearRect

clearRect: (x: number, y: number, width: number, height: number) => void;

清除画布上在该矩形区域内的内容 weapp

Example 1

clearRect 并非画一个白色的矩形在地址区域，而是清空，为了有直观感受，对 canvas 加了一层背景色。

<canvas canvas-id="myCanvas" style="border: 1px solid; background: #123456;"/>

const ctx = Taro.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(0, 0, 150, 200)
ctx.setFillStyle('blue')
ctx.fillRect(150, 0, 150, 200)
ctx.clearRect(10, 10, 150, 75)
ctx.draw()

method clip

clip: () => void;

从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。可以在使用 clip 方法前通过使用 save 方法对当前画布区域进行保存，并在以后的任意时间通过restore方法对其进行恢复。 weapp
Example 1
const ctx = Taro.createCanvasContext('myCanvas') Taro.downloadFile({ url: 'http://is5.mzstatic.com/image/thumb/Purple128/v4/75/3b/90/753b907c-b7fb-5877-215a-759bd73691a4/source/50x50bb.jpg', success: function(res) { ctx.save() ctx.beginPath() ctx.arc(50, 50, 25, 0, 2*Math.PI) ctx.clip() ctx.drawImage(res.tempFilePath, 25, 25) ctx.restore() ctx.draw() } })
See Also
- https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.clip.html

method closePath

closePath: () => void;

关闭一个路径。会连接起点和终点。如果关闭路径后没有调用 fill 或者 stroke 并开启了新的路径，那之前的路径将不会被渲染。 weapp

Example 1

const ctx = Taro.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.closePath()
ctx.stroke()
ctx.draw()

Example 2

const ctx = Taro.createCanvasContext('myCanvas')
// begin path
ctx.rect(10, 10, 100, 30)
ctx.closePath()
// begin another path
ctx.beginPath()
ctx.rect(10, 40

@tarojs/taro

Install

Overview

Index

Variables

Interfaces

Type Aliases

Namespaces

Variables

variable Taro

Interfaces

interface AddToFavoritesObject

property webviewUrl

interface AddToFavoritesReturnObject

property imageUrl

property query

property title

interface Animation

See Also

method backgroundColor

See Also

method bottom

See Also

method export

See Also

method height

See Also

method left

See Also

method matrix

See Also

method matrix3d

See Also

method opacity

See Also

method right

See Also

method rotate

See Also

method rotate3d

See Also

method rotateX

See Also

method rotateY

See Also

method rotateZ

See Also

method scale

See Also

method scale3d

See Also

method scaleX

See Also

method scaleY

See Also

method scaleZ

See Also

method skew

See Also

method skewX

See Also

method skewY

See Also

method step

See Also

method top

See Also

method translate

See Also

method translate3d

See Also

method translateX

See Also

method translateY

See Also

method translateZ

See Also

method width

See Also

interface App