微信小程序启动页

1、微信小程序的启动页。

启动页在设计中很常见，一般会跟倒计时搭配使用（一点可以点击跳过或者等待时间自然过渡）

*.wxml文件设置

<view class="Startup">

<view class="Countdown" bindtap="startJump">

<a>{{count}}s</a>

</view>

<test class="item">{{text}}</test>

</view>

*.js相应（5S倒计时）

// pages/startup/main.js

function countdown(that) {

  var count = that.data.count;

  if(count == 0) {

    // console.log("Time Out...");

   wx.switchTab({

   url: '../home/home'

   });

   that.setData({

        count: 0

    });

    return;

  }

 

  var time = setTimeout(function() {  

    if(that.data.clear==true){

that.setData({

        count: 5

      }); 

      clearInterval(time);

   }else{

      that.setData({

        count: count - 1

      });

      countdown(that);     

   }

 

  }, 1000);

}

Page({

  /**

   * 页面的初始数据

   */

  data: {

    text: "This is page data",

    count:5,

    clear:false

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function(options) {

let that = this;

countdown(that);

  },

/**

* 生命周期函数--监听页面隐藏

*/

//onHide: function () {

// clearInterval(projectLoad);

//}

 

//从启动页跳转界面

  startJump: function() {

    let that = this;

    that.setData({

      clear: true

    });   

   wx.switchTab({

   url: '../home/home'

   })

  }

})

2、进入首页，如果进入有底部栏的首页（跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面）

   wx.switchTab({

         url: '../home/home'

   })