小程序——界面API（二）

界面API（二）

• 一、置顶
• • 1.1、wx.setTopBarText
• 二、自定义组件
• • [2.1、wx.nextTick(function callback)](#2.1、wx.nextTick(function callback))
• 三、菜单
• • [3.1、wx.onUserTriggerTranslation(function listener)](#3.1、wx.onUserTriggerTranslation(function listener))
  • [3.2、wx.onUserOffTranslation(function listener)](#3.2、wx.onUserOffTranslation(function listener))
  • [3.3、wx.onMenuButtonBoundingClientRectWeightChange(function listener)](#3.3、wx.onMenuButtonBoundingClientRectWeightChange(function listener))
  • [3.4、wx.offUserTriggerTranslation(function listener)](#3.4、wx.offUserTriggerTranslation(function listener))
  • [3.5、wx.offUserOffTranslation(function listener)](#3.5、wx.offUserOffTranslation(function listener))
  • [3.6、wx.offMenuButtonBoundingClientRectWeightChange(function listener)](#3.6、wx.offMenuButtonBoundingClientRectWeightChange(function listener))
  • [3.7、Object wx.getMenuButtonBoundingClientRect()](#3.7、Object wx.getMenuButtonBoundingClientRect())
• 四、窗口
• • 4.1、wx.setWindowSize
  • 4.2、wx.onWindowStateChange
  • [4.3、wx.onWindowResize(function listener)](#4.3、wx.onWindowResize(function listener))
  • 4.4、wx.onParallelStateChange
  • 4.5、wx.offWindowStateChange
  • 4.6、wx.offWindowResize
  • 4.7、wx.offParallelStateChange
  • 4.8、wx.checkIsPictureInPictureActive

一、置顶

1.1、wx.setTopBarText

动态设置置顶栏文字内容。只有当前小程序被置顶时能生效，如果当前小程序没有被置顶，也能调用成功，但是不会立即生效，只有在用户将这个小程序置顶后才换上设置的文字内容.

参数：Object object

属性	类型	默认值	必填	说明
text	string		是	置顶栏文字
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

wx.setTopBarText({
  text: 'hello, world!'
})

二、自定义组件

2.1、wx.nextTick(function callback)

延迟一部分操作到下一个时间片再执行。（类似于 setTimeout）

因为自定义组件中的 setData 和 triggerEvent 等接口本身是同步的操作，当这几个接口被连续调用时，都是在一个同步流程中执行完的，因此若逻辑不当可能会导致出错。
一个极端的案例：当父组件的 setData 引发了子组件的 triggerEvent，进而使得父组件又进行了一次 setData，期间有通过 wx:if 语句对子组件进行卸载，就有可能引发奇怪的错误，所以对于不需要在一个同步流程内完成的逻辑，可以使用此接口延迟到下一个时间片再执行。

Component({
  doSth() {
    this.setData({ number: 1 }) // 直接在当前同步流程中执行

    wx.nextTick(() => {
      this.setData({ number: 3 }) // 在当前同步流程结束后，下一个时间片执行
    })

    this.setData({ number: 2 }) // 直接在当前同步流程中执行
  }
})

三、菜单

3.1、wx.onUserTriggerTranslation(function listener)

监听用户触发小程序菜单中翻译功能的事件

参数：unction listener

用户触发小程序菜单中翻译功能的事件的监听函数

• locale string ：翻译到的目标语言

• type string ：触发来源， button 表示点击了菜单中的翻译按钮， capsule 表示点击了胶囊中的翻译提示

const callback = res => console.log('userTriggerTranslation', res)

wx.onUserTriggerTranslation(callback)
// 取消监听
wx.offUserTriggerTranslation(callback)

3.2、wx.onUserOffTranslation(function listener)

监听用户主动取消翻译的事件

const callback = () => console.log('userTriggerTranslation')

wx.onUserOffTranslation(callback)
// 取消监听
wx.offUserOffTranslation(callback)

3.3、wx.onMenuButtonBoundingClientRectWeightChange(function listener)

监听菜单按钮（右上角胶囊按钮）的布局位置信息变化事件

参数：function listener

Object res

属性	类型	说明
width	number	宽度，单位：px
height	number	高度，单位：px
top	number	上边界坐标，单位：px
right	number	右边界坐标，单位：px
bottom	number	下边界坐标，单位：px
left	number	左边界坐标，单位：px

const callback = res => console.log('menuButtonBoundingClientRectWeightChange', res)

wx.onMenuButtonBoundingClientRectWeightChange(callback)
// 取消监听
wx.offMenuButtonBoundingClientRectWeightChange(callback)

3.4、wx.offUserTriggerTranslation(function listener)

移除用户触发小程序菜单中翻译功能的事件的监听函数

const listener = function (res) { console.log(res) }

wx.onUserTriggerTranslation(listener)
wx.offUserTriggerTranslation(listener) // 需传入与监听时同一个的函数对象

3.5、wx.offUserOffTranslation(function listener)

移除用户主动取消翻译的事件的监听函数

const listener = function (res) { console.log(res) }

wx.onUserOffTranslation(listener)
wx.offUserOffTranslation(listener) // 需传入与监听时同一个的函数对象

3.6、wx.offMenuButtonBoundingClientRectWeightChange(function listener)

移除菜单按钮（右上角胶囊按钮）的布局位置信息变化事件的监听函数

const listener = function (res) { console.log(res) }

wx.onMenuButtonBoundingClientRectWeightChange(listener)
wx.offMenuButtonBoundingClientRectWeightChange(listener) // 需传入与监听时同一个的函数对象

3.7、Object wx.getMenuButtonBoundingClientRect()

获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。

**返回值：Object **

菜单按钮的布局位置信息

属性	类型	说明
width	number	宽度，单位：px
height	number	高度，单位：px
top	number	上边界坐标，单位：px
right	number	右边界坐标，单位：px
bottom	number	下边界坐标，单位：px
left	number	左边界坐标，单位：px

const res = wx.getMenuButtonBoundingClientRect()

console.log(res.width)
console.log(res.height)
console.log(res.top)
console.log(res.right)
console.log(res.bottom)
console.log(res.left)

四、窗口

4.1、wx.setWindowSize

设置窗口大小，该接口仅适用于 PC 平台，使用细则请参见指南

参数：Object object

属性	类型	默认值	必填	说明
`width·	number		是	窗口宽度，以像素为单位
height	number		是	窗口高度，以像素为单位
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

4.2、wx.onWindowStateChange

监听小程序窗口状态变化事件。仅适用于 PC 平台

参数：function listener

小程序窗口状态变化事件的监听函数

参数 Object res

属性	类型	说明
state	string 改变的窗口状态，可能的值为：

• 'minimize'：窗口最小化
• 'normalize'：窗口恢复正常尺寸
• 'maximize'：窗口最大化

4.3、wx.onWindowResize(function listener)

监听窗口尺寸变化事件

参数：function listener

窗口尺寸变化事件的监听函数

参数 Object res

属性	类型	说明
size	Object 可能的值为：

• windowWidth：变化后的窗口宽度，单位 px
• windowHeight：变化后的窗口高度，单位 px

4.4、wx.onParallelStateChange

监听小程序分栏状态变化事件。仅适用于 PC 平台

参数：function listener

小程序分栏状态变化事件的监听函数

参数 Object res

属性	类型	说明
isOnParallel	boolean	当前是否分栏
rightPage	Page	分栏右侧页面对象（非分栏状态时返回当前页面）
leftPage	Page	分栏左侧页面对象（非分栏状态时返回当前页面）

4.5、wx.offWindowStateChange

移除小程序窗口状态变化事件的监听函数

const listener = function (res) { console.log(res) }

wx.onWindowStateChange(listener)
wx.offWindowStateChange(listener) // 需传入与监听时同一个的函数对象

4.6、wx.offWindowResize

移除窗口尺寸变化事件的监听函数

const listener = function (res) { console.log(res) }

wx.onWindowResize(listener)
wx.offWindowResize(listener) // 需传入与监听时同一个的函数对象

4.7、wx.offParallelStateChange

移除小程序分栏状态变化事件的监听函数

const listener = function (res) { console.log(res) }

wx.onParallelStateChange(listener)
wx.offParallelStateChange(listener) // 需传入与监听时同一个的函数对象

4.8、wx.checkIsPictureInPictureActive

返回当前是否存在小窗播放（小窗在 video/live-player/live-pusher 下可用）