微信小程序如何返回上一页的左上角小房子的坑

最新推荐文章于 2024-12-06 10:22:06 发布

liu_jin_long

最新推荐文章于 2024-12-06 10:22:06 发布

阅读量3.5k

点赞数 3

文章标签：小程序

本文链接：https://blog.youkuaiyun.com/liu_jin_long/article/details/111149702

版权

微信小程序如何返回上一页的左上角小房子的坑

头一次写小程序，写了几个插件和几个页面，写完后发现返回上一页的时候是直接返回到首页了

出现这一问题的唯一线索就是左上角的小房子，点击小房子会直接退回到首页，于是我拼命的找修改小房子api，结果浪费了好长时间。

实际上出现的问题是我在跳转页面的时候选择了wx.relaunch(关闭所有页面，打开到应用内的某个页面)，它出现的问题就是会出现小房子。

然后我就把跳转页面的 wx.relaunch() 改成了 wx.navigateTo()

示例:

wx.relaunch

代码部分

页面部分

修改后——
wx.navigateTo
在这里插入图片描述

完成了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

liu_jin_long

关注关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

uniapp-小程序button分享传参，当好友通过分享点开该页面时，进行一些判断……

weixin_48596030的博客

07-28

2017

因为：点击左上角返回上一页时 uni.navigateTo() 会保留当前页面，左上角为箭头标志，会导致一直在详情页与列表页进行切换，没有首页的入口；该小程序中，点击圈子列表页面—>进入圈子详情页面，在圈子详情页面点击button分享按钮后，发送给好友。//如果用户未加入圈子，则显示一个加入圈子的确认弹窗，询问用户是否要加入该圈子。//检测用户是否加入了该圈子。//检测用户是否加入了该圈子。//ture是通过分享进来，false不是通过分享进来。//ture是通过分享进来，false不是通过分享进来。

uni-app开发的微信小程序-打回登录页时会在左上角出现一个房子图标（返回首页）- 怎么回事-怎么解决

路虽远行则将至，事虽难做则必成。

09-08

4945

发现项目，在首次进入时打回登录页，原生导航栏左边会出现一个房子按钮可以直接返回首页最后查了一圈发现这个微信版本更新之后，当我们进入不是首页，或者tabbar页面时就会出现微信针对这个也是有解决方案的，可以在微信环境时把他禁用（在h5环境是不会出现的，只有微信有）还有一种办法，只有在原生导航栏时才会出现，我们如果禁用原生导航栏就从根本解决问题。

参与评论您还未登录，请先登录后发表或查看评论

微信小程序 隐藏页面导航栏左上角的小房子

@微你

04-29

4484

描述：隐藏页面导航栏左上角的小房子 解决办法： onShow(){ wx.hideHomeButton(); }, 在当前页面的onshow方法里面写上wx.hideHomeButton();来隐藏小房子的显示（uniapp同理，将wx替换成uni即可）

小程序隐藏左上角小房子

死亡阿黑

12-26

4924

