zoukankan      html  css  js  c++  java
  • 微信小程序获取胶囊的位置API wx.getMenuButtonBoundingClientRect()获取失败的处理

    wx.getMenuButtonBoundingClientRect() ios手机偶尔复现是0

    这个问题很早就有但是微信官方也一直没有解决,下面给大家介绍一个兼容做法(wx.getMenuButtonBoundingClientRect()["top"]举个例子)

    1,步骤一 在app.js onLaunch生命周期中首次获取(这段代码在ios微信端有时候会返回0)

    onLaunch: function (page) {
        // 获取用户信息
        let getMenuTop = wx.getMenuButtonBoundingClientRect()["top"];
        wx.setStorageSync('statusBarHeight', getMenuTop);
        if (getMenuTop == 0) {
          setTimeout(() => {
            getMenuTop = wx.getMenuButtonBoundingClientRect()["top"];
            wx.setStorageSync('statusBarHeight', getMenuTop);
          }, 400)
        }
      },
    ...
    
    globalData: {
        statusBarHeight: wx.getMenuButtonBoundingClientRect()["top"]
      }

    我们在用户首次进入我们小程序时候,用wx.getMenuButtonBoundingClientRect()["top"]获取一次手机胶囊top信息,这时候如果返回0

    我们延迟400毫秒再获取一次,这时候将获取的值缓存起来。

    *这里你问我为什么不是已经在globalData中,不用globalData,干嘛要写进缓存?

      答:实际项目上发现 如果在index.js(首页)修改globalData了里面的statusBarHeight,在其他页面拿globalData里的值还是原来的值。

      所以缓存是最好的办法

    2,步骤二 在index.js onReady 里面再获取一次(有了这一次保险,获取就一点问题没有)

    onReady() {
        const _this = this;
        let getMenuTop = wx.getMenuButtonBoundingClientRect()["top"];
        if (wx.getStorageSync('statusBarHeight') == 0) {
          setTimeout(() => {
            wx.setStorageSync('statusBarHeight', getMenuTop);
            _this.setData({
              statusBarHeight: getMenuTop,
            });
          }, 400);
        }
      },

    但是,这个方法是在首次进入就打开index(首页)的是适用,如果你的需求是进入商品详情,那么就在商品详情(相对应的)页面添加

    3,特别注意,如果你是在组件 Component 中获取高度,在 attached 组件生命周期中是最好的

    lifetimes: {
        attached: function () {
          this.setData({
            statusBarHeight: wx.getStorageSync('statusBarHeight')
          })
          console.log(this);
        },
      },
  • 相关阅读:
    【转自己的落谷博客】联通块的dfs
    STL中map的简单使用&常数优化
    转自自己的关于落谷计数器【p1239】的题解
    计算机网络三种模型
    docker的常用的一些配置
    容器整体性理解
    如何在类中定义装饰器?
    如何实现属性可修改的函数装饰器?
    如何定义带参数装饰器?
    如何为被装饰的函数保存元数据?
  • 原文地址:https://www.cnblogs.com/Webzhoushifa/p/15024238.html
Copyright © 2011-2022 走看看