为什么小程序的页面有二次跳转时会瞬间显示一下第一次的页面再跳转呢?

栏目:建站技术 2020-10-30

为什么小程序的页面有二次跳转时会瞬间显示一下第一次的页面再跳转呢?

navigateTo redirectTo switchTab tabBar

先来看示例代码并且在微信开发者工具上测试

下面看示例代码共有三个页面,分别是index productshow cart

index的js与wxml

Page({
    /*跳转到商品详情*/
    toProductshow: function (event) {
        //如果这里用navigateTo,跳转到详细页,然后详细页又跳转到购物车页面时,在跳转之前会瞬间显示一下首页,为什么会这样,看下面的说明
        wx.navigateTo({
            url: '../productshow/productshow?id=8'
        })
        //所以为了避免上面的问题,这里上面需要使用redirectTo
    }
})

<view bindtap="toProductshow">
点击进入详细页面
</view>

productshow的js与wxml

Page({
    /*跳转到购物车,注意跳转到tab栏目时需要使用switchTab*/
    toCart:function(){
        wx.switchTab({
            url: '/pages/cart/cart'
        });
    }
})

<view bindtap="toCart">点击进入购物车</view>

cart的js与wxml

Page({
})

<view>
这里就是购物车了
</view>


下面是app.json的代码

{
  "pages": [
    "pages/index/index",
    "pages/productshow/productshow",
    "pages/cart/cart"
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "imgs/toolbar/index.png",
        "selectedIconPath": "imgs/toolbar/index@selected.png",
        "text": "主页"
      },
      {
        "pagePath": "pages/cart/cart",
        "iconPath": "imgs/toolbar/cart.png",
        "selectedIconPath": "imgs/toolbar/cart@selected.png",
        "text": "购物车"
      }
    ]
  }
}

经过测试发现在index页面点击进入productshow页时,然后再从productshow点击进入cart页面时,会在进入cart页面前瞬间显示一下index页面的内容,然后再进入cart页面?那么为什么会这样?看了开发者文档发现wx.navigateTo的解释是保留当前页面,跳转到应用内的某个页面,所以原因就出现这里,因为navigateTo在跳转之前就保留了index页面,所以会瞬间显示一下index页面的内容,当然这里并不是我们想要的结果,所以只能通过redirectTo来跳转,下面是路由的几个api说明

1、wx.navigateTo
保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
2、wx.redirectTo
关闭当前页面,跳转到应用内的某个页面。
3、wx.switchTab
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
4、wx.navigateBack
关闭当前页面,返回上一页面或多级页面。可通过 [getCurrentPages()] 获取当前的页面栈,决定需要返回几层。
5、wx.reLaunch
关闭所有页面,打开到应用内的某个页面。

相关阅读

用火狐打开百度一直加载s1.bdstatic.com的解决办法

2020-10-10736

一直用火狐浏览器,火狐浏览器插件多,很合适网页开发人员使用,以前一直用的好好的,但是今天使用的时候突然发现没有以前好用了,打开百度的官网一直很卡,通过FIREBGU发现在打开百度官网的时候一直会加载s1.bdstatic.com这个网站,无语,怎么打开百度的官网还需要链接s1.bdstatic.com这个网站这个网站吗?难道是百度被黑了,或者是自己的浏览器被…

手机访问电脑网时自动跳转代码

2020-10-10100

4G降临,移动网站已经一发不可收拾,pc端和移动端官网并存。如何让别人访问你的pc端的官网直接跳转到移动端的网站呢?各位看官,小二上代码!来了!varurl=window.location.href;varurl_match=/vit=1$/i;if(!url.match(url_match)){if(navigator.userAgent.match(/(…

如何让你的PHP网站变得更安全

2020-10-10104

安全配置一(1)打开php的安全模式php的安全模式是个非常重要的内嵌的安全机制,能够控制一些php中的函数,比如system(),同时把很多文件操作函数进行了权限控制,也不允许对某些关键文件的文件,比如/etc/passwd,但是默认的php.ini是没有打开安全模式的,我们把它打开:safe_mode=on(2)用户组安全当safe_mode打开时,sa…

如何解决网站上传大文件的问题?

2020-10-10155

为了服务器的网络安全,避免因为超大文件导致服务器故障,所以对文件上传的大小限制是很有必要的,但是有些客户又有上传大文件的需求,比如上传pdf或者压缩包这种格式的文件,那么碰到这种情况下,如何解决这个问题呢?在浏览器输出phpinfo();查看LoadedConfigurationFile这个参数可以获取php.info的文件位置1:如果上传的文件太大,会导致…

小程序列表多个批量倒计时

2020-10-10120

Page({onShow(){letthat=this;vardates={datetime:[{dat:0,name:&#39;zs&#39;},{dat:6,name:&#39;ls&#39;},{dat:10,name:&#39;ww&#39;}]}//console.log(dates)//数据letlen=dates.datetime.length…

如何解决QQ显示未启用的问题

2024-08-8285

没设置临时会话,一般都会出现下面的状况。QQ放在网站上作为客服,必须设置临时会话。或者点击之后,要求加为好友才可以对话。解决这个问题的步骤如下:一、登陆腾讯官方网站:http://wp.qq.com/二、登陆之后,点“设置”,按下图所示,全部打勾。这个必须设置,不设置,不能临时会话,就会显示“未启用”。这一步是关键,必须设置。(1)先看服务有没被停用:如停用…