小程序实现启动页自动跳转————（2020.1.19学习笔记）

今天要是实现的是启动页自动跳转效果（如下图）

启动页在打开小程序2000毫秒之后，自动跳转到有tabbar的首页。
在实现该效果之前，首先要构建自己的启动页，这里我的启动页如下图

启动页的wxml代码如下

<view class="WelCome_Header">
  <image src="/My_Image/AppIcon_Image/View_Sky_100.png"></image>
</view>
<view  class="WelCome_Tail_1">
   <text decode="{{true}}">观天\n</text>
</view>
<view  class="WelCome_Tail_2">
   <text decode="{{true}}">"观天时，知地利"</text>
</view>

启动页的wxss代码如下

/* pages/Page_Welcome/Page_WelCome.wxss */
.WelCome_Header{
  display: flex;
justify-content: center;
padding: 160rpx;
}
.WelCome_Header image{
  height: 250rpx;
  width: 250rpx;
}
.WelCome_Tail_1{
  display: flex;
justify-content: center;
position:fixed; 
bottom:300rpx; 
width: 100%;
}
.WelCome_Tail_1 text{
  font-size: 60rpx;
  color: #FF556A ;
  font-family: STKaiti;
}
.WelCome_Tail_2{
  display: flex;
justify-content: center;
position:fixed; 
bottom:240rpx; 
width: 100%;
}
.WelCome_Tail_2 text{
  font-size: 45rpx;
  color: #FF556A ;
  font-family: STXihei;
}

接下来就是，启动页自动延时跳转逻辑，这里先要说明一点，如果启动页要跳转到有tabBar组件的页面必须需要使用wx.switchTab跳转，这跟tabBar组件的性质有关，使用tabBar的页面是不能被非tabBar页面正常访问的，嗯，那么跳转问题解决之后，自动延时跳转也就没啥问题，直接在生命周期函数onShow中使用setTimeout函数实现延时操作,然后再setTimeout函数中使用wx.switchTab跳转（代码如下）

 onShow: function () {
  
    setTimeout(function() {
      wx.switchTab({
        url: '/pages/Page_Home_New/Page_Home_New',
      })
       
   
      
    }, 2000)
  },

最后关于tabar组件的使用，可以看我之前的学习笔记（https://blog.csdn.net/qq_37704442/article/details/103440245）
，这样启动页在打开小程序2000毫秒之后，自动跳转到有tabbar的首页的效果就实现了

来源：CSDN

作者：曾胖神父

链接：https://blog.csdn.net/qq_37704442/article/details/104045614