微信小程序 某个页面直接返回首页（微信小程序回退到首页）

微信小程序 某个页面直接返回首页（微信小程序回退到首页）

打开小程序后，到三级页面后点击左上角的返回按钮，能够直接返回到首页

正常 A -> B -> C 都是通过 wxnavigateTo 跳转的，所以 wxnavigateBack 只能返回上一界面，如果要返回到A 界面就会出现 C -> B -> A 的效果。

如果想实现 A -> B -> C 当 C 点击返回时， 实现直接 C -> A 这种效果， 就只能A -> B 通过 wxnavigateTo 跳转 ，

B -> C 通过 wxredirectTo 跳转，跳转触发后 B 页面就会被销毁， C 页面再返回 wxnavigateBack 就会直接到 A 了。

例如：

第一个页面采用navigateTo，

在第二个页面中使用redirectTo。

这里是重点：

在第三个页面点击回退时，会直接回到第一个页面

。(wxredirectTo()跳转到新页面之后，会自动销毁上一个页面，在新页面点击返回按钮时，会直接回到上上一个页面)

这是相当于在这个回退过程中直接销毁第二个页面

小程序5种跳转页面方式的区别：

//只能跳转到tabBar配置页面

//返回上一级页面（delta：返回的页面数，如果 delta 大于现有页面数，则返回到首页，默认值为1）

//关闭当前页面，跳转到应用内的某个页面

//保留当前页面，跳转到应用内的某个页面

// 关闭所有页面，打开到应用内的某个页面

vue 的钩子函数在跳转新页面时，钩子函数都会触发，但是 小程序 的钩子函数，页面不同的跳转方式，触发的钩子并不一样。

onLoad : 页面加载 一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。

onShow : 页面显示 每次打开页面都会调用一次。

onReady : 页面初次渲染完成 一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。 对界面的设置如 wxsetNavigationBarTitle 请在 onReady 之后设置。详见生命周期

onHide : 页面隐藏 当 navigateTo 或底部tab切换时调用。

onUnload : 页面卸载 当 redirectTo 或 navigateBack 的时候调用。

数据请求

在页面加载请求数据时，两者钩子的使用有些类似， vue 一般会在 created 或者 mounted 中请求数据，而在 小程序 ，会在 onLoad 或者 onShow 中请求数据。

（说明：appid是小程序的身份z号码，是微信公众平台上的小程序ID，有了它，微信客户端才能确定你的小程序“身份”，并使用微信提供的高级接口。至于appid有什么用，appID就像门牌，AppSecret就像钥匙。AppID可以公开，但是AppSecret必须保密。而且微信官方文档反复强调，AppSecret的安全级别很高，也就是说如果泄露出去安全风险很大，要小心保管。你可以重新生成AppSecret，但是切记重新生成AppSecret前，跟你的程序员或技术外包服务商协调好，程序里如果有用到AppSecret的地方，要同步修改，否则程序会报错。）

（1）需要用户触发跳转，从 230 版本开始，若用户未点击小程序页面任意位置，则开发者将无法调用此接口自动跳转至其他小程序。

（2）需要用户确认跳转，从 230 版本开始，在跳转至其他小程序前，将统一增加d窗，询问是否跳转，用户确认后才可以跳转其他小程序。如果用户点击取消，则回调 fail cancel。

（3）无需声明跳转名单，不限跳转数量 （众测中） ，从2020年4月24日起，使用跳转其他小程序功能将无需在全局配置中声明跳转名单，调用此接口时将不再校验所跳转的 AppID 是否在 navigateToMiniProgramAppIdList 中。

从2020年4月24日起，跳转其他小程序将不再受数量限制，使用此功能时请注意遵守运营规范。

3，关于调试

在开发者工具上调用此 API 并不会真实的跳转到另外的小程序，但是开发者工具会校验本次调用跳转是否成功。

开发者工具上支持被跳转的小程序处理接收参数的调试。

4，实例

信息来源微信小程序开发文档

》小程序跳转 wxnavigateToMiniProgram()

》小程序调试支持

首先，必须检讨自己，出现这种问题的确是自己阅读文档不仔细。

在学习页面之间传递参数时，同时设置了 tabBar 和点击跳转导航 wxnavigateTo ,并且两个设置跳转的页面路径一致，发现 wxnavigateTo 跳转是不生效的，至于想要传递的参数那就更别想传递到跳转的页面。

出现这个问题，我一开始以为是微信小程序自带的问题，但是想想，怎么可能呢，是猪吗，这么明显的问题，留给开发者？于是翻阅文档，研读 tabBar 和API中的导航一部分，发现文档早已注明的很清楚，只是自己没有看清楚，检讨自己并认真学习一下。

wxnavigateTo

wxredirectTo

wxswitchTab

wxreLaunch

1 wxnavigateTo 和 wxredirectTo 不允许跳转到 tabBar 页面，只能用 wxswitchTab 跳转到 tabBar 页面

2 wxnavigateTo 和 wxredirectTo 允许跳转时路径带参数， wxswitchTab 跳转时路径不可带参数

笔者由于工作需要，曾经参加过一个微信小程序同 SAP 系统集成的项目，因此从零开始学习了微信小程序的开发知识。这里通过系列文章把自己所学分享出来，希望对相关学习者有所帮助。

本教程前面三篇文章：

