微信小游戏获得胶囊按钮位置

最新推荐文章于 2025-07-17 10:56:54 发布
原创 最新推荐文章于 2025-07-17 10:56:54 发布 · 3.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何使用wx.getMenuButtonBoundingClientRect()获取微信小游戏右上角胶囊按钮的布局位置信息。返回值是一个对象，包含top、right、bottom和left等属性，表示相对于屏幕左上角的坐标。通过坐标转换，可以将这些信息应用于游戏场景中。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

首先是官方文档信息：

Object wx.getMenuButtonBoundingClientRect()

基础库 2.1.0 开始支持，低版本需做兼容处理。

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

返回值

Object

菜单按钮的布局位置信息

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

要注意的tip

最低0.47元/天 解锁文章

200万优质内容无限畅学
微信小程序获取胶囊信息并对齐
weixin_44850797的博客
11-25 2294
之前一直是开发app，为了裂变用户要转向小程序，才知道右上角这个东西叫胶囊 接到公司需求要将上方的搜索栏和将囊对齐并且一样宽，用了position：fixed样式后发现不管是用px还是rpx还是其他单位都无法解决不同手机型号的兼容问题，这个手机对齐了，其他手机就无法对齐。 最后发现原来官网有这个胶囊信息的获取uni.getMenuButtonBoundingClientRect() 链接: uniapp官网关于uni.getMenuButtonBoundingClientRect() 我是通过这个方法动态
微信小程序自定义导航栏胶囊菜单按钮高度适配问题
ayuday的博客
04-17 2115
而胶囊信息可以通过 wx.getMenuButtonBoundingClientRect() 获取，现在就只用解决高度差了。观察发现，胶囊顶部高度距导航栏顶部高度的高度差 和 胶囊底部高度距导航栏底部高度的高度差，是一样的。这是在没有设置自定义时的原生导航栏，我们发现整体的高度就是 （状态栏高度 + 导航栏高度）而状态栏高度可以通过 wx.getSystemInfo(）获取，现在就只用解决导航栏高度了。也就是说 导航栏高度 = 胶囊高度 +（高度差）x 2。组件使用页面.json。
适配微信小游戏菜单按钮（胶囊）位置
weixin_42276579的博客
01-15 1654
适配微信小游戏菜单按钮（胶囊）位置 获取胶囊布局位置信息 Api: wx.getMenuButtonBoundingClientRect() 转化为游戏内坐标 比例 = 游戏设计尺寸（宽或高） / 屏幕尺寸（宽或高） 然后 微信胶囊的尺寸 * 比例即可转为游戏内坐标 屏幕尺寸获取 Api: wx.getSystemInfoSync() ...
微信小程序自定义导航栏内容 胶囊菜单按钮高度适配
最新发布
weixin_73077230的博客
07-17 199
小程序导航栏适配需动态计算高度，不同机型状态栏和胶囊高度不同。通过wx.getSystemInfo()获取状态栏高度，wx.getMenuButtonBoundingClientRect()获取胶囊信息。导航栏高度=胶囊高度+2*(胶囊top-状态栏高度)。某东适配最佳但仍存轻微错位，通过颜色设计弱化视觉差异。伪代码实现：menu.height + (menu.top - system.statusBarHeight)*2 + system.statusBarHeight。内容标签需设置与胶囊同高并垂直居中
微信小游戏，获取菜单按钮（右上角胶囊按钮）的布局位置信息。
qq_20173207的博客
05-07 1594
获取胶囊按钮的位置信息 想获取一下，胶囊按钮的位置，网上没找了找，自己封装一下吧 // 获取的胶囊的大小，位置 // 得到的结果和 widget 组件类似 getMenuButtonBoundingRect() { if (cc.sys.platform === cc.sys.WECHAT_GAME) { let systemInfo = wx.getSy...
微信小游戏胶囊按钮适配
qq_15838611的博客
10-26 1356
1.核心代码 wx.getMenuButtonBoundingClientRect() 2.主要事项 1.获得的值为rpx，要经过转化才能用 'height':height*750 / systemInfo.windowWidth 2.还有个坑需要特别注意该aip在游戏加载时调用，在iphone上会出现top=0的情况，解决方法为：等游戏加载好了在调用 ...
获取微信小程序右上角胶囊的位置
jiangyue2694的博客
10-21 3500
获取微信小程序右上角胶囊的位置 微信中有一个api是用来获取胶囊的位置以及其他信息的，这个可以在我们使用自定义的标题的时候避开这个位置，或者自己写点什么东西 ，要和胶囊对齐的 api wx.getMenuButtonBoundingClientRect() 返回回来的数据就是胶囊的位置信息 这个时候就可以操作了 这个有可能在onLoad() 获取不到数据，这里可以使用setTimeout延迟 也可以在onReady() 中使用 建议在onReady中使用 ...
Cocos Creator微信小游戏关于刘海屏、微信胶囊按钮的适配
wwbwwwwww的博客
08-02 1202
通过获取到的游戏尺寸的高（或宽）度除手机尺寸的高（或宽）度即可得到当前游戏尺寸与手机尺寸的垂直（或水平）方向的。手机安全区域范围的计算：在之前提到的接口2的返回值中有一个名为safeArea的属性，这个属性会返回手机屏幕尺寸下手机安全范围相对于左上角的距离。追加：有些刘海屏手机的刘海长度会超过微信胶囊按钮的位置，为了保证这种情况下游戏画面内顶端信息不受手机刘海遮挡，需要进一步计算手机安全区域的范围。用获取到的胶囊按钮的各项尺寸长度乘相应方向的比例即可得到游戏内的尺寸长度。
你知道和不知道的微信小游戏常用API整理，赶紧收藏用起来~
lsw_Cs的博客
12-05 1656
以上是整理的全部核心内容，整理不易，时间宝贵，需要源工程的小伙伴可以阅读原文获取，付费不仅是知识的获取，更是对笔者的支持和认可我是"亿元程序员"，一位有着8年游戏行业经验的主程。在游戏开发中，希望能给到您帮助, 也希望通过您能帮助到大家。AD:笔者线上的小游戏《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》大家可以自行点击搜索体验。实不相瞒，想要个赞和在看！请把该文章分享给你觉得有需要的其他小伙伴。你知道王者荣耀是怎么实现技能范围指示器的吗？8年主程手把手打造Cocos独立游戏开发框架。
微信小程序自定义状态栏（右侧的胶囊是去不掉的哦）
qq_45485792的博客
08-05 4790
微信小程序自定义状态栏（一） home.json { "navigationBarTitleText":"北京铭医", "navigationStyle":"custom", "enablePullDownRefresh":true } home.wxml <viewclass="bgImg"> <viewclass="titletop">我的博客</view> <!--顶部搜索框--&gt...
Cocos Creator之微信小游戏的游戏圈
weixin_40855248的博客
04-09 2469
Cocos Creator之微信小游戏的游戏圈 1、官方文档游戏圈使用指南 · 小游戏； 2、需要将游戏圈放到指定地方（比如下图，坐标为x:160,y:850，因为游戏圈图标的锚点在左上角，所在层的锚点也在左上角）； 3、如果是将游戏圈按钮放到某个指定按钮的位置，按钮所在层的锚点为左下角（0，0），则： 3.1、获取指定按钮的坐标： let x = this.按钮.node.x; let...
微信小程序学习笔记-右上角胶囊按钮适配
木玄客的博客
03-11 3493
正常标题栏未设置自定义的时候，胶囊按钮（小程序顶部右边的两个）下面才是我们自己的页面部分： 但是设置了标题栏自定义以后，整个页面都被我们的页面填充： 这时候如果有在顶部配置图标或者标题，那么就要考虑一个问题：安卓跟ios不同机型下胶囊按钮的大小跟位置是不一样的，这时候就需要获取胶囊按钮的信息进行动态配置： onLoad(){ let 胶囊信息= wx.getMenuButtonBoundingClientRect() this.setData({ 胶囊信息声明: 胶囊信息}) } 获取
微信小程序如何实现自定义导航栏、导航栏手机适配（获取导航栏、状态栏高度和胶囊位置）以及踩过的坑
浩冉学编程的博客
03-05 5068
微信小程序如何实现自定义导航栏以及踩过的坑，获取胶囊位置计算导航栏位置，让图标始终保持靠着胶囊左边
微信小程序自定义顶部导航栏（兼容适配所有机型）
yyjiuguilian的博客
11-19 1896
为了满足更多用户的需求，微信官方给出了一个navigationStyle属性。 官方文档：navigationStyle 导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮)。 <view class="custom-navbar-container"> <!-- 状态栏占位元素 --> <view class="custom-status-bar" style="height: {{ statusBarHei
微信小程序胶囊位置计算，避开胶囊位置
Qensq的博客
08-19 2031
由于小程序在不同的手机上顶部布局会发生变化，不能正确避开胶囊位置，所以通过官方给出的胶囊信息，可以计算出胶囊位置，并避开。例如：app.menu.top + app.menu.height + 10。此处思路是，获取胶囊底部位置，并拉开10个px。计算出来的值一定要用px，不要用rpx！计算出来的值一定要用px，不要用rpx！计算出来的值一定要用px，不要用rpx！需要拉开距离就在后面再 加自己需要的数值。在需要的页面的js中引用。，这样就可以全局使用了。
微信小游戏之CocosCreator多分辨率场景适配方案
星期一的博客
06-24 4473
前言：小游戏开发过程中大家如何进行多分辨率适配的？ 回顾一下官方文档对分辨率适配的介绍：https://docs.cocos.com/creator/manual/zh/ui/multi-resolution.html。 以前读完后总是有一种似懂非懂的感觉，所以实践后总结关于小游戏适配三要素：Canvas + Widget + Scale 。 一、cocosCreater窗口大小/设计分辨率/视图边框尺寸/试图中canvas尺寸等和之间关系。 let winSize = cc.winSi
微信小程序第一节 —— 自定义顶部、底部导航栏以及获取胶囊体位置信息。
是江迪呀 的博客
03-03 9453
如果需要自定义顶部和底部导航。那么如何在自定义后能够适配不同的机型而不会出现样式问题呢？我们可以通过方法来获取页面的信息来保证样式的正确性。此方法常用于app.js文件中的onLanch()方法中，保证这些信息优先被加载，并把获取到的页面信息放到全局变量中，方便其他页面的获取使用。在此之前需要开启自定义顶部和底部导航栏。
微信小程序自定义导航栏 胶囊菜单按钮高度完美适配 原理简单 赛过一些大厂的适配 妈妈再也不用担心我强迫症啦
热门推荐
TP19981017的博客
10-18 1万+
在自定义小程序导航栏时，右上角的胶囊（MenuButton）在不同机型测试，会发现很难适配。 不同的手机，胶囊高度也不一样，完全需要动态的计算高度。 先看一些小程序顶部导航栏适配的情况 图一 某团 图二 某乎 图三 某东 图四 某拉 上图适配做的最好的是某东，但仔细看仍会有一点错位，但输入框的颜色，淡化了这种不和谐感。 为解决这个问题就要搞清楚原理 这是在没有设置自定义时的原生导航栏，我们发现整体的高度就是 （状态栏高度 + 导航栏高度） 而状态栏高度可...
【实战】前端必会 —— 微信小程序右上角胶囊按钮（标题设置透明后的处理）
程序边界
09-16 6516
wx.getMenuButtonBoundingClientRect() wx.getSystemInfoSync()
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值