0.1.7 • Published 1 year ago
uni-app-types v0.1.7
DEPRECATED uni-app-types
该依赖已废弃，请迁移到功能一致的 @uni-helper/uni-app-types。
uni-app 组件类型。uni-cloud-types 提供 uni-cloud 组件类型，uni-ui-types 提供 uni-ui 组件类型。
安装 Volar 之后，建议启用 Volar 的 Take Over Mode。如果不想启用 Take Over Mode，可以安装 TypeScript Vue Plugin (Volar)。启用或安装后需要重启 VSCode。
维护直到官方类型推出。
类型和文档的冲突之处，请以文档为准。
类型源代码在 ModyQyW/uni-helper。欢迎提交 ISSUE 和 PR 改进类型。
使用
- 安装依赖
npm i -D uni-app-types- 配置
tsconfig.json，确保compilerOptions.types中含有@dcloudio/types和uni-app-types且include包含了对应的vue文件
{
"compilerOptions": {
"types": ["@dcloudio/types", "uni-app-types"]
},
"vueCompilerOptions": {
"experimentalRuntimeMode": "runtime-uni-app"
},
"include": ["src/**/*.vue"]
}- 重启编辑器 / IDE
类型
BaseEventTarget
/**
* @desc 触发事件的组件的一些属性值集合
*/
export interface BaseEventTarget {
/**
* @desc 事件源组件的id
*/
id?: string;
/**
* @desc 事件源组件上由 data- 开头的自定义属性组成的集合
*/
dataset?: Record<string, any>;
[key: string]: any;
}BaseEventCurrentTarget
/**
* @desc 当前组件的一些属性值集合
*/
export interface BaseEventCurrentTarget extends BaseEventTarget {}BaseEvent
/**
* @desc 基础事件
*/
export interface BaseEvent {
/**
* @desc 事件类型
*/
type?: string;
/**
* @desc 事件生成时的时间戳
*/
timeStamp?: number;
/**
* @desc 触发事件的组件的一些属性值集合
*/
target?: BaseEventTarget;
/**
* @desc 当前组件的一些属性值集合
*/
currentTarget?: BaseEventCurrentTarget;
/**
* @desc 事件标记数据
*/
mark?: Record<string, any>;
[key: string]: any;
}CustomEvent
/**
* @desc 自定义事件
*/
export interface CustomEvent<T = Record<string, any>> extends BaseEvent {
/**
* @desc 额外信息
*/
detail?: T;
[key: string]: any;
}TouchEventTouch
/**
* @desc 当前停留在屏幕中的触摸点信息
*/
export interface TouchEventTouch {
/**
* @desc 标志符
*/
identifier?: number;
/**
* @desc 距离文档左上角的横向距离
*/
pageX?: number;
/**
* @desc 距离文档左上角的纵向距离
*/
pageY?: number;
/**
* @desc 距离页面可显示区域（屏幕除去导航条）左上角的横向距离
*/
clientX?: number;
/**
* @desc 距离页面可显示区域（屏幕除去导航条）左上角的纵向距离
*/
clientY?: number;
}TouchEventCanvasTouch
/**
* @desc 当前停留在 canvas 中的触摸点信息
*/
export interface TouchEventCanvasTouch {
/**
* @desc 标志符
*/
identifier?: number;
/**
* @desc 距离 canvas 左上角的横向距离
*/
x?: number;
/**
* @desc 距离 canvas 左上角的纵向距离
*/
y?: number;
}TouchEventChangedTouch
/**
* @desc 当前变化的屏幕触摸点信息
*/
export interface TouchEventChangedTouch extends TouchEventTouch {}TouchEventCanvasChangedTouch
/**
* @desc 当前变化的 canvas 触摸点信息
*/
export interface TouchEventCanvasChangedTouch extends TouchEventCanvasTouch {}TouchEvent
/**
* @desc 触摸事件
*/
export interface TouchEvent<T = TouchEventTouch, D = TouchEventChangedTouch> extends BaseEvent {
touches: T[];
changedTouches: D[];
}Block (block)
/**
* @desc 包装元素，不会在页面中做任何渲染，只接受控制属性
* @desc 支持在 template 模板中嵌套 template 和 block
* @desc 在不同的平台表现存在一定差异，推荐统一使用 template
*/
export type Block = Component;View (view)
export interface ViewProps {
/**
* @desc 指定按下去的样式类
* @desc 当 hover-class="none" 时，没有点击态效果
* @desc 默认为 none
*/
hoverClass: string;
/**
* @desc 指定是否阻止本节点的祖先节点出现点击态
* @desc 默认为 false
*/
hoverStopPropagation: boolean;
/**
* @desc 按住后多久出现点击态
* @desc 单位为毫秒
* @desc 默认为 50
*/
hoverStartTime: number;
/**
* @desc 手指松开后点击态保留时间
* @desc 单位为毫秒
* @desc 默认为 400
*/
hoverStayTime: number;
}
/**
* @desc 视图容器，和 div 类似，用于包裹各种元素内容
* @desc 包裹文字建议使用 text
* @desc 如果使用 div，会编译成 view
*/
export type View = Component<Partial<ViewProps>>;ScrollView (scroll-view)
export interface ScrollViewProps {
/**
* @desc 是否允许横向滚动
* @desc 默认为 false
*/
scrollX: boolean;
/**
* @desc 是否允许纵向滚动
* @desc 默认为 false
*/
scrollY: boolean;
/**
* @desc 距顶部/左边多远时触发 scrolltoupper 事件
* @desc 单位为 px
* @desc 默认为 50
*/
upperThreshold: number | string;
/**
* @desc 距底部/右边多远时触发 scrolltolower 事件
* @desc 单位为 px
* @desc 默认为 50
*/
lowerThreshold: number | string;
/**
* @desc 设置纵向滚动条位置
* @desc 优先级低于 scroll-into-view
*/
scrollTop: number | string;
/**
* @decs 设置横向滚动条位置
* @desc 优先级低于 scroll-into-view
*/
scrollLeft: number | string;
/**
* @desc 值应为某子元素 id，id 不能以数字开头
* @desc 设置哪个方向可滚动，则在哪个方向滚动到该元素
* @desc 优先级高于 scroll-top / scroll-left
*/
scrollIntoView: string;
/**
* @desc 在设置滚动条位置时是否使用动画过渡
* @desc 默认为 false
*/
scrollWithAnimation: boolean;
/**
* @desc 是否允许 iOS 点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部
* @desc 只支持纵向
* @desc 默认为 false
*/
enableBackToTop: boolean;
/**
* @desc 控制是否出现滚动条
* @desc 默认为 false
*/
showScrollbar: boolean;
/**
* @desc 是否开启自定义下拉刷新
* @desc 默认为 false
*/
refresherEnabled: boolean;
/**
* @desc 设置自定义下拉刷新阈值
* @desc 默认为 45
*/
refresherThreshold: number;
/**
* @desc 设置自定义下拉刷新默认样式
* @desc none 不使用默认样式
* @desc 默认为 black
*/
refresherDefaultStyle: 'black' | 'white' | 'none';
/**
* @desc 自定义下拉刷新区域背景颜色
* @desc 默认为 #FFF
*/
refresherBackground: string;
/**
* @desc 设置当前下拉刷新状态
* @desc true 下拉刷新已经被触发
* @desc false 下拉刷新未被触发
* @desc 默认为 false
*/
refresherTriggered: boolean;
/**
* @desc 是否启用 flexbox 布局
* @desc 开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其子节点
* @desc 默认为 false
*/
enableFlex: boolean;
/**
* @desc 是否开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效
* @desc 安卓下可参考 CSS overflow-anchor 属性
* @desc 默认为 false
*/
scrollAnchoring: boolean;
/**
* @desc 滚动到顶部/左边时触发
*/
onScrolltoupper: (event: BaseEvent) => void;
/**
* @desc 滚动到底部/右边时触发
*/
onScrolltolower: (event: BaseEvent) => void;
/**
* @desc 滚动时触发
*/
onScroll: (
event: CustomEvent<{
scrollLeft: number;
scrollTop: number;
scrollHeight: number;
scrollWidth: number;
deltaX: number;
deltaY: number;
}>,
) => void;
/**
* @desc 自定义下拉刷新控件被下拉时触发
*/
onRefresherpulling: (event: BaseEvent) => void;
/**
* @desc 自定义下拉刷新被触发时触发
*/
onRefresherrefresh: (event: BaseEvent) => void;
/**
* @desc 自定义下拉刷新被复位时触发
*/
onRefresherrestore: (event: BaseEvent) => void;
/**
* @desc 自定义下拉刷新被中止时触发
*/
onRefresherabort: (event: BaseEvent) => void;
}
/**
* @desc 可滚动视图区域，用于区域滚动
* @desc 在 webview 渲染的页面中，区域滚动的性能不及页面滚动
* @desc 纵向滚动时，需要给 scroll-view 一个固定高度，通过 css 设置 height
* @desc 横向滚动时，需要给 scroll-view 添加 white-space: nowrap; 样式
* @desc scroll-view 是区域滚动，不会触发页面滚动，无法触发 pages.json 配置的下拉刷新、页面触底onReachBottomDistance、titleNView 的 transparent 透明渐变
*/
export type ScrollView = Component<Partial<ScrollViewProps>>;Swiper (swiper)
/**
* @desc 导致变更的原因
* @desc autoplay 自动播放
* @desc touch 用户滑动
* @desc 空字符串 其它原因
*/
export type SwiperSource = 'autoplay' | 'touch' | '';
/**
* @desc swiper 切换缓动动画类型
*/
export type SwiperEasingFunction =
| 'default'
| 'linear'
| 'easeInCubic'
| 'easeOutCubic'
| 'easeInOutCubic';
export interface SwiperProps {
/**
* @desc 是否显示面板指示点
* @desc 默认为 false
*/
indicatorDots: boolean;
/**
* @desc 指示点颜色
* @desc 默认为 rgba(0, 0, 0, 0.3)
*/
indicatorColor: string;
/**
* @desc 当前选中的指示点颜色
* @desc 默认为 #000000
*/
indicatorActiveColor: string;
/**
* @desc swiper-item 可见时的 class
*/
activeClass: string;
/**
* @desc acceleration 设置为 true 时且处于滑动过程中，中间若干屏处于可见时的 class
*/
changingClass: boolean;
/**
* @desc 是否自动切换
* @desc 默认为 false
*/
autoplay: boolean;
/**
* @desc 当前所在滑块的下标
* @desc 默认为 0
*/
current: number;
/**
* @desc 当前所在滑块的 item-id ，不能与 current 被同时指定
*/
currentItemId: string;
/**
* @desc 自动切换时间间隔
* @desc 默认为 5000
*/
interval: number;
/**
* @desc 滑动动画时长
* @desc 默认为 500
*/
duration: number;
/**
* @desc 是否采用衔接滑动，即播放到末尾后重新回到开头
* @desc 默认为 false
*/
circular: boolean;
/**
* @desc 滑动方向是否为纵向
* @desc 默认为 false
*/
vertical: boolean;
/**
* @desc 前边距，可用于露出前一项的一小部分
* @desc 接受 px 和 rpx 值
* @desc 默认为 0px
*/
previousMargin: string;
/**
* @desc 后边距，可用于露出后一项的一小部分
* @desc 接受 px 和 rpx 值
* @desc 默认为 0px
*/
nextMargin: string;
/**
* @desc 当开启时，会根据滑动速度，连续滑动多屏
* @desc 默认 false
*/
acceleration: boolean;
/**
* @desc 是否禁用代码变动触发 swiper 切换时使用动画
* @desc 默认为 false
*/
disableProgrammaticAnimation: boolean;
/**
* @desc 同时显示的滑块数量
* @desc 默认为 1
*/
displayMultipleItems: number;
/**
* @desc 是否跳过未显示的滑块布局
* @desc 设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息
* @desc 默认为 false
*/
skipHiddenItemLayout: boolean;
/**
* @desc 是否禁止用户 touch 操作
* @desc 默认为 false
*/
disableTouch: boolean;
/**
* @desc 是否监听用户的触摸事件
* @desc 只在初始化时有效，不支持动态修改
* @desc 默认为 true
*/
touchable: boolean;
/**
* @desc 指定 swiper 切换缓动动画类型
* @desc 默认为 default
*/
easingFunction: SwiperEasingFunction;
/**
* @desc current 改变时触发
*/
onChange: (
event: CustomEvent<{
/**
* @desc 当前所在滑块的下标
*/
current: number;
/**
* @desc 导致变更的原因
* @desc autoplay 自动播放
* @desc touch 用户滑动
* @desc 空字符串 其它原因
*/
source: SwiperSource;
}>,
) => void;
/**
* @desc swiper-item 位置改变时触发
*/
onTransition: (
event: CustomEvent<{
dx?: number;
dy?: number;
}>,
) => void;
/**
* @desc 动画结束时触发
*/
onAnimationfinish: (
event: CustomEvent<{
/**
* @desc 当前所在滑块的下标
*/
current: number;
/**
* @desc 导致变更的原因
* @desc autoplay 自动播放
* @desc touch 用户滑动
* @desc 空字符串其它原因
*/
source: SwiperSource;
}>,
) => void;
}
/**
* @desc 滑块视图容器，一般用于左右滑动或上下滑动，比如 banner 轮播图
* @desc 注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换
* @desc swiper 下的每个 swiper-item 是一个滑动切换区域，不能停留在 2 个滑动区域之间
*/
export type Swiper = Component<Partial<SwiperProps>>;SwiperItem (swiper-item)
export interface SwiperItemProps {
/**
* @desc 标识符
*/
itemId: string;
}
/**
* @desc swiper 直接子组件，宽高自动设置为父组件的 100%
* @desc 不能被子组件自动撑开
*/
export type SwiperItem = Component<Partial<SwiperItemProps>>;MatchMedia (match-media)
/**
* @desc 屏幕方向
* @desc landscape 横向
* @desc portrait 纵向
*/
export type MatchMediaOrientation = 'landscape' | 'portrait';
export interface MatchMediaProps {
/**
* @desc 页面最小宽度
* @desc 单位为 px
*/
minWidth: number;
/**
* @desc 页面最大宽度
* @desc 单位为 px
*/
maxWidth: number;
/**
* @desc 页面宽度
* @desc 单位为 px
*/
width: number;
/**
* @desc 页面最小高度
* @desc 单位为 px
*/
minHeight: number;
/**
* @desc 页面最大高度
* @desc 单位为 px
*/
maxHeight: number;
/**
* @desc 页面高度
* @desc 单位为 px
*/
height: number;
/**
* @desc 屏幕方向
* @desc landscape 横向
* @desc portrait 纵向
*/
orientation: MatchMediaOrientation;
}
/**
* @desc media query 匹配检测节点
* @desc 类似于网页开发中使用媒体查询来适配大屏小屏，这是一个可适配不同屏幕的基本视图组件
* @desc 可以指定一组 media query 媒体查询规则，满足查询条件时，这个组件才会被展示
*/
export type MatchMedia = Component<Partial<MatchMediaProps>>;MovableArea (movable-area)
export interface MovableAreaProps {
/**
* @desc 当里面的 movable-view 设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个 movable-area
* @desc 默认为 false
*/
scaleArea: boolean;
}
/**
* @desc 可拖动区域
* @desc movable-area 指代可拖动的范围，在其中内嵌 movable-view 组件用于指示可拖动的区域
* @desc 即手指/鼠标按住 movable-view 拖动或双指缩放，但拖不出 movable-area 规定的范围
* @desc 也可以不拖动，而使用代码来触发 movable-view 在 movable-area 里的移动缩放
* @desc 默认宽高为 10px
*/
export type MovableArea = Component<Partial<MovableAreaProps>>;MovableView (movable-view)
/**
* @desc movable-view 的移动方向
*/
export type MovableViewDirection = 'all' | 'vertical' | 'horizontal' | 'none';
/**
* @desc movable-view 产生移动的原因
* @desc touch 拖动
* @desc touch-out-of-bounds 超出移动范围
* @desc out-of-bounds 超出移动范围后的回弹
* @desc friction 惯性
* @desc 空字符串 setData
*/
export type MovableViewSource = 'touch' | 'touch-out-of-bounds' | 'out-of-bounds' | 'friction' | '';
export interface MovableViewProps {
/**
* @desc movable-view 的移动方向
* @desc 默认为 none
*/
direction: MovableViewDirection;
/**
* @desc 是否带有惯性
* @desc 默认为 false
*/
inertia: boolean;
/**
* @desc 超过可移动区域后，是否还可以移动
* @desc 默认为 false
*/
outOfBounds: boolean;
/**
* @desc 定义 x 轴方向的偏移
* @desc 如果 x 的值不在可移动范围内，会自动移动到可移动范围
* @desc 改变 x 的值会触发动画
*/
x: string | number;
/**
* @desc 定义 y 轴方向的偏移
* @desc 如果 y 的值不在可移动范围内，会自动移动到可移动范围
* @desc 改变 y 的值会触发动画
*/
y: string | number;
/**
* @desc 阻尼系数，用于控制 x 或 y 改变时的动画和过界回弹的动画
* @desc 值越大移动越快
* @desc 默认为 20
*/
damping: number;
/**
* @desc 摩擦系数，用于控制惯性滑动的动画
* @desc 值越大摩擦力越大，滑动越快停止
* @desc 必须大于 0，否则会被设置成默认值
* @desc 默认为 2
*/
friction: number;
/**
* @desc 是否禁用
* @desc 默认为 false
*/
disabled: boolean;
/**
* @desc 是否支持双指缩放
* @desc 默认缩放手势生效区域是在 movable-view 内
* @desc 默认为 false
*/
scale: boolean;
/**
* @desc 定义缩放倍数最小值
* @desc 默认为 0.5
*/
scaleMin: number;
/**
* @desc 定义缩放倍数最大值
* @desc 默认为 10
*/
scaleMax: number;
/**
* @desc 定义缩放倍数
* @desc 取值范围为 0.5 - 10
* @desc 默认为 1
*/
scaleValue: number;
/**
* @desc 是否使用动画
* @desc 默认为 true
*/
animation: boolean;
/**
* @desc 拖动过程中触发
*/
onChange: (
event: CustomEvent<{
x: number;
y: number;
/**
* @desc movable-view 产生移动的原因
* @desc touch 拖动
* @desc touch-out-of-bounds 超出移动范围
* @desc out-of-bounds 超出移动范围后的回弹
* @desc friction 惯性
* @desc 空字符串 setData
*/
source: MovableViewChangeSource;
}>,
) => void;
/**
* @desc 缩放过程中触发
*/
onScale: (
event: CustomEvent<{
x: number;
y: number;
/**
* @desc 是否支持双指缩放
* @desc 默认缩放手势生效区域是在 movable-view 内
*/
scale: boolean;
}>,
) => void;
}
/**
* @desc 可移动的视图容器，在页面中可以拖拽滑动或双指缩放
* @desc movable-area 直接子组件
*/
export type MovableView = Component<Partial<MovableViewProps>>;CoverView (cover-view)
export interface CoverViewProps {
/**
* @desc 设置顶部滚动偏移量
* @desc 仅在设置了 overflow-y: scroll 成为滚动元素后生效
*/
scrollTop: number | string;
}
/**
* @desc 覆盖在原生组件之上的文本视图
* @desc app-vue 和小程序框架，渲染引擎是 webview
* @desc 为了优化体验，部分组件如 map、video、textarea、canvas 通过原生控件实现，原生组件层级高于前端组件
* @desc 为了能正常覆盖原生组件，设计了 cover-view
*/
export type CoverView = Component<Partial<CoverViewProps>>;CoverImage (cover-image)
export interface CoverImageProps {
/**
* @desc 图片路径
* @desc 支持本地路径、网络路径
* @desc 不支持 base64 格式
*/
src: string;
/**
* @desc 图片加载成功时触发
*/
onLoad: (event: BaseEvent) => void;
/**
* @desc 图片加载失败时触发
*/
onError: (event: BaseEvent) => void;
}
/**
* @desc 覆盖在原生组件之上的图片视图
* @desc 可覆盖的原生组件同 cover-view
* @desc 支持嵌套在 cover-view 里
*/
export type CoverImage = Component<Partial<CoverImageProps>>;Icon (icon)
/**
* @desc 图标属性
*/
export interface IconProps {
/**
* @desc 类型
*/
type: string;
/**
* @desc 大小
* @desc 单位为 px
* @desc 默认为 23
*/
size: number;
/**
* @desc 颜色
*/
color: string;
}
/**
* @desc 图标
*/
export type Icon = Component<Partial<IconProps>>;Text (text)
/**
* @desc 显示连续空格
* @desc ensp 中文字符空格一半大小
* @desc emsp 中文字符空格大小
* @desc nbsp 根据字体设置的空格大小
*/
export type TextSpace = 'ensp' | 'emsp' | 'nbsp';
/**
* @desc 文本组件属性
*/
export interface TextProps {
/**
* @desc 文本是否可选
* @desc 默认为 false
*/
selectable: boolean;
/**
* @desc 文本是否可选，可能会使文本节点显示为 inline-block
* @desc 默认为 false
*/
userSelect: boolean;
/**
* @desc 显示连续空格
* @desc ensp 中文字符空格一半大小
* @desc emsp 中文字符空格大小
* @desc nbsp 根据字体设置的空格大小
* @desc 没有默认值
*/
space: TextSpace;
/**
* @desc 是否解码
* @desc 默认为 false
*/
decode: boolean;
}
/**
* @desc 文本组件
* @desc 用于包裹文本内容
*/
export type Text = Component<Partial<TextProps>>;RichText (rich-text)
/**
* @desc 显示连续空格
*/
export type RichTextSpace = 'ensp' | 'emsp' | 'nbsp';
/**
* @desc 文本节点
*/
export type RichTextTextNode = {
type: 'text';
text: string;
};
/**
* @desc 元素节点
*/
export type RichTextNodeNode = {
type?: 'node';
name: string;
attrs?: Record<string, any>;
children?: Array<RichTextTextNode | RichTextNodeNode>;
};
/**
* @desc 节点
*/
export type RichTextNode = RichTextTextNode | RichTextNodeNode;
/**
* @desc 富文本属性
*/
export interface RichTextProps {
/**
* @desc 节点列表
* @desc
*/
nodes: RichTextNode[] | string;
/**
* @desc 显示连续空格
* @desc 没有默认值
*/
space: RichTextSpace;
/**
* @desc 富文本是否可以长按选中
* @desc 默认为 true
*/
selectable: boolean;
/**
* @desc 是否阻止长按图片时弹起默认菜单
* @desc 只在初始化时有效，不支持动态修改
* @desc 默认为 false
*/
imageMenuPrevent: boolean;
/**
* @desc 富文本中的图片是否可点击预览
* @desc 在不设置的情况下，若 rich-text 未监听点击事件，则默认开启
* @desc 未显示设置 preview 时会进行点击默认预览判断，建议显示设置 preview
*/
preview: boolean;
/**
* @desc 拦截点击事件，支持 a 和 img 标签
*/
onItemclick: (event: CustomEvent<{ node: RichTextNode }>) => void;
}
/**
* @desc 富文本
* */
export type RichText = Component<Partial<RichTextProps>>;Progress (progress)
/**
* @desc 动画播放方式
* @desc backwards 动画从头播
* @desc forwards 动画从上次结束点接着播
*/
export type ProgressActiveMode = 'backwards' | 'forwards';
/**
* @desc 进度条属性
*/
export interface ProgressProps {
/**
* @desc 百分比
* @desc 取值范围为 0 - 100
* @desc 没有默认值
*/
percent: number;
/**
* @desc 是否在进度条右侧显示百分比
* @desc 默认为 false
*/
showInfo: boolean;
/**
* @desc 圆角大小
* @desc 默认为 0
*/
borderRadius: number | string;
/**
* @desc 进度条右侧显示的百分比字体大小
* @desc 默认为 16
*/
fontSize: number | string;
/**
* @desc 进度条线的宽度
* @desc 单位为 px
* @desc 默认为 6
*/
strokeWidth: number;
/**
* @desc 已选择的进度条的颜色
* @desc 默认为 #09bb07，百度默认为 #e6e6e6
*/
activeColor: string;
/**
* @desc 未选择的进度条的颜色
* @desc 默认为 #ebebeb
*/
backgroundColor: string;
/**
* @desc 是否显示进度条从左往右的动画
* @desc 默认为 false
*/
active: boolean;
/**
* @desc 动画播放方式
* @desc backwards 动画从头播
* @desc forwards 动画从上次结束点接着播
* @desc 默认为 backwards
*/
activeMode: ProgressActiveMode;
/**
* @desc 进度增加 1% 所需时间
* @desc 单位为 ms
* @desc 默认为 30
*/
duration: number;
/**
* @desc 动画完成时触发
*/
onActiveend: (event: BaseEvent) => void;
}
/**
* @desc 进度条
*/
export type Progress = Component<Partial<ProgressProps>>;Button (button)
/**
* @desc 按钮的大小
* @desc default 默认
* @desc mini 小
*/
export type ButtonSize = 'default' | 'mini';
/**
* @desc 按钮的样式类型，如想在多端统一颜色，请用 default 然后自行写样式
* @desc primary 微信小程序、360 小程序为绿色，APP、H5、百度小程序、支付宝小程序、飞书小程序、快应用为蓝色，字节跳动小程序为红色，QQ 小程序为浅蓝色
* @desc default 白色
* @desc warn 红色
*/
export type ButtonType = 'primary' | 'default' | 'warn';
/**
* @desc 用于 form 组件，点击分别会触发 form 组件的 submit / reset 事件
* @desc submit 点击会触发 form 的 submit 事件
* @desc reset 点击会触发 form 的 reset 事件
*/
export type ButtonFormType = 'submit' | 'reset';
/**
* @desc 开放能力
* @desc feedback 打开“意见反馈”页面，用户可提交反馈内容并上传日志
* @desc share 触发用户转发
* @desc getUserInfo 获取用户信息，可以从 `@getuserinfo` 回调中获取到用户信息
* @desc contact 打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 `@contact` 回调中获得具体信息
* @desc getPhoneNumber 获取用户手机号，可以从 `@getphonenumber` 回调中获取到用户信息
* @desc launchApp 小程序中打开APP，可以通过 `app-parameter` 属性设定向 APP 传的参数
* @desc openSetting 打开授权设置页
* @desc chooseAvatar 获取用户头像，可以从 `@chooseavatar` 回调中获取到头像信息
* @desc getAuthorize 支持小程序授权
* @desc lifestyle 关注生活号
* @desc contactShare 分享到通讯录好友
* @desc openGroupProfile 呼起 QQ 群资料卡页面，可以通过 group-id 属性设定需要打开的群资料卡的群号，同时 manifest.json 中必须配置 groupIdList
* @desc openGuildProfile 呼起频道页面，可以通过 guild-id 属性设定需要打开的频道 ID
* @desc openPublicProfile 打开公众号资料卡，可以通过 public-id 属性设定需要打开的公众号资料卡的号码，同时 manifest.json 中必须配置 publicIdList
* @desc shareMessageToFriend 在自定义开放数据域组件中，向指定好友发起分享
* @desc addFriend 添加好友，对方需要通过该小程序进行授权，允许被加好友后才能调用成功用户授权
* @desc addColorSign 添加彩签，点击后添加状态有用户提示，无回调
* @desc addGroupApp 添加群应用（只有管理员或群主有权操作），添加后给 button 绑定 `@addgroupapp` 事件接收回调数据
* @desc addToFavorites 收藏当前页面，点击按钮后会触发 Page.onAddToFavorites 方法
* @desc chooseAddress 选择用户收货地址，可以从 `@chooseaddress` 回调中获取到用户选择的地址信息
* @desc chooseInvoiceTitle 选择用户发票抬头，可以从 `@chooseinvoicetitle` 回调中获取到用户选择发票抬头信息
* @desc login 登录，可以从 `@login` 回调中确认是否登录成功
* @desc subscribe 订阅类模板消息，需要用户授权才可发送
* @desc favorite 触发用户收藏
* @desc watchLater 触发用户稍后再看
* @desc openProfile 触发打开用户主页
*/
export type ButtonOpenType =
| 'feedback'
| 'share'
| 'getUserInfo'
| 'contact'
| 'getPhoneNumber'
| 'launchApp'
| 'openSetting'
| 'chooseAvatar'
| 'getAuthorize'
| 'lifestyle'
| 'contactShare'
| 'openGroupProfile'
| 'openGuildProfile'
| 'openPublicProfile'
| 'shareMessageToFriend'
| 'addFriend'
| 'addColorSign'
| 'addGroupApp'
| 'addToFavorites'
| 'chooseAddress'
| 'chooseInvoiceTitle'
| 'login'
| 'subscribe'
| 'favorite'
| 'watchLater'
| 'openProfile';
/**
* @desc 返回用户信息的语言
* @desc zh_CN 简体中文
* @desc zh_TW 繁体中文
* @desc en 英文
*/
export type ButtonLang = 'zh_CN' | 'zh_TW' | 'en';
export interface ButtonProps {
/**
* @desc 按钮的大小
* @desc default 默认
* @desc mini 小
* @desc 默认为 default
*/
size: ButtonSize;
/**
* @desc 按钮的样式类型
* @desc primary 微信小程序、360 小程序为绿色，APP、H5、百度小程序、支付宝小程序、飞书小程序、快应用为蓝色，字节跳动小程序为红色，QQ 小程序为浅蓝色
* @desc default 白色
* @desc warn 红色
* @desc 默认为 default
*/
type: ButtonType;
/**
* @desc 按钮是否镂空，背景色透明
* @desc 默认为 false
*/
plain: boolean;
/**
* @desc 是否禁用
*/
disabled: boolean;
/**
* @desc 是否带 loading 图标
* @desc 默认为 false
*/
loading: boolean;
/**
* @desc 用于 form 组件，点击分别会触发 form 组件的 submit / reset 事件
* @desc submit 点击会触发 form 的 submit 事件
* @desc reset 点击会触发 form 的 reset 事件
* @desc 没有默认值
*/
formType: ButtonFormType;
/**
* @desc 开放能力
* @desc feedback 打开“意见反馈”页面，用户可提交反馈内容并上传日志
* @desc share 触发用户转发
* @desc getUserInfo 获取用户信息，可以从 `@getuserinfo` 回调中获取到用户信息
* @desc contact 打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 `@contact` 回调中获得具体信息
* @desc getPhoneNumber 获取用户手机号，可以从 `@getphonenumber` 回调中获取到用户信息
* @desc launchApp 小程序中打开APP，可以通过 `app-parameter` 属性设定向 APP 传的参数
* @desc openSetting 打开授权设置页
* @desc chooseAvatar 获取用户头像，可以从 `@chooseavatar` 回调中获取到头像信息
* @desc getAuthorize 支持小程序授权
* @desc lifestyle 关注生活号
* @desc contactShare 分享到通讯录好友
* @desc openGroupProfile 呼起 QQ 群资料卡页面，可以通过 group-id 属性设定需要打开的群资料卡的群号，同时 manifest.json 中必须配置 groupIdList
* @desc openGuildProfile 呼起频道页面，可以通过 guild-id 属性设定需要打开的频道 ID
* @desc openPublicProfile 打开公众号资料卡，可以通过 public-id 属性设定需要打开的公众号资料卡的号码，同时 manifest.json 中必须配置 publicIdList
* @desc shareMessageToFriend 在自定义开放数据域组件中，向指定好友发起分享
* @desc addFriend 添加好友，对方需要通过该小程序进行授权，允许被加好友后才能调用成功用户授权
* @desc addColorSign 添加彩签，点击后添加状态有用户提示，无回调
* @desc addGroupApp 添加群应用（只有管理员或群主有权操作），添加后给 button 绑定 `@addgroupapp` 事件接收回调数据
* @desc addToFavorites 收藏当前页面，点击按钮后会触发 Page.onAddToFavorites 方法
* @desc chooseAddress 选择用户收货地址，可以从 `@chooseaddress` 回调中获取到用户选择的地址信息
* @desc chooseInvoiceTitle 选择用户发票抬头，可以从 `@chooseinvoicetitle` 回调中获取到用户选择发票抬头信息
* @desc login 登录，可以从 `@login` 回调中确认是否登录成功
* @desc subscribe 订阅类模板消息，需要用户授权才可发送
* @desc favorite 触发用户收藏
* @desc watchLater 触发用户稍后再看
* @desc openProfile 触发打开用户主页
*/
openType: ButtonOpenType;
/**
* @desc 指定按下去的样式类
* @desc 当 hover-class="none" 时，没有点击态效果
* @desc 默认为 button-hover
*/
hoverClass: string;
/**
* @desc 按住后多久出现点击态
* @desc 单位为 ms
* @desc 默认为 20
*/
hoverStartTime: number;
/**
* @desc 手指松开后点击态保留时间
* @desc 单位为 ms
* @desc 默认为 70
*/
hoverStayTime: number;
/**
* @desc 打开 APP 时，向 APP 传递的参数
* @desc open-type="launchApp" 时有效
*/
appParameter: string;
/**
* @desc 指定是否阻止本节点的祖先节点出现点击态
* @desc 默认为 false
*/
hoverStopPropagation: boolean;
/**
* @desc 返回用户信息的语言
* @desc zh_CN 简体中文
* @desc zh_TW 繁体中文
* @desc en 英文
* @desc 默认为 en
*/
lang: ButtonLang;
/**
* @desc 会话来源
* @desc open-type="contact" 时有效
*/
sessionFrom: string;
/**
* @desc 会话内消息卡片标题
* @desc open-type="contact" 时有效
* @desc 默认为当前标题
*/
sendMessageTitle: string;
/**
* @desc 会话内消息卡片点击跳转小程序路径
* @desc open-type="contact" 时有效
* @desc 默认为当前分享路径
*/
sendMessagePath: string;
/**
* @desc 会话内消息卡片图片
* @desc open-type="contact" 时有效
* @desc 默认为截图
*/
sendMessageImg: string;
/**
* @desc 是否显示会话内消息卡片
* @desc 设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息
* @desc open-type="contact" 时有效
* @desc 默认为 false
*/
showMessageCard: boolean;
/**
* @desc 打开群资料卡时，传递的群号
* @desc open-type="openGroupProfile" 时有效
*/
groupId: string;
/**
* @desc 打开频道页面时，传递的频道号
* @desc open-type="openGuildProfile" 时有效
*/
guildId: string;
/**
* @desc 打开公众号资料卡时，传递的号码
* @desc open-type="openPublicProfile" 时有效
*/
publicId: string;
/**
* @desc 获取用户手机号时回调
* @desc open-type="getPhoneNumber" 时有效
*/
onGetphonenumber: (
event: CustomEvent<{
/**
* @desc 错误信息
*/
errMsg?: string;
/**
* @desc 动态令牌
*/
code?: string;
/**
* @desc 包括敏感数据在内的完整用户信息的加密数据
*/
encryptedData?: string;
/**
* @desc 加密算法的初始向量
*/
iv?: string;
/**
* @desc 敏感数据对应的云 ID，开通云开发的小程序才会返回，可通过云调用直接获取开放数据
*/
cloudID?: string;
}>,
) => void;
/**
* @desc 使用开放能力发生错误时回调
*/
onError: (event: BaseEvent) => void;
/**
* @desc 在打开授权设置页并关闭后回调
* @desc open-type="openSetting" 时有效
*/
onOpensetting: (
event: CustomEvent<{
authSetting: Record<string, any>;
}>,
) => void;
/**
* @desc 从小程序成功打开 APP 回调
* @desc open-type="launchApp" 时有效
*/
onLaunchapp: (event: BaseEvent) => void;
/**
* @desc 获取用户头像回调
* @desc open-type="chooseAvatar" 时有效
*/
onChooseavatar: (event: BaseEvent) => void;
/**
* @desc 添加群应用回调
* @desc open-type="addGroupApp" 时有效
*/
onAddgroupapp: (event: BaseEvent) => void;
/**
* @desc 用户编辑并选择收货地址回调
* @desc open-type="chooseAddress" 时有效
*/
onChooseaddress: (event: BaseEvent) => void;
/**
* @desc 用户选择发票抬头回调
* @desc open-type="chooseInvoiceTitle" 时有效
*/
onChooseinvoicetitle: (event: BaseEvent) => void;
/**
* @desc 订阅消息授权回调
* @desc open-type="subscribe" 时有效
*/
onSubscribe: (event: BaseEvent) => void;
/**
* @desc 登录回调
* @desc open-type="login" 时有效
*/
onLogin: (event: BaseEvent) => void;
}
/**
* @desc 按钮
*/
export type Button = Component<Partial<ButtonProps>>;Checkbox (checkbox)
export interface CheckboxProps {
/**
* @desc 在 form 中作为 key
*/
name: string;
/**
* @desc 标识
* @desc 选中时触发 checkbox-group 的 change 事件并携带 value */
value: string;
/**
* @desc 是否禁用
* @desc 默认为 false
*/
disabled: boolean;
/**
* @desc 当前是否选中，可用于设置默认选中
* @desc 默认为 false
*/
checked: boolean;
/**
* @desc 的颜色
*/
color: string;
}
/**
* @desc 多选项目
*/
export type Checkbox = Component<Partial<CheckboxProps>>;CheckboxGroup (checkbox-group)
export interface CheckboxGroupProps {
/**
* @desc 选中项发生改变时触发
*/
onChange: (
event: CustomEvent<{
value: CheckboxProps['value'][];
}>,
) => void;
}
/**
* @desc 多项选择器，内部由多个 checkbox 组成
*/
export type CheckboxGroup = Component<Partial<CheckboxGroupProps>>;Editor (editor)
export interface EditorProps {
/**
* @desc 是否只读
* @desc 默认为 false
*/
readOnly: boolean;
/**
* @desc 提示信息
*/
placeholder: string;
/**
* @desc 点击图片时是否显示图片大小控件
* @desc 默认为 false
*/
showImgSize: boolean;
/**
* @desc 点击图片时是否显示工具栏控件
* @desc 默认为 false
*/
showImgToolbar: boolean;
/**
* @desc 点击图片时是否显示修改尺寸控件
* @desc 默认为 false
*/
showImgResize: string;
/**
* @desc 编辑器初始化完成时触发
*/
onReady: (event: BaseEvent) => void;
/**
* @desc 编辑器聚焦时触发
*/
onFocus: (
event: CustomEvent<{
html: string;
text: string;
delta: Record<string, any>;
}>,
) => void;
/**
* @desc 编辑器失焦时触发
*/
onBlur: (
event: CustomEvent<{
html: string;
text: string;
delta: Record<string, any>;
}>,
) => void;
/**
* @desc 编辑器内容改变时触发
*/
onInput: (
event: CustomEvent<{
html: string;
text: string;
delta: Record<string, any>;
}>,
) => void;
/**
* @desc 通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式
*/
onStatuschange: (event: BaseEvent) => void;
}
/**
* @desc 富文本编辑器，可以对图片、文字进行编辑和混排
* @desc 编辑器导出内容支持带标签的 html 和纯文本的 text，编辑器内部采用 delta 格式进行存储
* @desc 通过 setContents 接口设置内容时，解析插入的 html 可能会由于一些非法标签导致解析错误，建议开发者在应用内使用时通过 delta 进行插入
* @desc 图片控件仅初始化时设置有效
*/
export type Editor = Component<Partial<EditorProps>>;Form (form)
export interface FormProps {
/**
* @desc 是否返回 formId 用于发送模板消息
* @desc 默认为 false
*/
reportSubmit: boolean;
/**
* @desc 等待一段时间以确认 formId 是否生效
* @desc 如果未指定这个参数，formId 有很小的概率无效（网络问题）
* @desc 指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间
* @desc 如果无效，将返回 requestFormId:fail 开头的 formId
* @desc 单位为 ms
* @desc 默认为 0
*/
reportSubmitTimeout: number;
/**
* @desc 表单提交时触发
*/
onSubmit: (
event: CustomEvent<{
/**
* @desc 表单内 switch、input、checkbox、slider、radio、picker 对应的键值对
*/
value: {
[key: string]:
| SwitchProps['checked']
| InputProps['value']
| CheckboxProps['value']
| SliderProps['value']
| RadioProps['value']
| PickerProps['value'];
};
/**
* @desc report-submit 为 true 时返回，用于发送模板消息
*/
formId?: string;
}>,
) => void;
/**
* @desc 表单重置时触发
*/
onReset: (event: BaseEvent) => void;
}
/**
* @desc 表单
* @desc 将组件内的用户输入的 switch、input、checkbox、slider、radio、picker 提交
*/
export type Form = Component<Partial<FormProps>>;Input (input)
/**
* @desc input 类型
* @desc text 文本输入键盘
* @desc number 数字输入键盘
* @desc idcard 身份证输入键盘
* @desc digit 带小数点的数字键盘
* @desc tel 电话输入键盘
* @desc safe-password 密码安全输入键盘
* @desc nickname 昵称输入键盘
*/
export type InputType =
| 'text'
| 'number'
| 'idcard'
| 'digit'
| 'tel'
| 'safe-password'
| 'nickname';
/**
* @desc 文本区域的语义，根据类型自动填充
* @desc oneTimeCode 一次性验证码
*/
export type InputTextContentType = 'oneTimeCode';
/**
* @desc 设置键盘右下角按钮的文字
* @desc send 发送
* @desc search 搜索
* @desc next 下一个
* @desc go 前往
* @decs done 完成
* @desc type="text" 时有效
*/
export type InputConfirmType = 'send' | 'search' | 'next' | 'go' | 'done';
export interface InputProps {
/**
* @desc 在 form 中作为 key
*/
name: string;
/**
* @desc 输入框的初始内容
*/
value: string;
/**
* @desc input 类型
* @desc text 文本输入键盘
* @desc number 数字输入键盘
* @desc idcard 身份证输入键盘
* @desc digit 带小数点的数字键盘
* @desc tel 电话输入键盘
* @desc safe-password 密码安全输入键盘
* @desc nickname 昵称输入键盘
* @desc 默认为 text
*/
type: InputType;
/**
* @desc 文本区域的语义，根据类型自动填充
* @desc oneTimeCode 一次性验证码
*/
textContentType: InputContentType;
/**
* @desc 是否是密码类型
* @desc 默认为 false
*/
password: boolean;
/**
* @desc 输入框为空时占位符
*/
placeholder: string;
/**
* @desc 指定 placeholder 的样式
*/
placeholderStyle: string;
/**
* @desc 指定 placeholder 的样式类
* @desc 默认为 input-placeholder
*/
placeholderClass: string;
/**
* @desc 是否禁用
* @desc 默认为 false
*/
disabled: boolean;
/**
* @desc 最大输入长度
* @desc 设置为 -1 的时候不限制最大长度
* @desc 默认为 140
*/
maxlength: number;
/**
* @desc 指定光标与键盘的距离
* @desc 取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
* @desc 单位为 px
* @desc 默认为 0
*/
cursorSpacing: number;
/**
* @desc 是否获取焦点
* @desc 默认为 false
*/
focus: boolean;
/**
* @desc 是否自动聚焦，拉起键盘
* @desc 默认为 false
*/
autoFocus: boolean;
/**
* @desc 设置键盘右下角按钮的文字
* @desc send 发送
* @desc search 搜索
* @desc next 下一个
* @desc go 前往
* @decs done 完成
* @desc type="text" 时有效
* @desc 默认为 done
*/
confirmType: InputConfirmType;
/**
* @desc 点击键盘右下角按钮时是否保持键盘不收起
* @desc 默认为 false
*/
confirmHold: boolean;
/**
* @desc 指定 focus 时的光标位置
*/
cursor: number;
/**
* @desc 光标起始位置，自动聚焦时有效，需与 selection-end 搭配使用
* @desc 默认为 -1
*/
selectionStart: number;
/**
* @desc 光标结束位置，自动聚焦时有效，需与 selection-start 搭配使用
* @desc 默认为 -1
*/
selectionEnd: number;
/**
* @desc 键盘弹起时，是否自动上推页面
* @desc 默认为 true
*/
adjustPosition: boolean;
/**
* @desc 聚焦时，点击页面的时候是否不收起键盘
* @desc 默认为 false
*/
holdKeyboard: boolean;
/**
* @desc 键盘收起时，是否自动失焦
* @desc 默认为 false
*/
autoBlur: boolean;
/**
* @desc 是否忽略组件内对文本合成系统事件的处理
* @desc 为 false 时将触发 compositionstart、compositionend、compositionupdate 事件，且在文本合成期间会触发 input 事件
* @desc 默认为 true
*/
ignoreCompositionEvent: boolean;
/**
* @desc 是否强制 input 处于同层状态，仅在 iOS 生效
* @desc 默认聚焦时 input 会切到非同层状态
* @desc 默认为 false
*/
alwaysEmbed: boolean;
/**
* @desc 安全键盘加密公钥的路径，只支持包内路径
*/
safePasswordCertPath: string;
/**
* @desc 安全键盘输入密码长度
*/
safePasswordLength: number;
/**
* @desc 安全键盘加密时间戳
*/
safePasswordTimeStamp: number;
/**
* @desc 安全键盘加密盐值
*/
safePasswordNonce: string;
/**
* @desc 安全键盘计算 hash 盐值，若指定 custom-hash 则无效
*/
safePasswordSalt: string;
/**
* @desc 安全键盘计算 hash 的算法表达式
*/
safePasswordCustomHash: string;
/**
* @desc 当 type 为 number、digit、idcard 时，数字键盘是否随机排列
* @desc 默认为 false
*/
randomNumber: boolean;
/**
* @desc 是否为受控组件
* @desc 为 true 时，value 内容会完全受 setData 控制
* @desc 默认为 false
*/
controlled: boolean;
/**
* @desc 是否强制使用系统键盘和 Web-view 创建的 input 元素
* @desc 为 true 时，confirm-type、confirm-hold 可能失效
* @desc 默认为 false
*/
alwaysSystem: boolean;
/**
* @desc 输入时触发
*/
onInput: (
event: CustomEvent<{
value: InputProps['value'];
}>,
) => string | void;
/**
* @desc 聚焦时触发
*/
onFocus: (
event: CustomEvent<{
value: InputProps['value'];
height: number;
}>,
) => void;
/**
* @desc 失焦时触发
*/
onBlur: (
event: CustomEvent<{
value: InputProps['value'];
}>,
) => void;
/**
* @desc 点击完成按钮时触发
*/
onConfirm: (
event: CustomEvent<{
value: InputProps['value'];
}>,
) => void;
/**
* @desc 键盘高度变化时触发
*/
onKeyboardheightchange: (
event: CustomEvent<{
height: number;
duration: number;
}>,
) => void;
}
export type Input = Component<Partial<InputProps>>;Label (label)
export interface LabelProps {
/**
* @desc 绑定控件的 id
*/
for: string;
}
/**
* @desc 用来改进表单组件的可用性
* @desc 使用 for 属性找到对应的 id，或者将控件放在该标签下，当点击时，就会触发对应的控件
* @desc for 优先级高于内部控件，内部有多个控件的时候默认触发第一个控件
*/
export type Label = Component<Partial<LabelProps>>;Picker (picker)
/**
* @desc 大屏时 UI 类型，支持 picker、select、auto
*/
export type SelectorPickerSelectorType = 'auto' | 'picker' | 'select';
export interface SelectorPickerProps {
/**
* @desc 在 form 中作为 key
*/
name: string;
/**
* @desc 设置为普通选择器
*/
mode?: 'selector';
/**
* @desc 需要展示的内容
* @desc 默认为 []
*/
range: string[] | Record<string, any>[];
/**
* @desc 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
*/
rangeKey: string;
/**
* @desc 当前选择的下标
* @desc 默认为 0
*/
value: number;
/**
* @desc 大屏时 UI 类型，支持 picker、select、auto
* @desc 默认在 iPad 以 picker 样式展示
* @desc 默认在 PC 以 select 样式展示
* @desc 默认为 auto
*/
selectorType: SelectorPickerSelectorType;
/**
* @desc 是否禁用
* @desc 默认为 false
*/
disabled: boolean;
/**
* @desc value 改变时触发
*/
onChange: (
event: CustomEvent<{
value: SelectorPickerProps['value'];
}>,
) => void;
/**
* @desc 取消选择时触发
*/
onCancel: (event: BaseEvent) => void;
}
export interface MultiSelectorPickerProps {
/**
* @desc 在 form 中作为 key
*/
name: string;
/**
* @desc 设置为多列选择器
*/
mode: 'multiSelector';
/**
* @desc 需要展示的内容
* @desc 默认为 []
*/
range: string[][] | Record<string, any>[][];
/**
* @desc 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
*/
rangeKey: string;
/**
* @desc 当前每列选择的下标
* @desc 默认为列数个 0 组成的数组
*/
value: number[];
/**
* @desc 是否禁用
* @desc 默认为 false
*/
disabled: boolean;
/**
* @desc value 改变时触发
*/
onChange: (
event: CustomEvent<{
value: MultiSelectorPickerProps['value'];
}>,
) => void;
/**
* @desc 某一列 value 改变时触发
*/
onColumnchange: (
event: CustomEvent<{
column: number;
value: MultiSelectorPickerProps['value'][number];
}>,
) => void;
/**
* @desc 取消选择时触发
*/
onCancel: (event: BaseEvent) => void;
}
export interface TimePickerProps {
/**
* @desc 在 form 中作为 key
*/
name: string;
/**
* @desc 设置为时间选择器
*/
mode: 'time';
/**
* @desc 选中的日期
* @desc 格式为 hh:mm
*/
value: string;
/**
* @desc 有效日期范围的开始
* @desc 格式为 hh:mm
*/
start: string;
/**
* @desc 有效日期范围的结束
* @desc 格式为 hh:mm
*/
end: string;
/**
* @desc 是否禁用
* @desc 默认为 false
*/
disabled: boolean;
/**
* @desc value 改变时触发
*/
onChange: (
event: CustomEvent<{
value: TimePickerProps['value'];
}>,
) => void;
/**
* @desc 取消选择时触发
*/
onCancel: (event: BaseEvent) => void;
}
/**
* @desc 选择器的粒度
* @desc year 年
* @desc month 月
* @desc day 日
*/
export type DatePickerFields = 'year' | 'month' | 'day';
export interface DatePickerProps {
/**
* @desc 在 form 中作为 key
*/
name: string;
/**
* @desc 设置为日期选择器
*/
mode: 'date';
/**
* @desc 选中的日期
* @desc 格式为 YYYY-MM-DD
*/
value: string;
/**
* @desc 有效日期范围的开始
* @desc 格式为 YYYY-MM-DD
*/
start: string;
/**
* @desc 有效日期范围的结束
* @desc 格式为 YYYY-MM-DD
*/
end: string;
/**
* @desc 选择器的粒度
* @desc year 年
* @desc month 月
* @desc day 日
* @desc 默认为 day
*/
fields: DatePickerFields;
/**
* @desc 是否禁用
* @desc 默认为 false
*/
disabled: boolean;
/**
* @desc value 改变时触发
*/
onChange: (
event: CustomEvent<{
value: DatePickerProps['value'];
}>,
) => void;
/**
* @desc 取消选择时触发
*/
onCancel: (event: BaseEvent) => void;
}
export interface RegionPickerProps {
/**
* @desc 在 form 中作为 key
*/
name: string;
/**
* @desc 设置为省市区选择器
*/
mode: 'region';
/**
* @desc 选中的省市区
* @desc 默认选中每一列第一个值
*/
value: string[];
/**
* @desc 可为每一列的顶部添加一个自定义的项
*/
customItem: string;
/**
* @desc 是否禁用
* @desc 默认为 false
*/
disabled: boolean;
/**
* @desc value 改变时触发
*/
onChange: (
event: CustomEvent<{
value: RegionPickerProps['value'];
}>,
) => void;
/**
* @desc 取消选择时触发
*/
onCancel: (event: BaseEvent) => void;
}
export type PickerProps =
| SelectorPickerProps
| MultiSelectorPickerProps
| TimePickerProps
| DatePickerProps
| RegionPickerProps;
/**
* @desc 从底部弹起的滚动选择器，通过 mode 来区分
*/
export type Picker = Component<Partial<PickerProps>>;PickerView (picker-view)
export interface PickerViewProps {
/**
* @desc 依次表示 picker-view 内 picker-view-column 选择的下标
* @desc 超出 picker-view-column 可选项长度时，选择最后一项
*/
value: number[];
/**
* @desc 设置选择器中间选中框的样式
*/
indicatorStyle: string;
/**
* @desc 设置选择器中间选中框的类名
*/
indicatorClass: string;
/**
* @desc 设置蒙层的样式
*/
maskStyle: string;
/**
* @desc 设置蒙层的类名
*/
maskClass: string;
/**
* @desc 是否在手指松开时立即触发 change 事件
* @desc 若不开启则会在滚动动画结束后触发 change 事件
* @desc 默认为 false
*/
immediateChange: boolean;
/**
* @desc value 改变时触发
*/
onChange: (
event: CustomEvent<{
value: PickerViewProps['value'];
}>,
) => void;
/**
* @desc 滚动选择开始时触发
*/
onPickstart: (event: BaseEvent) => void;
/**
* @desc 滚动选择结束时触发
*/
onPickend: (event: BaseEvent) => void;
}
/**
* @desc 嵌入页面的滚动选择器，比 picker 更灵活
*/
export type PickerView = Component<Partial<PickerViewProps>>;PickerViewColumn (picker-view-column)
export type PickerViewColumn = Component;Radio (radio)
export interface RadioProps {
/**
* @desc 在 form 中作为 key
*/
name: string;
/**
* @desc 标识
* @desc 被选中时，radio-group 的 change 事件会携带该 value
*/
value: string;
/**
* @desc 当前是否选中
* @desc 默认为 false
*/
checked: boolean;
/**
* @desc 是否禁用
* @desc 默认为 false
*/
disabled: boolean;
/**
* @desc 颜色
*/
color: string;
}
/**
* @desc 单选项目
*/
export type Radio = Component<Partial<RadioProps>>;RadioGroup (radio-group)
/**
* @desc 单项选择器，内部由多个 radio 组成
* @desc 通过把多个 radio 包裹在一个 radio-group 下，实现这些 radio 的单选
*/
export interface RadioGroupProps {
/**
* @desc 选中项发生变化时触发
*/
onChange: (
event: CustomEvent<{
value: RadioProps['value'];
}>,
) => void;
}
/**
* @desc 单项选择器，内部由多个 radio 组成
* @desc 通过把多个 radio 包裹在一个 radio-group 下，实现这些 radio 的单选
*/
export type RadioGroup = Component<Partial<RadioGroupProps>>;Slider (slider)
export interface SliderProps {
/**
* @desc 在 form 中作为 key
*/
name: string;
/**
* @desc 最小值
* @desc 默认为 0
*/
min: number;
/**
* @desc 最大值
* @desc 默认为 100
*/
max: number;
/**
* @desc 步长，取值必须大于 0，并且可被 (max - min) 整除
* @desc 默认为 1
*/
step: number;
/**
* @desc 是否禁用
* @desc 默认为 false
*/
disabled: boolean;
/**
* @desc 当前取值
* @desc 默认为 0
*/
value: number;
/**
* @desc 滑块左侧已选择部分的线条颜色
* @desc 默认为各平台默认色
*/
activeColor: string;
/**
* @desc 滑块右侧背景条的颜色
* @desc 默认为 #e9e9e9
*/
backgroundColor: string;
/**
* @desc 滑块的大小
* @desc 取值范围为 12 - 28
* @desc 默认为 28
*/
blockSize: number;
/**
* @desc 滑块的颜色
* @desc 默认为 #fff
*/
blockColor: string;
/**
* @desc 是否显示当前 value
* @desc 默认为 false
*/
showValue: boolean;
/**
* @desc 完成一次拖动后触发
*/
onChange: (
event: CustomEvent<{
value: SliderProps['value'];
}>,
) => void;
/**
* @desc 拖动过程中触发
*/
onChanging: (
event: CustomEvent<{
value: SliderProps['value'];
}>,
) => void;
}
/**
* @desc 滑动选择器
*/
export type Slider = Component<Partial<SliderProps>>;Switch (switch)
/**
* @desc 样式
*/
export type SwitchType = 'switch' | 'checkbox';
export interface SwitchProps {
/**
* @desc 在 form 中作为 key
*/
name: string;
/**
* @desc 是否选中
* @desc 默认为 false
*/
checked: boolean;
/**
* @desc 是否禁用
* @desc 默认为 false
*/
disabled: boolean;
/**
* @desc 样式
*/
type: SwitchType;
/**
* @desc switch 的颜色
*/
color: string;
/**
* @desc checked 改变时触发
*/
onChange: (
event: CustomEvent<{
value: SwitchProps['checked'];
}>,
) => void;
}
/**
* @desc 开关选择器
*/
export type Switch = Component<Partial<SwitchProps>>;Textarea (textarea)
/**
* @desc 设置键盘右下角按钮的文字
* @desc send 发送
* @desc search 搜索
* @desc next 下一个
* @desc go 前往
* @desc done 完成
*/
export type TextareaConfirmType = 'send' | 'search' | 'next' | 'go' | 'done';
export interface TextareaProps {
/**
* @desc 输入框的内容
*/
value: string;
/**
* @desc 输入框为空时占位符
*/
placeholder: string;
/**
* @desc 指定 placeholder 的样式
*/
placeholderStyle: string;
/**
* @desc 指定 placeholder 的样式类
* @desc 默认为 textarea-placeholder
*/
placeholderClass: string;
/**
* @desc 是否禁用
* @desc 默认为 false
*/
disabled: boolean;
/**
* @desc 最大输入长度，设置为 -1 的时候不限制最大长度
* @desc 默认为 140
*/
maxlength: number;
/**
* @desc 是否获取焦点
* @desc 默认为 false
*/
focus: boolean;
/**
* @desc 是否自动聚焦，拉起键盘
* @desc 默认为 false
*/
autoFocus: boolean;
/**
* @desc 是否自动增高
* @desc 设置时，样式里的 height 不生效
* @desc 默认为 false
*/
autoHeight: boolean;
/**
* @desc 如果 textarea 在 position: fixed 的区域内，需要指定为 true
* @desc 默认为 false
*/
fixed: boolean;
/**
* @desc 指定光标与键盘的距离
* @desc 取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
* @desc 单位为 px
* @desc 默认为 0
*/
cursorSpacing: number;
/**
* @desc 指定 focus 时的光标位置
*/
cursor: number;
/**
* @desc 设置键盘右下角按钮的文字
* @desc send 发送
* @desc search 搜索
* @desc next 下一个
* @desc go 前往
* @desc done 完成
* @desc 默认为 done
*/
confirmType: TextareaConfirmType;
/**
* @desc 点击键盘右下角按钮时是否保持键盘不收起
* @desc 默认为 false
*/
confirmHold: boolean;
/**
* @desc 是否显示键盘上方带有”完成“按钮那一栏
* @desc 默认为 true
*/
showConfirmBar: boolean;
/**
* @desc 光标起始位置，自动聚焦时有效，需与 selection-end 搭配使用
* @desc 默认为 -1
*/
selectionStart: number;
/**
* @desc 光标结束位置，自动聚焦时有效，需与 selection-start 搭配使用
* @desc 默认为 -1
*/
selectionEnd: number;
/**
* @desc 键盘弹起时，是否自动上推页面
* @desc 默认为 true
*/
adjustPosition: boolean;
/**
* @desc 是否去掉 iOS 下的默认内边距
* @desc 默认为 false
*/
disableDefaultPadding: boolean;
/**
* @desc 聚焦时点击页面的时候是否不收起键盘
* @desc 默认为 false
*/
holdKeyboard: boolean;
/**
* @desc 键盘收起时是否自动失焦
* @desc 默认为 false
*/
autoBlur: boolean;
/**
* @desc 是否忽略组件内对文本合成系统事件的处理
* @desc 为 false 时将触发 compositionstart、compositionend、compositionupdate 事件，且在文本合成期间会触发 input 事件
* @desc 默认为 true
*/
ignoreCompositionEvent: boolean;
/**
* @desc 聚焦时触发
*/
onFocus: (
event: CustomEvent<{
value: TextareaProps['value'];
height: number;
}>,
) => void;
/**
* @desc 失焦时触发
*/
onBlur: (
event: CustomEvent<{
value: TextareaProps['value'];
height: number;
}>,
) => void;
/**
* @desc 输入框行数变化时触发
*/
onLinechange: (
event: CustomEvent<{
height: number;
heightRpx: number;
lineCount: number;
}>,
) => void;
/**
* @desc 输入时触发
*/
onInput: (
event: CustomEvent<{
value: TextareaProps['value'];
cursor: number;
}>,
) => string | void;
/**
* @desc 点击完成按钮时触发
*/
onConfirm: (
event: CustomEvent<{
value: TextareaProps['value'];
}>,
) => void;
/**
* @desc 键盘高度变化时触发
*/
onKeyboardheightchange: (
event: CustomEvent<{
height: number;
duration: number;
}>,
) => void;
}
/**
* @desc 多行输入框
*/
export type Textarea = Component<Partial<TextareaProps>>;Navigator (navigator)
/**
* @desc 跳转方式
* @desc navigate 对应 navigateTo
* @desc redirect 对应 redirectTo
* @desc switchTab 对应 switchTab
* @desc reLaunch 对应 reLaunch
* @desc navigateBack 对应 navigateBack
* @desc exit 退出小程序，target="miniProgram"时生效
*/
export type NavigatorOpenType =
| 'navigate'
| 'redirect'
| 'switchTab'
| 'reLaunch'
| 'navigateBack'
| 'exit';
/**
* @desc 窗口的显示/关闭的动画类型
* @desc open-type="navigateTo" 或 open-type="navigateBack" 时有效
* @desc 默认为 pop-in 显示、pop-out 关闭
*/
export type NavigatorAnimationType =
| 'slide-in-right'
| 'slide-out-right'
| 'slide-in-left'
| 'slide-out-left'
| 'slide-in-top'
| 'slide-out-top'
| 'slide-in-bottom'
| 'slide-out-bottom'
| 'pop-in'
| 'pop-out'
| 'fade-in'
| 'fade-out'
| 'zoom-in'
| 'zoom-out'
| 'zoom-fade-in'
| 'zoom-fade-out'
| 'none';
/**
* @desc 在哪个目标上发生跳转
* @desc self 当前小程序
* @desc miniProgram 其它小程序
*/
export type NavigatorTarget = 'self' | 'miniProgram';
/**
* @desc 要打开的小程序版本
* @desc 如果当前小程序是正式版，则打开的小程序必定是正式版
* @desc develop 开发版
* @desc trial 体验版
* @desc release 正式版
* @desc target="miniProgram" 时有效
* @desc 默认为 release
*/
export type NavigatorVersion = 'develop' | 'trial' | 'release';
export interface NavigatorProps {
/**
* @desc 应用内的跳转链接
* @desc 值为相对路径或绝对路径
* @desc 例子：../first/first、/pages/first/first
*/
url: string;
/**
* @desc 跳转方式
* @desc navigate 对应 navigateTo
* @desc redirect 对应 redirectTo
* @desc switchTab 对应 switchTab
* @desc reLaunch 对应 reLaunch
* @desc navigateBack 对应 navigateBack
* @desc exit 退出小程序，target="miniProgram"时生效
* @desc 默认为 navigate
*/
openType: NavigatorOpenType;
/**
* @desc 回退的层数
* @desc open-type="navigateBack" 时有效
* @desc 默认为 1
*/
delta: number;
/**
* @desc 窗口的显示/关闭的动画类型
* @desc open-type="navigateTo" 或 open-type="navigateBack" 时有效
* @desc 默认为 pop-in 显示、pop-out 关闭
*/
animationType: NavigatorAnimationType;
/**
* @desc 窗口的显示/关闭动画的持续时间
* @desc open-type="navigateTo" 或 open-type="navigateBack" 时有效
* @desc 默认为 300
*/
animationDuration: number;
/**
* @desc 指定点击时的样式类
* @desc hover-class="none" 时，没有点击态效果
* @desc 默认为 navigator-hover
*/
hoverClass: string;
/**
* @desc 指定是否阻止本节点的祖先节点出现点击态
* @desc 默认为 false
*/
hoverStopPropagation: boolean;
/**
* @desc 按住后多久出现点击态
* @desc 单位为 ms
* @desc 默认为 50
*/
hoverStartTime: number;
/**
* @desc 手指松开后点击态保留时间
* @desc 单位为 ms
* @desc 默认为 600
*/
hoverStayTime: number;
/**
* @desc 在哪个目标上发生跳转
* @desc self 当前小程序
* @desc miniProgram 其它小程序
* @desc 默认为 self
*/
target: NavigatorTarget;
/**
* @desc 要打开的小程序 appId
* @desc target="miniProgram" 时有效
*/
appId: string;
/**
* @desc 打开的页面路径，如果为空则打开首页
* @desc target="miniProgram" 时有效
*/
path: string;
/**
* @desc 需要传递给目标应用的数据
* @desc target="miniProgram" 时有效
*/
extraData: Record<string, any>;
/**
* @desc 要打开的小程序版本
* @desc 如果当前小程序是正式版，则打开的小程序必定是正式版
* @desc develop 开发版
* @desc trial 体验版
* @desc release 正式版
* @desc target="miniProgram" 时有效
* @desc 默认为 release
*/
version: NavigatorVersion;
/**
* @desc 当传递该参数后，可以不传 app-id 和 path
* @desc target="miniProgram" 时有效
*/
shortLink: string;
}
/**
* @desc 页面跳转
* @desc 该组件类似 HTML 中的 a 组件，但只能跳转本地页面
* @desc 目标页面必须在 pages.json 中注册
*/
export type Navigator = Component<Partial<NavigatorProps>>;Audio (audio)
export interface AudioProps {
/**
* @desc audio 组件的唯一标识符
*/
id: string;
/**
* @desc 要播放音频的资源地址
*/
src: string;
/**
* @desc 是否循环播放
* @desc 默认为 false
*/
loop: boolean;
/**
* @desc 是否显示默认控件
* @desc 默认为 false
*/
controls: boolean;
/**
* @desc 默认控件上的音频封面的图片资源地址
* @desc 如果 controls 值为 false 则无效
*/
poster: string;
/**
* @desc 默认控件上的音频名字
* @desc 如果 controls 值为 false 则无效
* @desc 默认为“未知音频”
*/
name: string;
/**
* @desc 默认控件上的作者名字
* @desc 如果 controls 值为 false 则无效
* @desc 默认为“未知作者”
*/
author: string;
/**
* @desc 发生错误时触发
*/
onError: (
event: CustomEvent<{
/**
* @desc 错误码
* @desc 1 获取资源被用户禁止
* @desc 2 网络错误
* @desc 3 解码错误
* @desc 4 不合适资源
*/
errMsg: 1 | 2 | 3 | 4;
}>,
) => void;
/**
* @desc 开始/继续播放时触发
*/
onPlay: (event: BaseEvent) => void;
/**
* @desc 暂停播放时触发
*/
onPause: (event: BaseEvent) => void;
/**
* @desc 播放进度改变时触发
*/
onTimeupdate: (
event: CustomEvent<{
currentTime: number;
duration: number;
}>,
) => void;
/**
* @desc 播放到末尾时触发
*/
onEnded: (event: BaseEvent) => void;
}
/**
* @desc 音频
*/
export type Audio = Component<Partial<AudioProps>>;Camera (camera)
/**
* @desc 应用模式，不支持动态修改
* @desc normal 普通
* @desc scanCode 扫码
*/
export type CameraMode = 'normal' | 'scanCode';
/**
* @desc 分辨率，不支持动态修改
* @desc low 低
* @desc medium 中等
* @desc high 高
*/
export type CameraResolution = 'low' | 'medium' | 'high';
/**
* @desc 摄像头朝向
* @desc front 前置摄像头
* @desc back 后置摄像头
*/
export type CameraDevicePosition = 'front' | 'back';
/**
* @desc 闪光灯
* @desc auto 自动
* @desc on 打开
* @desc off 关闭
*/
export type CameraFlash = 'auto' | 'on' | 'off';
/**
* @desc 期望的相机帧数据尺寸
* @desc small 小
* @desc medium 中
* @desc large 大
*/
export type CameraFrameSize = 'small' | 'medium' | 'large';
export interface CameraProps {
/**
* @desc 应用模式，不支持动态修改
* @desc normal 普通
* @desc scanCode 扫码
* @desc 默认为 normal
*/
mode: CameraMode;
/**
* @desc 分辨率，不支持动态修改
* @desc low 低
* @desc medium 中等
* @desc high 高
* @desc 默认为 medium
*/
resolution: CameraResolution;
/**
* @desc 摄像头朝向
* @desc front 前置摄像头
* @desc back 后置摄像头
* @desc 默认为 back
*/
devicePosition: CameraDevicePosition;
/**
* @desc 闪光灯
* @desc auto 自动
* @desc on 打开
* @desc off 关闭
* @desc 默认为 auto
*/
flash: CameraFlash;
/**
* @desc 期望的相机帧数据尺寸
* @desc small 小
* @desc medium 中
* @desc large 大
* @desc 默认为 medium
*/
frameSize: CameraFrameSize;
/**
* @desc 摄像头在非正常终止时触发
*/
onStop: (event: BaseEvent) => void;
/**
* @desc 用户不允许使用摄像头时触发
*/
onError: (event: BaseEvent) => void;
/**
* @desc 相机初始化完成时触发
*/
onInitdone: (
event: CustomEvent<{
maxZoom: number;
}>,
) => void;
/**
* @desc 扫码识别成功时触发
* @desc mode="scanCode" 时有效
*/
onScancode: (event: BaseEvent) => void;
}
/**
* @desc 页面内嵌的区域相机组件
*/
export type Camera = Component<Partial<CameraProps>>;Image (image)
/**
* @desc 图片裁剪、缩放的模式
* @desc scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
* @desc aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来，可以完整地将图片显示出来
* @desc aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取
* @desc widthFix 宽度不变，高度自动变化，保持原图宽高比不变
* @desc heightFix 高度不变，宽度自动变化，保持原图宽高比不变
* @desc top 不缩放图片，只显示图片的顶部区域
* @desc bottom 不缩放图片，只显示图片的底部区域
* @desc center 不缩放图片，只显示图片的中间区域
* @desc left 不缩放图片，只显示图片的左边区域
* @desc right 不缩放图片，只显示图片的右边区域
* @desc top left 不缩放图片，只显示图片的左上边区域
* @desc top right 不缩放图片，只显示图片的右上边区域
* @desc bottom left 不缩放图片，只显示图片的左下边区域
* @desc bottom right 不缩放图片，只显示图片的右下边区域
*/
export type ImageMode =
| 'scaleToFill'
| 'aspectFit'
| 'aspectFill'
| 'widthFix'
| 'heightFix'
| 'top'
| 'bottom'
| 'center'
| 'left'
| 'right'
| 'top left'
| 'top right'
| 'bottom left'
| 'bottom right';
export interface ImageProps {
/**
* @desc 图片资源地址
*/
src: string;
/**
* @desc 图片裁剪、缩放的模式
* @desc scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
* @desc aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来，可以完整地将图片显示出来
* @desc aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取
* @desc widthFix 宽度不变，高度自动变化，保持原图宽高比不变
* @desc heightFix 高度不变，宽度自动变化，保持原图宽高比不变
* @desc top 不缩放图片，只显示图片的顶部区域
* @desc bottom 不缩放图片，只显示图片的底部区域
* @desc center 不缩放图片，只显示图片的中间区域
* @desc left 不缩放图片，只显示图片的左边区域
* @desc right 不缩放图片，只显示图片的右边区域
* @desc top left 不缩放图片，只显示图片的左上边区域
* @desc top right 不缩放图片，只显示图片的右上边区域
* @desc bottom left 不缩放图片，只显示图片的左下边区域
* @desc bottom right 不缩放图片，只显示图片的右下边区域
* @desc 默认为 scaleToFill
*/
mode: ImageMode;
/**
* @desc 是否开启图片懒加载
* @desc 只对 page 与 scroll-view 下的 image 有效
* @desc 默认为 false
*/
lazyLoad: boolean;
/**
* @desc 是否使用图片显示动画效果
* @desc 默认为 true
*/
fadeShow: boolean;
/**
* @desc 在系统不支持 webp 的情况下是否单独启用 webp
* @desc 默认为 false
*/
webp: boolean;
/**
* @desc 是否开启长按图片显示识别小程序码菜单
* @desc 默认为 false
*/
showMenuByLongpress: boolean;
/**
* @desc 是否能拖动图片
* @desc 默认为 true
*/
draggable: boolean;
/**
* @desc 图片加载错误时触发
*/
onError: (event: BaseEvent) => void;
/**
* @desc 图片加载完毕时触发
*/
onLoad: (
event: CustomEvent<{
/**
* @desc 图片宽度
* @desc 单位为 px
*/
width: string;
/**
* @desc 图片高度
* @desc 单位为 px
*/
height: string;
}>,
) => void;
}
export type Image = Component<Partial<ImageProps>>;Video (video)
/**
* @desc 弹幕
*/
export interface VideoDanmu {
/**
* @desc 弹幕文本
*/
text: string;
/**
* @desc 弹幕颜色
*/
color: string;
/**
* @desc 弹幕出现时间
* @desc 单位为 s
*/
time: number;
}
/**
* @desc 设置全屏时视频的方向，不指定则根据宽高比自动判断
* @desc 0 正常竖向
* @desc 90 屏幕逆时针 90 度
* @desc -90 屏幕顺时针 90 度
*/
export type VideoDirection = 0 | 90 | -90;
/**
* @desc 当视频大小与 video 容器大小不一致时，视频的表现形式
* @desc contain 包含
* @desc fill 填充
* @desc cover 覆盖
*/
export type VideoObjectFit = 'contain' | 'fill' | 'cover';
/**
* @desc 播放按钮的位置
* @desc bottom 控制栏上
* @desc center 视频中间
*/
export type VideoPlayBtnPosition = 'bottom' | 'center';
/**
* @desc 解码器选择
* @desc hardware 硬件解码
* @desc software 软件解码
*/
export type VideoCodec = 'hardware' | 'software';
/**
* @desc 移动网络提醒样式
* @desc 0 不提醒
* @desc 1 提醒
*/
export type VideoMobilenetHintType = 0 | 1;
/**
* @desc 播放策略
* @desc 0 普通模式，适合绝大部分视频播放场景
* @desc 1 平滑播放模式（降级），增加缓冲区大小，采用 open sl 解码音频，避免音视频脱轨的问题，可能会降低首屏展现速度、视频帧率，出现开屏音频延迟等，适用于高码率视频的极端场景
* @desc 2 M3U8 优化模式，增加缓冲区大小，提升视频加载速度和流畅度，可能会降低首屏展现速度，适用于 M3U8 在线播放的场景
*/
export type VideoPlayStrategy = 0 | 1 | 2;
export interface VideoProps {
/**
* @desc 要播放视频的资源地址
*/
src: string;
/**
* @desc 是否自动播放
* @desc 默认为 false
*/
autoplay: boolean;
/**
* @desc 是否循环播放
* @desc 默认为 false
*/
loop: boolean;
/**
* @desc 是否静音播放
* @desc 默认为 false
*/
muted: boolean;
/**
* @desc 指定视频初始播放位置
* @desc 单位为 s
*/
initialTime: number;
/**
* @desc 指定视频长度
* @desc 单位为 s
*/
duration: number;
/**
* @desc 是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
* @desc 默认为 true
*/
controls: boolean;
/**
* @desc 弹幕列表
*/
danmuList: VideoDanmu[];
/**
* @desc 是否显示弹幕按钮，不支持动态修改
* @desc 默认为 false
*/
danmuBtn: boolean;
/**
* @desc 是否展示弹幕，不支持动态修改
* @desc 默认为 false
*/
enableDanmu: boolean;
/**
* @desc 在非全屏模式下，是否开启亮度与音量调节手势
* @desc 默认为 false
*/
pageGesture: boolean;
/**
* @desc 设置全屏时视频的方向，不指定则根据宽高比自动判断
* @desc 0 正常竖向
* @desc 90 屏幕逆时针 90 度
* @desc -90 屏幕顺时针 90 度
* @desc 默认根据宽高比自动判断
*/
direction: VideoDirection;
/**
* @desc 若不设置，宽度大于 240 时才会显示
* @desc 默认为 true
*/
showProgress: boolean;
/**
* @desc 是否显示全屏按钮
* @desc 默认为 true
*/
showFullscreenBtn: boolean;
/**
* @desc 是否显示视频底部控制栏的播放按钮
* @desc 默认为 true
*/
showPlayBtn: boolean;
/**
* @desc 是否显示视频中间的播放按钮
* @desc 默认为 true
*/
showCenterPlayBtn: boolean;
/**
* @desc 是否显示 loading 控件
* @desc 默认为 true
*/
showLoading: boolean;
/**
* @desc 是否开启控制进度的手势
* @desc 默认为 true
*/
enableProgressGesture: boolean;
/**
* @desc 当视频大小与 video 容器大小不一致时，视频的表现形式
* @desc contain 包含
* @desc fill 填充
* @desc cover 覆盖
* @desc 默认为 contain
*/
objectFit: VideoObjectFit;
/**
* @desc 视频封面的图片网络资源地址
* @desc 如果 controls 值为 false 则无效
*/
poster: string;
/**
* @desc 是否显示静音按钮
* @decs 默认为 false
*/
showMuteBtn: boolean;
/**
* @desc 视频的标题，全屏时在顶部展示
*/
title: string;
/**
* @desc 播放按钮的位置
* @desc bottom 控制栏上
* @desc center 视频中间
* @desc 默认为 bottom
*/
playBtnPosition: VideoPlayBtnPosition;
/**
* @desc 移动网络提醒样式
* @desc 0 不提醒
* @desc 1 提醒
* @desc 默认为 1
*/
mobilenetHintType: VideoMobilenetHintType;
/**
* @desc 是否开启播放手势，即双击切换播放、暂停
* @desc 默认为 false
*/
enablePlayGesture: boolean;
/**
* @desc 当跳转到其它小程序页面时，是否自动暂停本页面的视频
* @desc 默认为 true
*/
autoPauseIfNavigate: boolean;
/**
* @desc 当跳转到其它微信原生页面时，是否自动暂停本页面的视频
* @desc 默认为 true
*/
autoPauseIfOpenNative: boolean;
/**
* @desc 在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture）
* @desc 默认为 false
*/
vslideGesture: boolean;
/**
* @desc 在全屏模式下，是否开启亮度与音量调节手势
* @desc 默认为 true
*/
vslideGestureInFullscreen: boolean;
/**
* @desc 视频前贴广告单元ID
*/
adUnitId: string;
/**
* @desc 用于给搜索等场景作为视频封面展示
* @desc 建议使用无播放 icon 的视频封面图
* @desc 只支持网络地址
*/
posterForCrawler: string;
/**
* @desc 解码器选择
* @desc hardware 硬件解码
* @desc software 软件解码
* @desc 默认为 hardware
*/
codec: VideoCodec;
/**
* @desc 是否对 http、https 视频源开启本地缓存
* @desc 默认为 true
*/
httpCache: boolean;
/**
* @desc 播放策略
* @desc 0 普通模式，适合绝大部分视频播放场景
* @desc 1 平滑播放模式（降级），增加缓冲区大小，采用 open sl 解码音频，避免音视频脱轨的问题，可能会降低首屏展现速度、视频帧率，出现开屏音频延迟等，适用于高码率视频的极端场景
* @desc 2 M3U8 优化模式，增加缓冲区大小，提升视频加载速度和流畅度，可能会降低首屏展现速度，适用于 M3U8 在线播放的场景
* @desc 默认为 0
*/
playStrategy: VideoPlayStrategy;
/**
* @desc HTTP 请求 Header
*/
header: Record<string, any>;
/**
* @desc 开始/继续播放时触发
*/
onPlay: (event: BaseEvent) => void;
/**
* @desc 暂停播放时触发
*/
onPause: (event: BaseEvent) => void;
/**
* @desc 播放到末尾时触发
*/
onEnded: (event: BaseEvent) => void;
/**
* @desc 播放进度变化时触发
* @desc 250ms 一次
*/
onTimeupdate: (
event: CustomEvent<{
currentTime: number;
duration: number;
}>,
) => void;
/**
* @desc 视频进入和退出全屏时触发
*/
onFullscreenchange: (
event: CustomEvent<{
fullScreen: boolean;
direction: VideoProps['direction'];
}>,
) => void;
/**
* @desc 视频缓冲时触发
*/
onWaiting: (event: BaseEvent) => void;
/**
* @desc 视频播放出错时触发
*/
onError: (event: BaseEvent) => void;
/**
* @desc 加载进度变化时触发
*/
onProgress: (
event: CustomEvent<{
buffered: number;
}>,
) => void;
/**
* @desc 视频资源开始加载时触发
*/
onLoadeddata: (event: BaseEvent) => void;
/**
* @desc 开始加载数据时触发
*/
onLoadstart: (event: BaseEvent) => void;
/**
* @desc 拖动进度条结束时触发
*/
onSeeked: (event: BaseEvent) => void;
/**
* @desc 拖动进度条时触发
*/
onSeeking: (event: BaseEvent) => void;
/**
* @desc 视频元数据加载完成时触发
*/
onLoadedmetadata: (
event: CustomEvent<{
width: number;
height: number;
duration: number;
}>,
) => void;
/**
* @desc 视频播放全屏播放点击时触发
*/
onFullscreenclick: (
event: CustomEvent<{
screenX: number;
screenY: number;
screenWidth: number;
screenHeight: number;
}>,
) => void;
/**
* @desc 切换 controls 显示隐藏时触发
*/
onControlstoggle: (
event: CustomEvent<{
show: boolean;
}>,
) => void;
}
/**
* @desc 视频播放组件
* @desc 默认宽度 300px、高度 225px，可通过 css 设置宽高
*/
export type Video = Component<Partial<VideoProps>>;LivePlayer (live-player)
/**
* @desc 实时模式
* @dec live 直播
* @desc RTC 实时通话，该模式时延更低
*/
export type LivePlayerMode = 'live' | 'RTC';
/**
* @desc 画面方向
* @desc vertical 纵向
* @desc horizontal 横向
*/
export type LivePlayerOrientation = 'vertical' | 'horizontal';
/**
* @desc 填充模式
* @desc contain 图像长边填满屏幕，短边区域会被填充⿊⾊
* @desc fillCrop 图像铺满屏幕，超出显示区域的部分将被截掉
*/
export type LivePlayerObjectFit = 'contain' | 'fillCrop';
/**
* @desc 声音输出方式
* @desc speaker 扬声器
* @desc ear 听筒
* @desc 默认为 speaker
*/
export type LivePlayerSoundMode = 'speaker' | 'ear';
/**
* @desc 设置小窗模式
* @desc push 路由 push 时触发小窗
* @desc pop 路由 pop 时触发小窗
*/
export type LivePlayerPictureInPictureMode = 'push' | 'pop';
/**
* @desc 状态码
* @desc 2001 已经连接服务器
* @desc 2002 已经连接服务器，开始拉流
* @desc 2003 网络接收到首个视频数据包 IDR
* @desc 2004 视频播放开始
* @desc 2005 视频播放进度
* @desc 2006 视频播放结束
* @desc 2007 视频播放 Loading
* @desc 2008 解码器启动
* @desc 2009 视频分辨率改变
* @desc -2301 网络断连，且经多次重连抢救无效，更多重试请自行重启播放
* @desc -2302 获取加速拉流地址失败
* @desc 2101 当前视频帧解码失败
* @desc 2102 当前音频帧解码失败
* @desc 2103 网络断连, 已启动自动重连
* @desc 2104 网络来包不稳，可能是下行带宽不足，或由于主播端出流不均匀
* @desc 2105 当前视频播放出现卡顿
* @desc 2106 硬解启动失败，采用软解
* @desc 2107 当前视频帧不连续，可能丢帧
* @desc 2108 当前流硬解第一个 I 帧失败，SDK 自动切软解
* @desc 3001 RTMP - DNS解析失败
* @desc 3002 RTMP 服务器连接失败
* @desc 3003 RTMP 服务器握手失败
* @desc 3005 RTMP 读/写失败
*/
export type LivePlayerCode =
| 2001
| 2002
| 2003
| 2004
| 2005
| 2006
| 2007
| 2008
| 2009
| -2301
| -2302
| 2101
| 2102
| 2103
| 2104
| 2105
| 2106
| 2107
| 2108
| 3001
| 3002
| 3003
| 3005;
/**
* @desc 网络状态
*/
export interface LivePlayerInfo {
/**
* @desc 当前视频编/码器输出的比特率
* @desc 单位为 kbps
*/
videoBitrate?: number;
/**
* @desc 当前音频编/码器输出的比特率
* @desc 单位为 kbps
*/
audioBitrate?: number;
/**
* @desc 当前视频帧率
*/
videoFPS?: number;
/**
* @desc 当前视频 GOP，也就是每两个关键帧 I 帧间隔时长
* @desc 单位为 s
*/
videoGOP?: number;
/**
* @desc 当前的发送/接收速度
*/
netSpeed?: number;
/**
* @desc 网络抖动情况，抖动越大，网络越不稳定
*/
netJitter?: number;
/**
* @desc 网络质量
*/
netQualityLevel?: number;
/**
* @desc 视频画面的宽度
*/
videoWidth?: number;
/**
* @desc 视频画面的高度
*/
videoHeight?: number;
/**
* @desc 缓冲的视频总时长
* @desc 单位为 ms
*/
videoCache?: number;
/**
* @desc 缓冲的音频总时长
* @desc 单位为 ms
*/
audioCache?: number;
/**
* @desc 解码器中缓存的视频帧数 (Android 端硬解码时存在）
*/
vDecCacheSize?: number;
/**
* @desc 缓冲的总视频帧数，该数值越大，播放延迟越高
*/
vSumCacheSize?: number;
/**
* @desc 音画同步错位时间（播放），此数值越小，音画同步越好
* @desc 单位为 ms
*/
avPlayInterval?: number;
/**
* @desc 音画同步错位时间（网络），此数值越小，音画同步越好
* @decs