小程序左上角的小房子按钮：首先在开发者工具内将调试基础库编程2.9.4，如下：然后在index.js中加入下面的代码： onShow: function () { wx.hideHomeButton({ success: function () { console.log("hide home success"); }, fa...

微信小程序，左上角返回首页小房子

热门推荐

Beluga_白鲸

07-04

2万+

需求： 微信小程序分享出去的页面，需要左上角加上小房子，点击回到主页；这里就需要涉及到自定义头部了效果图：代码： PS：代码直接复制到wxml和wxss里面即可 1、在test.json中加入 { "navigationStyle": "custom" } 这个就是全屏的意思 2、在test.xml中加入 <view class="inaver ...

uniapp微信小程序左上角显示房子，不显示箭头，无法跳转其它页面的问题

qq_46103732的博客

11-30

1296

当小程序左上角显示的是小房子时，使用uni.navigateTo/uni.navigateBack...无法跳转到小程序其它页面时，是因为我们在进入当前页面时使用了。我们可以看到，同一个路径，使用不同的跳转方法呈现出来的效果是不一样的，在页面跳转时我们要注意到这些细节部分。，关闭了其它页面，所以无法跳转，我们只需将该方法改成其他的就好（注意：使用。

微信小程序登录之后左上角默认显示小房子，进行隐藏

qq_38210427的博客

12-06

600

或者是跳转页面使用wx.reLaunch(Object object)，uniapp编译成小程序也会出现，可以使用这个方法，或者是把wx换成uni就可以、//需要在登录之后的页面onshow的方法里面写这个，来隐藏小房子显示出来。

微信小程序开发

corn6的博客

08-15

626

注册 https://mp.weixin.qq.com/ 上面这个网址，是注册小程序用的 小程序语法特点 小程序适配方案创建小程序 点开微信开发者工具，创建一个小程序 注意那个AppId，可以在最上面那个网址里面拿到工具介绍 左上角个人中心，扫码登录模拟器跟编辑器对应这两块区域这是调试器点击编译，就会重新跑一遍程序，点击预览，就会生成一个二维码，然后可以真机体验 ...

微信小程序基本用法2(三)

L_u_c_k_y_m_a_n的博客

06-23

832

一、navigator 导航组件导航组件, 类似于超链接标签一.1 属性值属性名类型默认值说明 target String self 在哪个项目上发生跳转,默认当前小程序,可选值 selft / miniProgram url String 当前小程序内的跳转链接 open-typ

【微信小程序】可拖拽操作的“树状图”模块的制作和小程序经验的总结

周周的奇妙代码之旅

03-17

2062

去年三月份高中同学拉我做的微信小程序，尽管可能除了高一的时候做网页写过些js以后就再也没碰过（甚至高一时因为觉得“以后肯定不会做程序员”而拒绝学习代码），但得到了“你就写写前端、做做页面和好看的图片就行了”的答复后便开开心心地开始写了。 ——谁也不会想到在Deadline前两天，我一个卑微的前端，大晚上地在用putty跟高中同学调试数据库，并且一晚上遇到奇诡的问题就立刻删库……互相吐槽自己写的代...

配置微信小程序底部导航栏以及路由方式

weixin_44924173的博客

06-25

1085

在app.json中添加 "tabBar": { "list": [ { "pagePath": "pages/index/index", "iconPath":"", "text": "首页" }, { "pagePath": "pages/logs/logs", "iconPath":"", "text": "日志" } ] }, .

小程序自定义顶部（可以是图片或标题），带返回箭头和回到首页

01-02

小程序自定义顶部（可以是图片或标题），带返回箭头和回到首页。template是引用的列子。可以直接复制使用！

微信小程序标题自定义、左上角返回首页小房子

weixin_42401291的博客

03-17

1801

https://blog.youkuaiyun.com/u012246458/article/details/94601488

小程序从分享也进入点击左上角小房子返回首页传参问题

webZRH的博客

06-17

822

点击左上角小房子返回首页无法传参在地址后边若需要可存缓存，利用缓存传参

小程序左上角返回多级页面

weixin_50478878的博客

10-06

308

wx.redirectTo：关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar设置的页面。

微信小程序设置左上角返回键跳转到特定界面

专注前端技术，包括Web端、移动端、小程序、APP

04-13

3324

微信小程序返回键跳转到指定页面，需要通过在onUnload函数中跳转， onUnload: function () { wx.reLaunch({ url: '../admin/admin' }) } reLaunch 可以打开任意页面。onUnload函数为监听页面卸载的函数，把页面重定向到指定的页面； ...

uniapp微信小程序如何返回上一页的左上角小房子的坑

大雾起了清晨

07-28

3483

uniapp微信小程序如何返回上一页的左上角小房子的坑

小程序分享页面点击顶部房子返回首页

weixin_43789753的博客

06-18

659

描述扫码进入了一个活动分享页面,顶部有一个小房子按钮,通常是点击后进入首页,但是分享进来的点击小房子还是原来的页面,没有跳到首页,可以在分享页的js中加入以下代码,测试有效 onUnload () { wx.reLaunch({ url: '/pages/index'//原始首页路径 }) }, ...

uniapp左上角小房子返回位置改变

最新发布

03-22

### 修改 UniApp 左上角小房子图标的行为在 UniApp 开发中，当所有页面被关闭后，微信小程序的左上角返回按钮会自动变为一个小房子图标，这是因为当前已无上级页面可供返回[^2]。要调整该小房子图标的点击行为并自定义导航栏功能，可以通过以下方式实现： #### 方法一：通过 `onUnload` 和 `navigateBack` 控制页面栈如果希望改变默认的小房子图标跳转到首页的行为，可以在应用逻辑中控制页面栈的状态。例如，在某些特定场景下保留部分页面而不完全清空页面栈。 ```javascript // 在需要保持页面栈的页面生命周期方法 onUnload 中处理 export default { onUnload() { // 防止页面被销毁从而避免触发小房子图标 const pages = getCurrentPages(); if (pages.length === 1) { // 如果只剩下一个页面，则手动设置返回路径 uni.redirectTo({ url: '/pages/login/login' // 替换为目标页面路径 }); } } } ``` 此方法适用于简单的页面管理需求，但对于复杂的应用结构可能不够灵活[^1]。 --- #### 方法二：自定义顶部导航栏为了更自由地定制左上角按钮的功能，可以隐藏默认的微信小程序导航栏，并使用自定义组件替代。具体步骤如下： 1. **隐藏原生导航栏** 在项目的配置文件 `manifest.json` 或单个页面的配置中禁用默认导航栏： ```json { "usingComponents": true, "navigationBarTitleText": "", "navigationStyle": "custom" } ``` 2. **创建自定义导航栏组件** 利用 Vue 组件构建一个带有返回箭头或其他图标的导航栏。以下是简单示例代码： ```html  <template> <view class="navbar"> <image src="/static/back-arrow.png" @tap="handleBack"></image>  <text>{{ title }}</text>  </view> </template> <script> export default { props: ['title'], methods: { handleBack() { // 定义返回逻辑 uni.navigateBack(); // 默认返回上一页 // 或者指定目标页面 // uni.reLaunch({ url: '/pages/home/home' }); } } }; </script> <style scoped> .navbar { display: flex; align-items: center; height: 80rpx; /* 导航高度 */ padding: 0 20rpx; background-color: #fff; } image { width: 40rpx; height: 40rpx; } text { margin-left: 20rpx; font-size: 36rpx; } </style> ``` 3. **引入自定义导航栏至页面** 将上述组件嵌入到需要替换默认导航栏的页面中： ```vue <template> <view> <custom-navbar :title="'我的页面'" /> <view>这里是页面主体</view> </view> </template> <script> import CustomNavbar from '@/components/custom-navbar'; export default { components: { CustomNavbar } }; </script> ``` 这种方法允许开发者完全掌控左上角按钮的行为以及整个导航区域的设计[^3]。 --- #### 方法三：动态修改全局路由策略对于更加复杂的业务场景，比如多个入口点均需统一调整小房子图标的指向位置，可通过监听全局事件来干预路由变化过程。例如利用 `onShow` 生命周期函数检测当前页面状态并重定向： ```javascript export default { onShow(options) { const pages = getCurrentPages(); if (pages.length === 1 && options.scene !== 'launch') { // 当前仅剩一个页面且不是首次启动时强制回到登录页 uni.reLaunch({ url: '/pages/login/login' }); } } }; ``` 这种方式适合于维护一致性的用户体验设计[^4]。 --- ### 注意事项 - 自定义导航栏可能会增加一定的开发成本和性能开销，请权衡利弊后再决定是否采用。 - 若选择隐藏原生导航栏，务必提供清晰易懂的操作指引以防用户迷失方向。 ---