微信小程序出现wx.navigateTo页面不跳转问题的解决方法

本文实例讲述了微信小程序出现wx.navigateTo页面不跳转问题的解决方法。分享给大家供大家参考，具体如下：

今天在做微信小程序的时候，做的商品购买流程。流程是这样的：

商品展示-->商品详情-->下单页面-->下单详情页面-->支付结果页面-->跳转订单详情页面。

但是在支付成功之后，点击按钮跳转，发现怎么也跳转不了到订单详情页面，前后log都能打印出来，证明已经执行了wx.navigateTo方法，但是跳转不成功，而且，坑爹的是也不报错。

翻看微信小程序开发文档，参考链接：

https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html#wxnavigatetoobject

其中有一行提到：

就是这一句：“注意：为了不让用户在使用小程序时造成困扰，我们规定页面路径只能是五层，请尽量避免多层级的交互方式。”数一数我的跳转页面，当然你可以可以看微信开发者工作的预览视图右上角，会出现您当前调试的页面有5个这样的提示。

再贴一下我的页面跳转情况：

① 商品展示-->② 商品详情-->③ 下单页面-->④ 下单详情页面-->⑤ 支付结果页面-->⑥ 跳转订单详情页面。

就在最后一步的时候已经跳转不过去了，此时前面已经使用wx.navigateTo跳转了五个页面，刚好达到限制。

然后我试着在下单页面跳转到下单详情页面的时候换用：wx.redirectTo()方法跳转，然后再编译执行，发现跳转到订单详情页面成功。然后我把一些不需要返回之后还回到当前页面的跳转换成了wx.redirectTo()来跳转，解决了wx.navigateTo跳转不成功的问题。

wx.redirectTo()方法，是打开新的页面，并关闭当前的页面。这个理解起来可以使用android的启动模式来理解。就像一个水桶，可以说一个栈，这个桶只能装得下5个西瓜，本来水桶是没有西瓜的，然后我们打开一个页面使用wx.navigateTo方法启动的时候，就往水桶里边扔一个西瓜，这样五个满了之后，再打开新的页面，再往水桶里边扔西瓜，那肯定是装不下的了。如果我们使用的是wx.redirectTo()，当我们打开一个新页面时，也会往桶里扔一个西瓜，然后会把当前的这个在桶里的西瓜，吃掉，这样就留出了空间。

所以，在微信小程序页面跳转中，如果当前的页面，在跳转之后是不必要的，没有返回到这个页面的需求的时候，尽量使用wx.redirectTo()来跳转打开新的页面，避免出现上述的问题。

希望本文所述对大家微信小程序开发有所帮助。

赞 (0)

