diff --git a/types/weapp.d.ts b/types/weapp.d.ts index a699f268..bbb237af 100644 --- a/types/weapp.d.ts +++ b/types/weapp.d.ts @@ -2,54 +2,81 @@ type BehaviorOptions = { [key: string]: any & ThisType }; -type WX = { - [key: string]: any -}; - -declare const wx: WX; -declare function Behavior(options: BehaviorOptions): void; -declare function Component(options: any): void; -declare function getCurrentPages(): Weapp.Page[]; +declare function Behavior(options: BehaviorOptions): void +declare function Component(options: any): void +declare function getCurrentPages(): Weapp.Page[] declare namespace Weapp { interface Component { - [key: string]: any; - getRelationNodes(selector: string): any[]; - setData(data: any, callback?: Function): void; + [key: string]: any + getRelationNodes(selector: string): any[] + setData(data: any, callback?: Function): void } interface FormField { data: { - name: string; - value: any; + name: string + value: any } } interface Target { - id: string; - tagName: string; - dataset: any; + id: string + tagName: string + dataset: { + [key: string]: any + } } interface Event { - type: string; - detail: any; - timeStamp: number; - target: Target; - currentTarget: Target; + /** + * 代表事件的类型。 + */ + type: string + /** + * 页面打开到触发事件所经过的毫秒数。 + */ + timeStamp: number + /** + * 触发事件的源组件。 + */ + target: Target + /** + * 事件绑定的当前组件。 + */ + currentTarget: Target + /** + * 额外的信息 + */ + detail: any } interface Touch { - identifier: number; - pageX: number; - pageY: number; - clientX: number; - clientY: number; + /** + * 触摸点的标识符 + */ + identifier: number + /** + * 距离文档左上角的距离,文档的左上角为原点 ,横向为X轴,纵向为Y轴 + */ + pageX: number + /** + * 距离文档左上角的距离,文档的左上角为原点 ,横向为X轴,纵向为Y轴 + */ + pageY: number + /** + * 距离页面可显示区域(屏幕除去导航条)左上角距离,横向为X轴,纵向为Y轴 + */ + clientX: number + /** + * 距离页面可显示区域(屏幕除去导航条)左上角距离,横向为X轴,纵向为Y轴 + */ + clientY: number } interface TouchEvent extends Event { - touches: Array; - changedTouches: Array; + touches: Array + changedTouches: Array } interface Page { diff --git a/types/wx.d.ts b/types/wx.d.ts new file mode 100644 index 00000000..c065185d --- /dev/null +++ b/types/wx.d.ts @@ -0,0 +1,454 @@ +interface SystemInfo { + /** + * 设备品牌 + */ + brand: string + /** + * 设备型号 + */ + model: string + /** + * 设备像素比 + */ + pixelRatio: number + /** + * 屏幕宽度,单位px + */ + screenWidth: number + /** + * 屏幕高度,单位px + */ + screenHeight: number + /** + * 可使用窗口宽度,单位px + */ + windowWidth: number + /** + * 可使用窗口高度,单位px + */ + windowHeight: number + /** + * 状态栏的高度,单位px + */ + statusBarHeight: number + /** + * 微信设置的语言 + */ + language: string + /** + * 微信版本号 + */ + version: string + /** + * 操作系统及版本 + */ + system: string + /** + * 客户端平台 + */ + platform: string + /** + * 用户字体大小(单位px)。以微信客户端「我-设置-通用-字体大小」中的设置为准 + */ + fontSizeSetting: number + /** + * 客户端基础库版本 + */ + SDKVersion: string + /** + * 设备性能等级(仅Android小游戏)。取值为:-2 或 0(该设备无法运行小游戏),-1(性能未知),>=1(设备性能值,该值越高,设备性能越好,目前最高不到50) + */ + benchmarkLevel: number +} + +type TimingFunction = + | 'linear' + | 'ease' + | 'ease-in' + | 'ease-in-out' + | 'ease-out' + | 'step-start' + | 'step-end'; + +interface AnimationOptions { + /** + * 动画持续时间,单位ms + */ + duration?: number + /** + * 定义动画的效果 + */ + timingFunction?: TimingFunction + /** + * 动画延迟时间,单位 ms + */ + delay?: number + /** + * 设置transform-origin + */ + transformOrigin?: string +} + +interface Animation { + /** + * 导出动画队列。export 方法每次调用后会清掉之前的动画操作。 + */ + export(): object + + /** + * 表示一组动画完成。可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。 + */ + step(object: AnimationOptions): void + + /** + * 透明度,参数范围 0~1 + */ + opacity(value: number): Animation + + /** + * 颜色值 + */ + backgroundColor(color: string): Animation + /** + * 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值 + */ + width(length: number): Animation + /** + * 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值 + */ + height(length: number): Animation + /** + * 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值 + */ + top(length: number): Animation + /** + * 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值 + */ + left(length: number): Animation + /** + * 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值 + */ + bottom(length: number): Animation + /** + * 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值 + */ + right(length: number): Animation + /** + * deg的范围-180~180,从原点顺时针旋转一个deg角度 + */ + rotate(deg: number): Animation + /** + * deg的范围-180~180,在X轴旋转一个deg角度 + */ + rotateX(deg: number): Animation + /** + * deg的范围-180~180,在Y轴旋转一个deg角度 + */ + rotateY(deg: number): Animation + /** + * deg的范围-180~180,在Z轴旋转一个deg角度 + */ + rotateZ(deg: number): Animation + /** + * 同transform-function rotate3d + */ + rotate3d(x: number, y: number, z: number, deg: number): Animation + /** + * 一个参数时,表示在X轴、Y轴同时缩放sx倍数;两个参数时表示在X轴缩放sx倍数,在Y轴缩放sy倍数 + */ + scale(sx: number, sy?: number): Animation + /** + * 在X轴缩放sx倍数 + */ + scaleX(sx: number): Animation + /** + * 在Y轴缩放sy倍数 + */ + scaleY(sy: number): Animation + /** + * 在Z轴缩放sy倍数 + */ + scaleZ(sz: number): Animation + /** + * 在X轴缩放sx倍数,在Y轴缩放sy倍数,在Z轴缩放sz倍数 + */ + scale3d(sx: number, sy: number, sz: number): Animation + /** + * 一个参数时,表示在X轴偏移tx,单位px;两个参数时,表示在X轴偏移tx,在Y轴偏移ty,单位px。 + */ + translate(tx: number, ty?: number): Animation + /** + * 在X轴偏移tx,单位px + */ + translateX(tx: number): Animation + /** + * 在Y轴偏移tx,单位px + */ + translateY(tx: number): Animation + /** + * 在Z轴偏移tx,单位px + */ + translateZ(tx: number): Animation + /** + * 在X轴偏移tx,在Y轴偏移ty,在Z轴偏移tz,单位px + */ + translate3d(tx: number, ty: number, tz: number): Animation + /** + * 参数范围-180~180;一个参数时,Y轴坐标不变,X轴坐标延顺时针倾斜ax度;两个参数时,分别在X轴倾斜ax度,在Y轴倾斜ay度 + */ + skew(ax: number, ay?: number): Animation + /** + * 参数范围-180~180;Y轴坐标不变,X轴坐标延顺时针倾斜ax度 + */ + skewX(ax: number): Animation + /** + * 参数范围-180~180;X轴坐标不变,Y轴坐标延顺时针倾斜ay度 + */ + skewY(ay: number): Animation + /** + * 同transform-function matrix + */ + matrix( + a: number, + b: number, + c: number, + d: number, + tx: number, + ty: number + ): Animation + /** + * 同transform-function matrix3d + */ + matrix3d(): Animation +} + +interface FieldsOptions { + /** + * 是否返回节点 id + */ + id?: boolean + /** + * 是否返回节点 dataset + */ + dataset?: boolean + rect?: boolean + size?: boolean + scrollOffset?: boolean + properties?: string[] + computedStyle?: string[] + context?: boolean +} + +interface BoundingClientRect { + id: string + dataset: object + left: number + right: number + top: number + bottom: number + width: number + height: number +} + +interface IntersectionRect { + /** + * 左边界 + */ + left: number + /** + * 右边界 + */ + right: number + /** + * 上边界 + */ + top: number + /** + * 下边界 + */ + bottom: number +} + +interface ScrollOffset { + /** + * 节点的 ID + */ + id: string + /** + * 节点的 dataset + */ + dataset: Object + /** + * 节点的水平滚动位置 + */ + scrollLeft: number + /** + * 节点的竖直滚动位置 + */ + scrollTop: number +} + +interface NodesRef { + /** + * 获取节点的相关信息。需要获取的字段在fields中指定。返回值是 nodesRef 对应的 selectorQuery + */ + fields(object: FieldsOptions): object + + /** + * 添加节点的布局位置的查询请求。相对于显示区域,以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery。 + */ + boundingClientRect(callback: (res: BoundingClientRect) => void): SelectorQuery + + /** + * 添加节点的滚动位置查询请求。以像素为单位。节点必须是 scroll-view 或者 viewport,返回 NodesRef 对应的 SelectorQuery。 + */ + scrollOffset(callback: (res: ScrollOffset) => void): SelectorQuery + + /** + * 添加节点的 Context 对象查询请求。目前支持 VideoContext、CanvasContext、LivePlayerContext 和 MapContext 的获取。 + */ + context(callback: (res: { content: any }) => void): SelectorQuery +} + +interface SelectorQuery { + /** + * 将选择器的选取范围更改为自定义组件 component 内。(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点)。 + * @param component [description] + */ + in(component: Weapp.Component): SelectorQuery + + /** + * 在当前页面下选择第一个匹配选择器 selector 的节点。返回一个 NodesRef 对象实例,可以用于获取节点信息。 + */ + select(selector: string): NodesRef + + /** + * 在当前页面下选择匹配选择器 selector 的所有节点。 + */ + selectAll(selector: string): NodesRef + + /** + * 选择显示区域。可用于获取显示区域的尺寸、滚动位置等信息。 + */ + selectViewport(): NodesRef + + /** + * 执行所有的请求。请求结果按请求次序构成数组,在callback的第一个参数中返回。 + */ + exec(callback?: Function): NodesRef +} + +interface ObserverOptions { + /** + * 一个数值数组,包含所有阈值。 + */ + thresholds?: number[] + /** + * 初始的相交比例,如果调用时检测到的相交比例与这个值不相等且达到阈值,则会触发一次监听器的回调函数。 + */ + initialRatio?: number + /** + * 是否同时观测多个目标节点(而非一个),如果设为 true ,observe 的 targetSelector 将选中多个节点(注意:同时选中过多节点将影响渲染性能) + */ + observeAll?: boolean +} + +interface Margins { + /** + * 节点布局区域的左边界 + */ + left: number + /** + * 节点布局区域的右边界 + */ + right: number + /** + * 节点布局区域的上边界 + */ + top: number + /** + * 节点布局区域的下边界 + */ + bottom: number +} + +interface IntersectionObserver { + /** + * 停止监听。回调函数将不再触发 + */ + disconnect(): void + + /** + * 使用选择器指定一个节点,作为参照区域之一。 + */ + relativeTo(selector: string, object: Margins): IntersectionObserver + + /** + * 指定页面显示区域作为参照区域之一 + */ + relativeToViewport(object: Margins): IntersectionObserver + + /** + * 指定目标节点并开始监听相交状态变化情况 + */ + observe( + selector: string, + callback: ( + object: { + /** + * 相交比例 + */ + intersectionRatio: number + /** + * 相交区域的边界 + */ + intersectionRect: IntersectionRect + /** + * 目标边界 + */ + boundingClientRect: IntersectionRect + /** + * 参照区域的边界 + */ + relativeRect: IntersectionRect + /** + * 相交检测时的时间戳 + */ + time: number + } + ) => void + ): void +} + +interface Wx { + /** + * 获取系统信息 + */ + getSystemInfo(object: { + success: (res: SystemInfo) => void + fail?: () => void + complete?: () => void + }): void + + /** + * 获取系统信息 + */ + getSystemInfoSync(): SystemInfo + + /** + * 创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。 + */ + createAnimation(object: AnimationOptions): Animation + + /** + * 返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中,应使用 this.createSelectorQuery() 来代替。 + */ + createSelectorQuery(): SelectorQuery + + createIntersectionObserver( + component: Weapp.Component, + options: ObserverOptions + ): IntersectionObserver +} + +declare const wx: Wx;