页面跳转后执行函数_实战项目丨无所不能的启动页面

众所周知，我们的应用一般都是注册登录后才能进行相关的业务操作。本案例中，使用微信小程序开发，因此我们需要通过微信小程序授权并与我们的账号进行绑定。

在授权绑定之前，我们需要先考虑三个问题：

Q1：授权绑定页面为首页吗？

Q2：通过登录临时凭证获取OpenID只执行一次吗？

Q3：授权绑定完成后，退出应用再次进入后页面逻辑如何跳转？

根据以上三个问题，我们来看看我们的应用程序。当我们第一次进入应用程序的时候，我们需要进行授权绑定，这时，授权绑定页面为首页；当我们授权绑定完成后，退出应用再次进入应用程序时，此时业务操作页面为首页；综上所述，我们需要根据我们的操作状态进行页面之间的跳转，若我们将授权绑定页面设置为首页，那么我们每次进入业务操作页面时，都会出现授权绑定页面一闪而过的画面，体验不好。

因此我们给应用设置一个起始页面，这个页面用来判断当前访问用户是否绑定授权，若无则跳转到授权绑定页面，若有则跳转到页面操作界面。

在上面的界面中，我们可以看出其由应用Logo、提示文本、以及页面倒计时构成。我们使用view标签来构建我们的页面。

//splash.wxml欢迎使用智慧管理平台{{second}} s

// splash.wxss 样式文件page { background: #F5F5F5; height: 100%;}.sx-container { height: 100%; display: flex; flex-direction: column; align-items: center;}.sx-container .sx-img { flex-grow: 1;}.sx-container .sx-img image { margin-top: 40%; width: 10rem; height: 10rem; border-radius: 50%; border: 0.125rem solid coral; box-shadow: 0rem 0.375rem 0.1875rem #888888;}.sx-container .sx-title { flex-grow: 1; font-family: "KaiTi"; font-size: 1rem;}.sx-second { position: absolute; top: 0.625rem; right: 0.625rem; text-align: center;}.sx-second view { border: 0.125rem solid #FF7F50; height: 1.5625rem; width: 2.1875rem; line-height: 1.5625rem; border-radius: 0.3125rem; font-weight: bolder;}

对页面进行数据初始化，其中我们需要设置页面倒计时的最大时间，并且在页面加载时，对页面倒计时进行操作，以及通过服务器地址获取OpenID和用户详细信息。

//获取应用实例const app = getApp();Page({ /** * 页面的初始数据 */ data: { second: 3 //3秒后页面跳转 }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { var that = this; //页面倒计时 that.countdown(); }, countdown: function() { var that = this; var second = this.data.second; if (second == 0) { var zhpt_key = wx.getStorageSync("ZHPT_KEY"); if (that.data.second === 0) { if (zhpt_key == "" || zhpt_key == null) { /** * 若key值为空时，调用wx.login()方法查询openid， * 并查询是否存在用户记录 */ that.getUserWeChatKey(); } else { //存在缓存key，查询用户信息 that.checkUserIsExist(zhpt_key); } } return; } var time = setTimeout(function() { that.setData({ second: second - 1 }); that.countdown(that); }, 1000); }, getUserWeChatKey: function() { var that = this; //通过wx.login()方法获取登录临时code wx.login({ success: res => { //通过wx.request()方法获取OpenID wx.request({ url: app.util.getServerUrlPath() + "/zhpt_sso/wx/backWeChatKey.html