my.getMenuButtonBoundingClientRect

2024-10-12 03:39

This API retrieves the layout position information of the capsule button (the top-right capsule) and the favorite button.

Note: To use this API, make sure you use the Appx with 1.25.4 or higher versions.

Sample Code

copy
<view class="page">
  <view class="page-section">
    <view class="page-section-title">my.getMenuButtonBoundingClientRect</view>
    <view class="page-section-btns">
      <button type="primary" onTap=getMenuButtonBoundingClientRect>Check favorite button position</button>
    </view>
  </view>
</view>

copy
getMenuButtonBoundingClientRect() {   
  const res = my.getMenuButtonBoundingClientRect();
  if (res) {
    my.alert({
      content: 'capsule info: ' + JSON.stringify(res),
    });
  }
}

Parameters

Property	Type	Required	Description
success	Function	No	The callback function for a successful API call.
fail	Function	No	The callback function for a failed API call.
complete	Function	No	The callback function used when the API call is completed. This function is always executed no matter the call succeeds or fails.

Success Callback Function

Property	Type	Description
width	Number	The width of the capsule button, in pixels (px)
height	Number	The height of the capsule button, in pixels (px)
top	Number	The upper boundary coordinate of the capsule button, in pixels (px), with the screen's top-left corner as the origin.
bottom	Number	The lower boundary coordinate of the capsule button, in pixels (px), with the screen's top-left corner as the origin.
left	Number	The left boundary coordinate of the capsule button, in pixels (px), with the screen's top-left corner as the origin.
right	Number	The right boundary coordinate of the capsule button, in pixels (px), with the screen's top-left corner as the origin.
favIcon	Object	The coordinates of the favorite button, in pixels (px). For details, see the following Object section.

Object

favIcon

Property	Type	Description
width	Number	The width of the favorite button width, in pixels (px).
height	Number	The height of the favorite button, in pixels (px) .
top	Number	The upper boundary coordinate of the favorite button, in pixels (px), with the screen's top-left corner as the origin.
bottom	Number	The lower boundary coordinate of the favorite button, in pixels (px), with the screen's top-left corner as the origin.
left	Number	The left boundary coordinate of the favorite button, in pixels (px), with the screen's top-left corner as the origin.
right	Number	The right boundary coordinate of the favorite button, in pixels (px), with the screen's top-left corner as the origin.

Error Codes

Error Code

Error Message

Further action

1111

not titleBar

When invoking this interface, if the left value (or similar) on iOS is 0, or if Android returns an error {error: 1111, errorMessage: 'not titleBar'}, it is possible that the capsule button in the navigation bar has not completed rendering.

Try to invoke this interface again later to ensure that the capsule button has been fully rendered.

Q&A

How to obtain the position of the favorite button？

Use themy.getMenuButtonBoundingClientRect JSAPI to obtain information related to the favIcon(indicating the the favorite button).

How to obtain the collection status of mini program?

Use the my.isCollected JSAPI to determine whether the mini program is collected.

Why is the capsule position data inaccurate or even negative?

On iOS, the top, left, and similar values may sometimes be 0. This issue can be avoided by calling the function with a short delay.

What is the reason for receiving a 'not titleBar' error when invoking this JSAPI?

This issue might arise if the navigation bar capsule button has not yet fully rendered. Consider invoking this API again after waiting for a short period. For more information, see the Error Codes section.