ele.getBoundingClientRect() promise在支付宝小程序渠道一直不resolve

[zhubeniii]

相关平台

支付宝小程序

复现仓库

[email protected]:zhubeniii/taro-getBoundingClientRect-alipay-issue.git
小程序基础库: 2.9.30
使用框架: React

复现步骤

pnpm i
pnpm dev:alipay
启动项目

期望结果

代码走到debugger

实际结果

一直走不到promise.then的回调

环境信息

👽 Taro v3.6.31


  Taro CLI 3.6.31 environment info:
    System:
      OS: macOS 12.7.4
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
      Yarn: 1.22.22 - ~/.nvm/versions/node/v20.17.0/bin/yarn
      npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.31 => 3.6.31 
      @tarojs/components: 3.6.31 => 3.6.31 
      @tarojs/helper: 3.6.31 => 3.6.31 
      @tarojs/plugin-framework-react: 3.6.31 => 3.6.31 
      @tarojs/plugin-html: ^3.6.31 => 3.6.31 
      @tarojs/plugin-platform-alipay: 3.6.31 => 3.6.31 
      @tarojs/plugin-platform-h5: 3.6.31 => 3.6.31 
      @tarojs/plugin-platform-jd: 3.6.31 => 3.6.31 
      @tarojs/plugin-platform-qq: 3.6.31 => 3.6.31 
      @tarojs/plugin-platform-swan: 3.6.31 => 3.6.31 
      @tarojs/plugin-platform-tt: 3.6.31 => 3.6.31 
      @tarojs/plugin-platform-weapp: 3.6.31 => 3.6.31 
      @tarojs/react: 3.6.31 => 3.6.31 
      @tarojs/runtime: 3.6.31 => 3.6.31 
      @tarojs/shared: 3.6.31 => 3.6.31 
      @tarojs/taro: 3.6.31 => 3.6.31 
      @tarojs/taro-loader: 3.6.31 => 3.6.31 
      @tarojs/webpack5-runner: 3.6.31 => 3.6.31 
      babel-preset-taro: 3.6.31 => 3.6.31 
      eslint-config-taro: 3.6.31 => 3.6.31 
      react: ^18.0.0 => 18.3.1 

[StepToTop]

ref: https://opendocs.alipay.com/mini/api/na4yun

我看了下支付宝小程序，getBoundingClientRect是要把回调函数作为参数传入放在exec而不是传入boundingClientRect里面的，要针对支付宝平台进行适配

@tutuxxx

[StepToTop]

@zhubeniii 临时方案可以试试这个，调用原生的办法去做，前提是识别一下当前使用平台是支付宝

    const query = Taro.miniGlobal.createSelectorQuery();
    query.select(`#${ref.current.uid}`).boundingClientRect().exec((res) => {
      // 这里写你的逻辑
      // 这里可以获取节点布局位置信息
      console.log("exec", res);
    });

如果你要在useLoad里面获取的话，需要加一个nextTick，Taro和支付宝小程序生命周期有点对不上

  useLoad(() => {
    Taro.nextTick(() => {
      const query = Taro.miniGlobal.createSelectorQuery();
      query.select(`#${ref.current.uid}`).boundingClientRect().exec((res) => {
        // 这里写你的逻辑
        // 这里可以获取节点布局位置信息
        console.log("exec", res);
      });
    });
  });

[GreatAuk]

问下 issue 现在怎么提了，现在点击 New issue 提示