微信小程序开发，实现欢迎页/开屏页/启动页倒计时

1. 涉及到的知识点

1. 路由跳转： https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html

2. 定时器使用： https://developers.weixin.qq.com/miniprogram/dev/reference/api/setInterval.html

2. 路由跳转的5中方式

1. wx.switchTab(Object object)

功能描述:
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

参数:
Object object

属性	类型	默认值	必填	说明
url	string	是	需要跳转的 tabBar 页面的路径（代码包路径）（需在 app.json 的 tabBar 段定义的页面），路径后不能带参数。
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

2. wx.reLaunch(Object object)

功能描述:
关闭所有页面，打开到应用内的某个页面

参数:
Object object

属性	类型	默认值	必填	说明
url	string	是	需要跳转的应用内页面路径（代码包路径），路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

3. wx.redirectTo(Object object)

功能描述:
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

参数:
Object object

属性	类型	默认值	必填	说明
url	string	是	需要跳转的应用外非 tabBar 的页面的路径（代码包路径）。路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

4. wx.navigateTo(Object object)

功能描述:
保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

参数:
Object object

属性	类型	默认值	必填	说明
url	string	是	需要跳转的应用内非 tabBar 的页面的路径（代码包路径)，路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’
events	Object	否	页面通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。
routeType	string	否	自定义路由由类型，相关文档 自定义路由
routeConfig	Object	否	自定义路由配置，相关文档 自定义路由
routeOptions	Object	否	自定义路由参数，相关文档 自定义路由
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

5. wx.navigateBack(Object object)

功能描述:
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

参数:
Object object

属性	类型	默认值	必填	说明
delta	number	1	否	返回的页面数，如果 delta 大于现有页面数，则返回到首页。
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

3. 代码实现过程

1. splash.wxml布局页面

<!--pages/splash/splash.wxml-->
<view class="splash-container">
	<view class="jump-container">
		<text>{{seconds}} s | 跳过</text>
	</view>
	<view class="image-container">
		<image src="https://img2.baidu.com/it/u=1553947715,2196891669&fm=253&fmt=auto&app=138&f=PNG?w=192&h=192" mode="" />
	</view>
</view>

2. splash.wxss样式

/* pages/splash/splash.wxss */

.splash-container{
	display: flex;
	position: relative;
}


.jump-container{
	width: 128rpx;
	height: 58rpx;
	line-height: 58rpx;
	background-color: #0b0d3b;
	border-radius: 29rpx;
	text-align: center;
	font-size: 20rpx;
	position:absolute;
	top: 168rpx;
	right: 20rpx;
	color: white;
	position: absolute;
	z-index: 100;
}

.image-container{
	display: flex;
	width: 100vh;
	height: 100vh;
	justify-content: center;
	align-items: center;
  
}

.image-container image{
	width: 168rpx;
	height: 168rpx;
}

3. splash.js页面

// pages/splash/splash.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    seconds: 3
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.startJump()
  },

  //启动倒计时
  startJump(params) {
    const countdownTimer = setInterval(() => {
      if (this.data.seconds > 0) {
        this.setData({
          seconds: this.data.seconds-1
        })
      } else {
        //取消由 setInterval 设置的定时器
        clearInterval(countdownTimer)
        //注意：switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
        wx.switchTab({
          url: '/pages/index/index',
        })
      }

    }, 1000)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

3. 运行效果