微信小程序之页面打开数量限制

无论是在小程序还是APP中,打开一个页面其实就是创建了一个新的View对象,一层层叠加的。当点击页面的回退按钮就是把当前页面关闭。

这个过程中会涉及到一个问题,就是打开页面的数量。在某些设计下,比如一个商品详情页面中会推荐其他的商品,这些商品点进去就是详情页面。详情页面中又有推荐,又可以点进去。这样重复下去打开的页面就会越来越多。

如果不做限制,当打开数量到一定程度的时候肯定会卡死了。在微信小程序中打开的页面不能超过10个,达到10个页面后,就不能再打开新的页面。

之前出现这个问题,还以为是Bug,是不是卡死了,后来发现只要回退一个页面又可以重新打开了。才发现了最大10个页面的限制。

特意调研了其他公司的小程序,发现确实有这个问题。我这边就做了一个提示告诉用户不能打开这么多页面,不然用户会一脸茫然,点着点着就点不了。

每个页面都会需要跟后台交互加载数据,我这边在统一的Http请求中进行判断。

 var pages = getCurrentPages();
    console.log("pages:" + pages.length);
    if (pages.length == 10) {
      wx.showToast({
        title: "页面打开太多,请回退关闭几个页面",
        icon: 'none',
        duration: 2000
      })
      setTimeout(() => {
        wx.navigateBack({

        })
      }, 2000)
      return;
    }

当打开第10个页面的时候,给出提示,然后跳回上一个页面。

欢迎加入我的知识星球,一起交流技术,免费学习猿天地的课程(http://cxytiandi.com/course

原文地址:https://www.cnblogs.com/yinjihuan/p/10464301.html

时间: 2024-10-11 13:59:42

微信小程序之页面打开数量限制的相关文章

微信小程序授权页面

微信小程序授权页面,效果图如下 app.js  中的 onLaunch或onShow中加如下代码,如果没授权跳转到授权页面 // 获取用户信息 wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框 wx.getUserInfo({ success: res => { // 可以将 res 发送给后台解码出 unionId

微信小程序之页面拦截器

场景 小程序有52个页面,其中13个页面无需任何身份,另外39个页面需要系统角色.对于这39个页面,如果微信用户没有系统角色,则跳转到登录页.是否有系统角色信息需要通过异步请求来获取. 需求分析&实现 对需求进行抽象,其实要的就是一个过滤器,对小程序页面的访问进行过滤,符合条件的通过,不符合条件进行其他处理. 使用过php的laravel框架的童鞋,肯定一下子就联想到了laravel框架的http中间件:HTTP 中间件提供一个方便的机制来过滤进入应用程序的 HTTP 请求,例如,Laravel

微信小程序之页面跳转

如今 微信小程序已经充满的我们的生活,那么今天我就来说一说微信小程序中的最基础的 页面跳转 1. wx.navigateTo(保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面.) 简单点说,有两个页面 分别为页面A,页面B ,你想要从页面A 跳转到页面B 就可以在页面A使用这个方法 wx.navigateTo({ url: '../pages/B' }) 当然这是不穿参数的 只是单纯的跳转页面若想要传参的话 可以用"?+id=123&&na

浅谈微信小程序实现页面数据显示

前段时间公司需要一个小程序去实现某项简单的功能,本来作为一个后台人员,只需要完成数据接口和文档部分就可以了: 后来对这小程序好奇再加上文档蛮完整的,然后抽了好几天时间去研究了一下,不多说了.. 1.首先来看简单的目录结构: 2.下面是app.json 需要注意的地方: 3.接着是index页面的数据 4.最后是index页面效果 好了,简单的第一步已经完成了.

微信小程序的页面跳转

小程序页面的跳转: 先创建页面toolbar,并在app.json里面pages写上路径 "pages":[    "pages/index/index",    "pages/logs/logs",    "pages/toolbar/toolbar"  ], 然后写在页面中添加按钮,然后添加事件, <button type="primary" bindtap="start"&g

微信小程序的页面跳转==编程式导航传参 和 标签的方法传参

小程序导航传参接收传递过来的参数 在onload中 实例 原文地址:https://www.cnblogs.com/xiaoxiaoxun/p/11414768.html

【微信】微信小程序 新建页面目录后,怎么自动生成目中的的四个基本文件呢? 新建目录报错如下VM458:2 未找到 app.json 中的定义的 pages &quot;pages/module/module&quot; 对应的 WXML 文件

如下图,在使用微信开发者工具过程中,新创建了页面目录,想要页面文件夹中自动生成四个基本文件 但是新创建了一个页面文件夹,里面的四个基本文件并没有展示出来 然后在app.json添加这个路径,ctrl+s 保存 依旧不能自动生成 解决方法: 经过测试,确实 -->新创建的项目中新创建的第一个空文件夹 才会自动给你创建四个基本文件. 如果已经自己创建过文件目录了,如上面已经创建了pages/swapping目录了,再自己去创建module目录的时候,就不会自动创建,反而会提示你缺少对应的文件!!!

微信小程序 --- 登录页面

思路:在个人中心页面,首先判断全局的 app.js 里面的 globalData 里面的 is_login 状态,并且判断 缓存数据中的 is_login 状态,如果都为真,就正常显示,如果有一个为假,就要到登录页面进行登录. 具体代码示例: app.js: //app.js App({ globalData: { is_login:false, userInfo:{} } }) 登录页面: <view class="com"> <text>账号:</te

微信小程序 --- 设置页面的标题

第一种方式:修改 page.json文件 { "navigationBarTitleText": "豆瓣 - 电影" } 第二种方式:使用 JS 修改: wx.setNavigationBarTitle({ title: that.data.mername//页面标题为路由参数 }) 原文地址:https://www.cnblogs.com/e0yu/p/8528986.html