APP开发资讯 微信小身手自界说导航栏

发布日期：2024-07-18 14:57    点击次数：193

十年河东，十年河西，莫欺少年穷

学无至极，锦上添花

鄙东说念主领先Net身手猿一枚，因被逼，自学了物联网及相聚编程，又被逼，逐又自学了VUE及React，后又被逼，作念起了小身手开导

东说念主呐，都是被逼出来的

为什么要自界说navigationBar？ 原生导航栏的划定 除了胶囊按钮之外，原生导航栏只会出现复返按钮和当用户灵通的小身手最底层页面黑白首页时，默许展示的“复返首页”按钮 。 原生导航栏的标题笔墨的心理只好是曲。 布局无法改动，不可作念定制。 navigationBar是什么？ 微信小身手一般来说有两个bar，一个导航栏，一个tabbar（小身手下方一瞥切换按钮），齐全下方自界说tabbar的步调一般来说较为简短，当今堤防文告上方自界说导航栏的齐全。 小身手布局 谈到导航栏与自界说导航栏，就需要阐明一下微信小身手的布局了。在小身手开导中使用wx.getSystemInfo() 步调不错获得到系统信息。

 

 

 

 

部分获得到的信息如上图（截取自微信小身手开导者文档），对咱们融会布局有效的信息是以上跟宽度高度干系的属性，如现时建设的屏幕高宽，可用高宽，以及saveArea。

上图展示咱们从systemInfo获得到的数据的本色施展，以苹果X的刘海屏为例（通盘安卓刘海屏旨趣相通）：最外层的红色框即屏幕大小，蓝色框即安全区域字面酷好也就是开导者所能旁边的页面区域，上头的黄色框即手机的情状栏，绿色区域即咱们要自界说的navigationBar。 可见，导航栏紧贴safeArea的上部，若是使用原生导航栏，导航栏下方即是确实酷好的可操控范围。 本色上咱们自界说的导航栏亦然在这个safeArea内与胶囊对都最为谐和。很关节的原因就是微信将右上角的胶囊按钮动作了内置组件，只好是曲两种心理，即咱们无法改动它的大小位置透明度等等，是认为了互助胶囊按钮，一般自界说的导航栏位置也与上图位置一致。 自界说navigationBar若何作念？ 去掉原生导航栏。 将需要自界说navigationBar页面的page.json的navigationBarTitleText去掉。 加上"navigationStyle"："custom"，这么原生的导航栏就一经澌灭，以致后退键也不会出现需要自界说。 另外，早在2016年微信一经驱动适配千里浸式情状栏，面前险些通盘的机型里微信都是千里浸式情状栏，长沙app软件开发公司也就是说去掉原生导航栏的同期，通盘这个词屏幕一经成为可编程区域。 盘算navigationBarHeight。 原生的胶囊按钮虽然存在，那么下一步就需要你去定位出自界说的导航栏高度以及位置。 关于不同的机型，关于不同的系统，情状栏以及胶囊按钮的位置都不信赖，是以需要用到一定的盘算，从而濒临任何机型都不错牢固判定。 使用wx.getSystemInfo()获得到statusBarHeight，这么就信赖了导航栏最基本的距离屏幕上方的据里。 使用wx.getMenuButtonBoundingClientRect()获得到小身手的胶囊信息（正式这个api存在多样问题，在不同端施展不一致，后头会文告这个api调用失败的贬责情况），如下图，以下坐标信息以屏幕左上角为原点。

以下图为例，上头的红色框是statusBar，高度已知；底下的红色框是正文内容，夹在中间的就是求解之一navigationBarHeight；而黄色的是原生胶囊按钮亦然在垂直居中位置，高度为胶囊按钮基于左上角的坐标信息已知，不穷苦出，navigationBarHeight = 蓝色框高度 × 2 + 胶囊按钮.height。（蓝色框高度 = 胶囊按钮.top - statusBarHeight）

临了的盘算公式为：navigationBarHeight = （胶囊按钮.top - statusBarHeight） × 2 + 胶囊按钮.height。navigationBar 距屏幕上方的距离即为navigationBarHeight。

这种盘算步调在多样机型以及安卓ios都适用。

针对"wx.getMenuButtonBoundingClientRect()"获得作假或者获得数据为0的少量数情况，只八成去模拟，关于android，一般navigationBarHeight为48px，而关于ios一般为40px，通盘机型的胶囊按钮高度是32px笔者亦然通过网上好多的著作和自测得出的，这种谬误一般不错忽略。虽然最理思的就是微信不错hold住通盘机型，呵呵。临了请示一下仅以真机为准，开导者器具的bug就更多不说了。

代码齐全 获得本机信息，笔者一般写在App的onLaunch中。

App.JS ，鄙东说念主将获得到的干系信息存放在了全局数据中  【APPJS中判断了是否是共享进来的场景值，若是是共享进来的，则不表示复返按钮】

场景值可参考：https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html

View Code

App.Json 中 window 确立 【切莫将背感奋设立为玄色，不然时辰，电量等信息表示不出来】

 

 在组件Components中创建 navigationBar 文献夹及 navigationBar 组件

navigationBar.js 

 .navigationBar.wxml     【共享进来的页面，不表示复返按钮】

 

 代码如下：

  .navigationBar.wxml 表情如下：

外部页面援用该组件如下，

.Json文献，引入组件

正式添加属性："navigationStyle":"custom"  代表咱们要自界说组件

软件开发

.wxss文献，表情如下：

.wxml代码如下：

最终后果如下：

钱哥快乐8第2024181期奖号区间、余数分析

 

 自界说组件中需要父页面传值 Title 、navigationtype 、 navigationurl 三个属性，用来展示导航标题、 跳转花式、跳转地址。

以上就是鄙东说念主封装的自界说导航栏

参考博客：

https://www.cnblogs.com/lst619247/p/13255097.html

https://www.jianshu.com/p/7393c800ba09

@天才卧龙的博客APP开发资讯

• 微信
• 导航
• APP开发资讯
• 身手
• 界说