diff --git a/package.json b/package.json index eb761f96..ece249de 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "html-webpack-plugin": "^3.2.0", "less": "^3.9.0", "less-loader": "^4.1.0", + "miniprogram-api-typings": "^2.4.2-2", "postcss-loader": "^3.0.0", "progress-bar-webpack-plugin": "^1.11.0", "style-loader": "^0.23.1", diff --git a/packages/notice-bar/index.ts b/packages/notice-bar/index.ts index 2f6f0dc7..7556d703 100644 --- a/packages/notice-bar/index.ts +++ b/packages/notice-bar/index.ts @@ -80,7 +80,7 @@ VantComponent({ Promise.all([ this.getRect('.van-notice-bar__content'), this.getRect('.van-notice-bar__content-wrap') - ]).then((rects: BoundingClientRect[]) => { + ]).then((rects: wx.BoundingClientRectCallbackResult[]) => { const [contentRect, wrapRect] = rects; if ( contentRect == null || diff --git a/packages/tabs/index.ts b/packages/tabs/index.ts index 8642d6bf..da16dd54 100644 --- a/packages/tabs/index.ts +++ b/packages/tabs/index.ts @@ -105,7 +105,7 @@ VantComponent({ this.setTrack(); this.scrollIntoView(); - this.getRect('.van-tabs__wrap').then((rect: BoundingClientRect) => { + this.getRect('.van-tabs__wrap').then((rect: wx.BoundingClientRectCallbackResult) => { this.navHeight = rect.height; this.observerContentScroll(); }); @@ -157,7 +157,7 @@ VantComponent({ const { color, active, duration, lineWidth, lineHeight } = this.data; - this.getRect('.van-tab', true).then((rects: BoundingClientRect[]) => { + this.getRect('.van-tab', true).then((rects: wx.BoundingClientRectCallbackResult[]) => { const rect = rects[active]; const width = lineWidth !== -1 ? lineWidth : rect.width / 2; const height = lineHeight !== -1 ? `height: ${lineHeight}px;` : ''; @@ -190,7 +190,7 @@ VantComponent({ if (!animated) return ''; - this.getRect('.van-tabs__content').then((rect: BoundingClientRect) => { + this.getRect('.van-tabs__content').then((rect: wx.BoundingClientRectCallbackResult) => { const { width } = rect; this.set({ @@ -245,7 +245,7 @@ VantComponent({ this.getRect('.van-tab', true), this.getRect('.van-tabs__nav') ]).then( - ([tabRects, navRect]: [BoundingClientRect[], BoundingClientRect]) => { + ([tabRects, navRect]: [wx.BoundingClientRectCallbackResult[], wx.BoundingClientRectCallbackResult]) => { const tabRect = tabRects[active]; const offsetLeft = tabRects .slice(0, active) diff --git a/tsconfig.json b/tsconfig.json index cbd06868..e091c3e9 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,7 +3,8 @@ "baseUrl": ".", "target": "es6", "noImplicitThis": true, - "noImplicitUseStrict": true + "noImplicitUseStrict": true, + "typeRoots": ["./node_modules/miniprogram-api-typings"] }, "include": [ "types/**/*", diff --git a/types/weapp.d.ts b/types/weapp.d.ts index bbb237af..5407174e 100644 --- a/types/weapp.d.ts +++ b/types/weapp.d.ts @@ -4,7 +4,6 @@ type BehaviorOptions = { declare function Behavior(options: BehaviorOptions): void declare function Component(options: any): void -declare function getCurrentPages(): Weapp.Page[] declare namespace Weapp { interface Component { diff --git a/types/wx.d.ts b/types/wx.d.ts deleted file mode 100644 index be61128f..00000000 --- a/types/wx.d.ts +++ /dev/null @@ -1,516 +0,0 @@ -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: Partial): 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 - */ - id: string - /** - * 节点的 dataset - */ - 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: Partial): 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: Partial): IntersectionObserver - - /** - * 指定页面显示区域作为参照区域之一 - */ - relativeToViewport(object?: Partial): 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: Partial): Animation - - /** - * 返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中，应使用 this.createSelectorQuery() 来代替。 - */ - createSelectorQuery(): SelectorQuery - - createIntersectionObserver( - component: Weapp.Component, - options?: Partial - ): IntersectionObserver - - /** - * 显示消息提示框 - */ - showToast(options: { - /** - * 提示的内容 - */ - title: string - /** - * 图标 - */ - icon?: 'success' | 'loading' | 'none' - /** - * 自定义图标的本地路径，image 的优先级高于 icon - */ - image?: string - /** - * 提示的延迟时间 - */ - duration?: number - /** - * 是否显示透明蒙层，防止触摸穿透 - */ - mask?: boolean - /** - * 接口调用成功的回调函数 - */ - success?: () => void - /** - * 接口调用失败的回调函数 - */ - fail?: () => void - /** - * 接口调用结束的回调函数（调用成功、失败都会执行） - */ - complete?: () => void - }): void -} - -declare const wx: Wx; diff --git a/yarn.lock b/yarn.lock index 9dabb22f..5345fa11 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4713,6 +4713,11 @@ minipass@^2.2.1, minipass@^2.3.3: safe-buffer "^5.1.2" yallist "^3.0.0" +miniprogram-api-typings@^2.4.2-2: + version "2.4.2-2" + resolved "http://registry.npm.qima-inc.com/miniprogram-api-typings/download/miniprogram-api-typings-2.4.2-2.tgz#6963f29664b44628157edfb33babc3bde992fff1" + integrity sha1-aWPylmS0RigVft+zO6vDvemS//E= + minizlib@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.1.0.tgz#11e13658ce46bc3a70a267aac58359d1e0c29ceb"