通过本系列前面三篇文章的介绍，大家对微信小程序的视图和控制器，微信调试器的用法，以及如何消费微信平台提供的 Public API，已经有了一个最基本的认识了。在这个基础上，本文让我们进一步学习微信小程序的页面跳转路由设计。

这个系列教程的前六篇文章我们都在单个的视图上 *** 作。现在让我们创建第二个视图，然后实现从第一个视图到第二个视图的跳转。

首先开发第二个视图：

做过 Angular 开发的朋友们对上面的视图设计一定不会陌生。这个视图的数据源由模型 logs 提供，是一个列表结果，列表每个元素的数据源是模型 logs 里的一条记录，用 log 代表。

为了让 log 看起来显示更整齐，在 log 内容之前，显示每条 log 的索引。因为 log 的索引从 0 开始，所以用 {{index + 1}} 在索引前加一，这样显示的索引更符合普通人的阅读习惯。

这个视图的控制器：

控制器 logsjs 的实现：

在控制器里调用 Page 构造函数，给当前控制器指定名为 logs 的数据模型。

这个数据模型的值填充，通过微信框架提供的 API wxgetStorageSync 来获取。

wxgetStorageSync 的含义在微信小程序 官网 上有定义：从本地缓存中同步获取指定 key 对应的内容。

第二个视图的 UI 和控制器都开发完毕，剩下的事情就是在第一个视图里定义一个触发点，让它能触发到第二个视图的跳转。

我在第一个视图上通过属性 bindtap 绑定了一个点击函数 bindViewTap :

bindViewTap 在第一个控制器 indexjs 里的实现：

跳转还是通过微信小程序提供的 API wxnavigateTo :

保留当前页面，跳转到应用内的某个页面，使用 wxnavigateBack 可以返回到原页面。

学习了微信小程序页面路由跳转之后，我们来进行一个实际的需求开发。

效果：我在手机上打开微信小程序，自动显示出我当前所在的地理位置：

具体步骤：

ReservationServicegetGeocode 的实现：

看下面一个使用高德地图 API 将经纬度转换成文字描述的地址的例子，使用 postman 发送请求：

API 响应：

假设我用 vue 开发了一个 web 应用,需要在手机微信里访问并调试, 可以按照本文介绍的步骤,使用微信开发者工具来调试。

假设我的 web 应用的访问入口是如下公众号菜单的"预约"按钮:

那么为了能够在微信开发者工具里调试,需要首先进入该公众号的后台,在 web 开发者工具里,将开发者本人的微信号添加进去:

点击"绑定开发者账号":

输入待绑定的微信账号:

点击绑定,该微信号会收到一条消息,询问是否绑定:

点击同意 *** 作完成绑定。

接下来, 把要调试的 web 应用的 url 放到微信开发者工具地址栏里，回车之后，微信开发者工具就会d出一个询问窗口，点击 Allow 之后，就可以在微信开发者工具提供的类似 Chrome 开发者工具调试器一样的界面里进行单步调试了。

这个粘贴到地址栏的 url 很有讲究。

>

需要用到小程序的web-view， 官方文档链接

web-view是承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。写法如下：

注：当在微信开发中工具里返回“{"base_resp":{"ret":-1}}”时，需要点左上角“设置”--“项目设置”--勾选“不校验合法域名、web-view（业务域名）、TLS 版本以及 >

url 属性 （表示要跳转的页面地址，必须以 / 开头）

open-type （表示跳转的方式，必须为 switchTab ）

url 属性 （表示要跳转的页面地址，必须以 / 开头）

open-type （表示跳转的方式，必须为 navigate ）

非tabBar页面 跳转时，open-type 也可以省略

open-type 属性值为: navigateBack

结合 delta 属性：表示后退的层级，默认是 1 ，1时该属性可省略不写

调用 wxswitchTab (object object ) 方法，其中 object 参数对象的属性列表如下

调用wxnavigateTo ( object object )方法，其中 object 参数对象的属性列表，如下

调用wxnavigateBack(object object ) 方法，可以返回上一页面或多级页面，其中object 参数可选的，属性列表 如下

wxnavigateToMiniProgram

从小A序跳转到小B序

首先介绍一下需要用到的api  ：wxnavigateToMiniProgram 

他的参数们

参数名        是否必填        类型        说明

appId            是                 string        要打开的小程序 appId

path              是                 string        目标小程序的指定页面，为空的话跳首页

extraData     否                 object        需要带给目标小程序的参数

envVersion   否                 string        目标小程序的版本  （基本没啥用）

success       否                 function     成功回调

fail               否                 function     失败回调

complete     否                 function     结束回调

在起步小程序中的appjson中需要配置跳转小程序的appid

目标小程序 可以在appjs中接收起步小程序带过来的参数，官方文档给的是apponLaunch和apponshow都能接到参数，但是我的onLaunch不能打印出来，可能我的小程序是个傻的小程序。（ 注意千万是在appjs中，而不是目标页面的js文件 ，我就吃了这个亏）

小A序(表演跳转)

小B序(表演接收参数)

关于调试，开发者工具是不能跳转的，不过我们可以真机调试，两个小程序都开始真机调试，在小程序右上角的三个小点点有个打开调试，就能看到log出来的参数了，根据自己习惯吧，展示在页面上也是个好办法。

以上就是关于微信小程序 某个页面直接返回首页（微信小程序回退到首页）全部的内容，包括:微信小程序 某个页面直接返回首页（微信小程序回退到首页）、小程序类似vue-admin、小程序跳转到另一个小程序问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！