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

栏目:建站技术 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
关闭所有页面,打开到应用内的某个页面。

相关阅读

中英文混和的字符串的ASCII与UNICODE编码与解码

2020-10-10184

//1:获取中英文混合字符的编码(ASCII码与UNICODE码)$str=&quot;官网制作:网巢网络&quot;;foreach(math($str)as$key=&gt;$value){if(preg_match(&#39;/^[x{4e00}-x{9fa5}]+$/u&#39;,$value)){//中文,注意中文这里暂时不转换,因为无法通过chr…

正则表达式收集汇总

2020-12-1285

搜索:empty(($)tr[&#39;([a-z]{1,})&#39;]),可以查找这样的empty($tr[&#39;digest&#39;]),然后可以替换成!$digest替换:!$1$2匹配A标签的超连接的正则表式如下$pattern=&quot;/&lt;a[^&gt;]+?href=[&quot;&#39;]?([^&quot;&#39;]+)…

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

2020-10-1087

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

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

2020-10-1082

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

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

2020-10-10119

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

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

2020-10-10100

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…