相关推荐

  • 微信小程序 页面跳转传参详解

    微信小程序 页面跳转传参详解

    微信小程序 页面跳转传参,做微信小程序必定会用的这样的功能,这里就记录下本人学习实现代码资料. 刚接触微信小程序,多里面的语法和属性还不怎么聊解,如有不多的地方希望各位大神多多指教.今天来说下微信小程序怎么跳转和传参,话不多说直接上代码. 实现的功能是给列表增加点击功能传参到下一页: 代码如下: <import src="../WXtemplate/headerTemplate.wxml"/> <view> <!--滚动图--> <view&g

  • 微信小程序 跳转页面的两种方法详解

    微信小程序 跳转页面的两种方法详解

    微信小程序 跳转页面 小程序页面有2种跳转,可以在wxml页面或者js中: 1,在wxml页面中: <navigator url="../index/index">跳转到新页面</navigator> <navigator url="../index/index" open-type="redirect">在当前页打开</navigator> <navigator url="../i

  • 微信小程序实现点击文字页面跳转功能【附源码下载】

    本文实例讲述了微信小程序实现点击文字页面跳转功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.js文件 Page({ data:{ // text:"这是一个页面" }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面

  • 微信小程序使用navigateTo数据传递的实例

    微信小程序使用navigateTo数据传递的实例 1,传递基本数据类型 index.js 发送页JS Page({ data: { testStr: '字符串str' }, onLoad: function () { }, next: function(e){ wx.navigateTo({ url: '/pages/test/test?str='+this.data.testStr, }) } }) test.js 接受页JS Page({ data:{ }, onLoad:function(

  • 微信小程序 页面跳转传递值几种方法详解

    微信小程序 页面跳转传递值几种方法详解

    微信小程序 页面跳转传递值 微信小程序导航有两种形式:一种是在写在js中进行跳转,另一种是写在wxml页面中进行跳转. 1.js导航 (1).wx.navigateTo(OBJECT) :保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navigateTo({ url: 'test?id=1' }) 获取传递的值: //test.js Page({ onLoad: function(option){ console.log(option.id)

  • 微信小程序 页面跳转事件绑定的实例详解

    微信小程序 页面跳转事件绑定的实例详解 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, dataset, touches. 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数 <view bindtap="view"> <text bindtap

  • 微信小程序 页面跳转和数据传递实例详解

    微信小程序 页面跳转和数据传递 1.先导 在Android中,我们Activity和Fragment都有栈的概念在里面,微信小程序页面也有栈的概念在里面.微信小程序页面跳转有四种方式: 1.wx.navigateTo(OBJECT): 2.wx.redirectTo(OBJECT): 3.wx.switchTab(OBJECT): 4.wx.navigateBack(OBJECT) 5.使用实现对应的跳转功能: 分析: 其中navigateTo是将原来的页面保存在页面栈中,在跳入到下一个页面的时

  • 微信小程序首页数据初始化失败的解决方法

    微信小程序首页数据初始化失败的解决方法

    一. 问题描述 用户首次后再次进入小程序时,我们通常需要通过获取用户openid或unionid用作唯一标示与后台进行数据交流,初始化用户信息.当我们通过第三方服务器跟微信建立请求时,微信需要用户确认是否公开信息.如图1,从console可以看到,在请求的同时,我们的首页index已经加载完成,图中初始化数据显示为空.无论我们将请求信息写在app.js的onload中或者index.js中,当我们点击确认后,请求信息才执行success方法,将第三方服务器返回的数据处理,这样的因需要用户点击而产

  • 微信小程序 加载 app-service.js 错误解决方法

    微信小程序开发过程中出现错误,经过一番思考解决此问题,这里给大家提醒下! 加载 app-service.js 错误 WAService.js:2 不要在 undefined.js 注册多个Page APP-SERVICE-Engine:Please do not register multiple Page in undefined.js 开始新建一个小程序,结果报这么多错误. 但是我点击到编辑页查看的时候,没有pages,utils呀.. 进入app.js没有注册多个page呀. 感觉很奇怪,

  • 微信小程序出现wx.navigateTo页面不跳转问题的解决方法

    微信小程序出现wx.navigateTo页面不跳转问题的解决方法

    本文实例讲述了微信小程序出现wx.navigateTo页面不跳转问题的解决方法.分享给大家供大家参考,具体如下: 今天在做微信小程序的时候,做的商品购买流程.流程是这样的: 商品展示-->商品详情-->下单页面-->下单详情页面-->支付结果页面-->跳转订单详情页面. 但是在支付成功之后,点击按钮跳转,发现怎么也跳转不了到订单详情页面,前后log都能打印出来,证明已经执行了wx.navigateTo方法,但是跳转不成功,而且,坑爹的是也不报错. 翻看微信小程序开发文档,参考

  • 微信小程序实现Session功能及无法获取session问题的解决方法

    因为小程序原生不支持Cookie,因此也不支持Session. 网上找到的的一些方法有缺陷,而且很多累赘,估计没有实际测试过,在此直接给出实测可用的代码. 大概思路就是借助小程序本地储存+网络请求的header可读可写来实现类似浏览器的cookies保存session功能. 直接上代码 function NetRequest({url, data, success, fail, complete, method = "POST", header = { 'Content-type':

  • 微信小程序scroll-view实现上拉加载数据重复的解决方法

    微信小程序scroll-view实现上拉加载数据重复的解决方法

    微信小程序的 scroll-view 上拉加载更多的BUG(数据会多加载,甚至有重复数据). 问题描述:上拉一次,会多次触发触底函数 onReachBottom():换成自定义加载更多函数, 例如 loadMore(), 问题依旧存在. 生产环境:调试基础库 目前最新版本1.9.94 依旧存在这个问题. 解决方法:加状态控制变量,限制 触底函数/加载更多函数 的触发条件. 页面上拉加载更多后,看下图,有重复数据 通用前端wxml代码 search.wxml <!--pages/shop/sear

  • 微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例

    微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例

    本文实例讲述了微信小程序使用wx.request请求服务器json数据并渲染到页面操作.分享给大家供大家参考,具体如下: 微信小程序的数据总不能写死吧,肯定是要结合数据库来做数据更新,而小程序数据主要是json数据格式,所以我们可以利用php操作数据库,把数据以json格式数据输出即可.现在给大家讲一下,微信小程序的wx.request进行服务器数据请求的用法: 官方文档给出了示例代码,但是我这边自己进行了简单的处理: index.js Page({ data: { }, onLoad: fun

  • 微信小程序 生命周期和页面的生命周期详细介绍

    微信小程序 生命周期和页面的生命周期详细介绍

    微信小程序 生命周期和页面的生命周期详解: 1.小程序的生命周期--App.js App() 必须在 app.js 中注册,且不能注册多个.所以App()方法在一个小程序中有且仅有一个. App() 函数用来注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等.先上代码: App({ onLaunch: function () { console.log('App onLaunch'); }, onShow:function (){ console.log('App onS

  • 微信小程序 教程之注册页面

    微信小程序 教程之注册页面

    系列文章: 微信小程序 教程之模块化 微信小程序 教程之注册页面 微信小程序 教程之注册程序 微信小程序--Page Page()函数用来注册一个页面.接受一个object参数,其指定页面的初始数据.生命周期函数.事件处理函数等. object参数说明: 属性 类型 描述 data Object 页面的初始数据 onLoad Function 生命周期函数--监听页面加载 onReady Function 生命周期函数--监听页面渲染完成 onShow Function 生命周期函数--监听页面

  • 微信小程序实现两个页面传值的方法分析

    本文实例讲述了微信小程序实现两个页面传值的方法.分享给大家供大家参考,具体如下: 需求:发送页面通过url传值,接收页面获取值. 发送页面的js var nowid='10'; wx.navigateTo({ url: '../index/index?id='+nowid, }) 或者发送页面用navigate 组件: <navigate url="xxx?id=10"></navigate > 如果id是page里面data的数据.是动态的,那么可以写成: &

  • 微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)

    上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 <view class='page_row' bindtap="suo"> <view class="search"> <view class="df search_arr"> <icon class="searchcion" size='20' type='search'></icon>

  • 微信小程序学习笔记之页面配置与路由方式

    最近在学习回顾小程序的开发,将一些学习结果做个笔记.参考微信小程序官方文档:developers.weixin.qq.com/miniprogram- 一.小程序配置 1.全局配置 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. // 示例 { "pages": [ "pages/index/index", "pages/logs/index" ], &q

  • 微信小程序如何保证每个页面都已经登陆详解

    目录 现状 解决方案 进一步解决方案 最后 现状 一个微信小程序中,有首页,有个人页面,还有一些列表页面,详情页面等等,这些页面大部分是可以分享的.当分享出去的页面被一个另一个用户打开的时候,这个页面怎么确保这个用户已经登陆了呢? 网上有很多方案是在请求封装里面加一道拦截,如果没有token,就先调用登陆请求获取token后,再继续. 这种方案没毛病,只要注意一点,当一个页面有多个请求同时触发时,当所有请求拦截后,放到一个数组里面,在获取token成功后,遍历数组一个个请求就行. 但这个需求再复

随机推荐