微信小程序新建项目发现导航条不见了，及如何找回。

最新推荐文章于 2025-03-27 20:30:00 发布
原创 最新推荐文章于 2025-03-27 20:30:00 发布 · 1.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序 #小程序

原因是现在小程序新建用的是

Skyline 渲染引擎

开启全局Skyline渲染引擎，因为Skyline不支持原生导航栏，所以就没显示原生导航栏了。

解决方法也很简单
在这里插入图片描述

  • app.json文件中的 “renderer”: “skyline”, 修改为 “renderer”:“webview”
  • app.json文件中的 window里 navigationStyle将他的数值改为默认样式default
    在这里插入图片描述

当然你可以自己写一个导航栏组件解决这个问题

02-微信小程序目录结构及配置
感谢关注-最近在编写开源的自动化测试框架还没整理完
07-30 1488
1.微信目录结构 2.配置说明 3.appjson配置项 4.window配置项 5.restartStrategy 6.tabBar配置项 7.创建一个自己的页面 8.真机调试
微信小程序开发入门指南
陆业聪
07-19 4960
本文介绍了微信小程序开发的基本过程和进阶知识。通过一个“Hello World”示例，展示了如何使用逻辑层（JS）、视图层（WXML）和样式层（WXSS）进行开发。同时，涉及了组件化开发、API调用、云开发等进阶内容，以及开发过程中的注意事项。
关于微信开发者工具的窗口导航栏不显示文字，文字与顶部样式重合的解决方案
m0_71388163的博客
08-14 3444
将"navigationStyle": "custom"和skyline相关的设置删掉后，我的页面也终于正常了。也正是因为导航栏没有正常显示，在wxml中的文字直接跑顶部了。
微信小程序底部导航栏tabBar及不显示问题解决记录
Old_Jay的博客
06-28 8293
1，首先需要新建一个目录images来保存相关导航图标，如下图： 2，在app.json文件中对tabBar进行配置（注意字母大小写不要写错，图片路径不要写错） "tabBar": { "color": "#a9b7b7", "selectedColor": "#11cd6e", "borderStyle": "white", "list": [ { "selectedIconPath": "images/test_hall.png",
微信小程序-顶部导航栏的配置不生效的问题
最新发布
2401_82463671的博客
03-27 1299
自定义构建npm时出现的顶部导航栏未能成功显示的问题
微信小程序首页不显示导航栏，指定其他页面单独显示导航栏
qq_55761697的博客
10-09 4159
"navigationStyle": "custom"这个是指自定义导航栏，当你设置这个属性后，首页就只剩右上角的两颗胶囊按钮。比如这里我指定一个页面需要导航栏，就在指定页面json文件中添加这两句话就行。那么下一步就是在需要显示导航栏的页面添加和首页不同样式。首先在首页正常添加导航栏样式。
微信小程序底部导航栏tabBar编译通过未显示，解决方法
千与编程
04-19 2058
小程序大概是包括能实现天气预报功能，日常工作备忘录，以及开发简介，这些功能之间要用什么来切换，就是微信小程序的底部导航栏，导航栏中定义一个天气预报按钮，一个备忘录按钮以及一个开发者按钮。大家好，我是千与千寻，我最近一段时间正在学习微信小程序的开发，后期希望有机会可以给知识星球里面的小伙伴去开发一些小程序，方便我们的生活。后期我找到了出现这个问题的原因，是定义的这三个page页面组件，必须包含在当前显示的index组件首页。将其中的pages的index画面顺序进行颠倒即可。原代码（未显示底部导航栏）
微信小程序使用tabbar时，导航框不显示
m0_62169906的博客
03-02 2898
当我们使用微信小程序时，使用了正确的格式去使用导航框，但是没有显示时。
微信小程序 navigationBarTitleText 不显示
weixin_40761080的博客
09-11 1192
微信小程序 navigationBarTitleText 不显示
微信小程序 - 自定义头部导航栏开发
觉醒法师的专栏
07-30 1万+
默认情况下，‌小程序的顶部导航栏由系统自动生成，‌允许修改一些基本样式如背景色、‌文字颜色等。‌然而，‌如果需要实现更复杂的样式，‌如自定义图标、‌背景等，‌或者需要适配不同手机屏幕的高度和样式，‌就需要自定义顶部导航栏。‌ 小程序自定义头部导航栏的开发主要涉及系统顶部状态栏和导航栏标题区域，‌自定义顶部导航栏的好处包括提高用户体验、‌增加页面交互性等。‌创建一个自定义导航栏组件，‌包含导航栏的样式和交互逻辑，‌并在需要使用导航栏的页面中引入自定义导航栏组件。‌
微信小程序实战-第4章 邀请函项目
andyyah晓波的博客
07-15 3366
本章通过一个婚礼邀请函的项目，讲解了小程序中的标签页切换、背景音乐API、拨打电话API、video组件、腾讯视频插件、map组件、地图定位API、WXS、picker组件，以及订阅消息的使用。通过本章学习，读者应能熟练在小程序中灵活使用各种组件完成具体功能，掌握音频播放、视频播放、地图定位、订阅消息等常见开发需求的实现。
微信小程序云开发实现数据添加、查询和分页
11-28
微信小程序云开发是一种集成在微信小程序生态中的后端服务，它允许开发者在无需自建服务器的情况下，进行数据存储、处理和调用。本实例将详细讲解如何利用微信小程序云开发实现数据的添加、查询和分页操作。 1. **...
微信小程序tabbar消失_微信小程序tabBar底部导航不显示问题解析
weixin_39732716的博客
02-05 535
搞了好久原来是位置的原因唉闹心直接上代码：出不来的代码：[html] view plain copy print?在CODE上查看代码片派生到我的代码片{"pages": ["pages/splash/splash","pages/zhuye/zhuye","pages/list/list","pages/item/item","pages/search/search","pages/profil...
微信小程序tabBar 底部菜单栏不显示的问题解决
热门推荐
前端之路
12-03 1万+
问题阐述： 在写微信小程序时需要用到tabBar这个功能，但是在app.json文件中写好pages和tabBar保存刷新编译后，预览页面中没有显示底部tab "pages": [ "pages/index/index", "pages/todo/todo", "pages/diary/diary", "pages/record/record" ], "w.
微信小程序底部其中一个导航栏项不显示
weixin_45011156的博客
12-17 2107
微信小程序底部其中一个导航栏项，在开发者工具里正常显示，在手机预览时就不显示 原因： 因为我给tabBar中两个导航栏项的pagePath设置了相同的链接，所以手机会只显示一个 解决方法：把其中一个导航栏项改成别的页面地址就好啦 ...
【微信小程序】 tabBar 底部导航栏真机不显示
wxwxwxww的博客
11-16 284
微信小程序tabbar模拟器可以显示但是真机调试不显示。开发者工具里详情勾选启用条件编译再重新编译真机调试即可。
解决微信小程序tabBar不显示
Ghjkku的博客
02-04 3000
第一情况，设置了csutom:true,该参数是启动自定义tarBar的意思，启动以后，就不会再去识别app.json里的tarBar配置。第二种情况，tarBar属性中设置的pagePath地址，需要在pages参数中置顶默认首页显示。
微信小程序开发错误——底部导航栏没有显示完全
江天飞鸟的博客
06-05 1080
微信小程序开发错误——底部导航栏没有显示完全 原因：由于在app.json中设置跳转页面时，假设有A、B、C、D四个图标（点击可以跳转），B和C的跳转页面相同，C的图标就会覆盖B的图标，B的图标就相当于消失了，于是就只有三个图标显示 ...
关于微信小程序中navigationBarTitleText显示不出来
weixin_53338045的博客
04-26 686
解决方案：
微信小程序开发 透明导航栏
03-08
微信小程序的透明导航栏可以显著提升应用界面的设计美感，并提供更为沉浸式的用户体验。在默认设置下，微信小程序提供的顶部导航栏是半透明效果或者是白色的不透明样式。如果你想创建一个完全透明或是自定义颜色透明度的导航栏，则需要对页面配置以及相关的wxss样式文件做一些特定调整。 ### 实现步骤： 1. **修改页面json配置** 对于想要添加透明导航栏的具体页面，在该页面对应的`.json`配置文件里加入如下代码片段，这将去掉系统自带的状态栏背景色（通常为白色），并允许我们通过CSS来自定义状态栏及标题栏的颜色和透明度。 ```json { "navigationStyle": "custom" } ``` 2. **编写HTML结构与WXSS样式** 接下来你需要手动设计你自己的“模拟”导航条组件了。可以在WXML布局里面构建出所需的元素如返回按钮、标题文本等；然后利用WeUI库或者其他你喜欢的方式来美化它们。重要的是要在最外层容器上设置合适的定位属性(`position:fixed;top:0;left:0;width:100%;`)保证其固定停留在屏幕顶端不会随内容滚动而消失不见。同时为了达到真正的"透明",记得把背景设成transparent或者rgba()形式来指定alpha通道值小于等于1. 3. **处理兼容性和交互细节** - 确保当用户点击左上方箭头时能够触发正确的跳转逻辑； - 如果你的小程序运行环境涉及到刘海屏设备，请测试是否有视觉遮挡的问题发生； - 考虑深色模式适配情况下的显示效果优化。 4. **注意事项** 使用定制化的 `navigationStyle="custom"` 意味着开发者需要自行负责整个头部区域的内容排版及其响应事件绑定工作，因此可能会比直接采用标准控件复杂一些。另外，由于各手机品牌ROM对于全面屏手势的支持程度各异，所以务必充分联调以避免意外状况的发生。 以上就是关于如何在微信小程序中实现透明导航栏的基本方法说明啦！希望对你有所帮助~
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一行注释也不写

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值