uni-app 支付宝小程序241230新增接口my.getLeftButtonsBoundingClientRect

发布于 1周前 作者 ionicwang 来自 Uni-App

uni-app 支付宝小程序241230新增接口my.getLeftButtonsBoundingClientRect
有关支付宝小程序导航栏升级的通知
点击查看详细信息

  • 小程序导航栏右上角胶囊按钮中的“关闭”升级为“收起”，对应样式也进行了调整。用户点击收起之后，将直接回退至支付宝首页。
    • 收起的小程序将被挂起至后台，用户可以从支付宝首页右上角的“+”里再次访问
    • 原先“关闭”按钮对应的“返回上一个应用”的行为由小程序首页的“返回”按钮承接
  • 小程序导航栏左侧统一添加“返回”按钮（见下图第一部分），用户点击返回按钮，将默认回退到上一级页面；如果当前已经在首页，将返回上一个应用。
    • 若开发者使用了自定义导航栏，出现轻微遮挡等情况，请使用 my.getLeftButtonsBoundingClientRect 接口进行适配，详见《导航栏行为升级开发者适配指南》

目前 my.getLeftButtonsBoundingClientRect 接口 uniapp 还没有对应的内容，请问什么时候可以适配？


Harmonyos Next教程
3 回复

本身编译的就是支付宝小程序 直接用就行



谢谢

在uni-app开发支付宝小程序时，对于新增的接口my.getLeftButtonsBoundingClientRect，这个接口主要用于获取页面左侧按钮的布局位置信息。这个信息通常用于精确控制UI元素的布局，特别是在需要动态调整元素位置或进行碰撞检测时非常有用。

以下是一个使用my.getLeftButtonsBoundingClientRect接口的示例代码，展示了如何在uni-app的支付宝小程序中获取左侧按钮的布局位置信息，并简单处理这些信息。

首先，确保你的uni-app项目已经配置好支付宝小程序的支持，并且在pages.json中定义了页面路径。

示例代码

1. 在页面的.vue文件中添加代码

<template>
  <view>
    <button @click="getLeftButtonsRect">获取左侧按钮布局信息</button>
    <view v-if="rectInfo">
      <text>Left: {{ rectInfo.left }}</text>
      <text>Top: {{ rectInfo.top }}</text>
      <text>Width: {{ rectInfo.width }}</text>
      <text>Height: {{ rectInfo.height }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      rectInfo: null
    };
  },
  methods: {
    getLeftButtonsRect() {
      uni.showLoading({ title: '获取布局信息中...' });
      my.getLeftButtonsBoundingClientRect({
        success: (res) => {
          uni.hideLoading();
          this.rectInfo = res;
          console.log('左侧按钮布局信息:', res);
        },
        fail: (err) => {
          uni.hideLoading();
          console.error('获取布局信息失败:', err);
        }
      });
    }
  }
};
</script>

<style scoped>
/* 添加一些基本样式以便观察效果 */
button {
  margin-top: 50px;
}
view {
  margin-top: 20px;
}
text {
  display: block;
  margin-top: 5px;
}
</style>

说明

  • getLeftButtonsRect方法通过调用my.getLeftButtonsBoundingClientRect接口获取左侧按钮的布局信息。
  • 获取到的布局信息存储在rectInfo变量中，并在页面上显示出来。
  • 使用uni.showLoading和uni.hideLoading来显示和隐藏加载提示，提升用户体验。
  • 错误处理部分通过fail回调打印错误信息。

请注意，由于my.getLeftButtonsBoundingClientRect是支付宝小程序特有的接口，因此该代码只能在支付宝小程序环境中运行。在编写和运行代码时，请确保你的开发环境和目标平台是匹配的。

回到顶部