项目实战 | “门帘”一样重要的启动页

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

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

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

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

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

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

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

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

//splash.wxml

<view class="sx-container">
  <view class="sx-img">
    <image src="/images/sx-logo.png"></image>
  </view>
  <view class="sx-title">
    <text>欢迎使用智慧管理平台</text>
  </view>
</view>
<view class="sx-second">
  <view>{{second}} s</view>
</view>

// 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;
}

// splash.js文件

对页面进行数据初始化，其中我们需要设置页面倒计时的最大时间，并且在页面加载时，对页面倒计时进行操作，以及通过服务器地址获取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",
          data: {
            _code: res.code
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          },
          method: 'POST',
          dataType: 'json',
          success: res => {
            if (res.statusCode === 200 && res.data.status) {
              var key = res.data.data.zhpt_key;
              wx.setStorageSync('ZHPT_KEY', key);
              //验证用户信息是否存在
              that.checkUserIsExist(key);
            } else {
              app.util.showModalTip('系统提示', res.data.msg, '确定');
            }
          }
        });
      }
    })
  },
  checkUserIsExist: function(_key) {
    //获取用户信息
    wx.request({
      url: app.util.getServerUrlPath() + "/zhpt_sso/wx/wxhjsjzxx.html",
      data: {
        _wxh: _key
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      method: 'POST',
      dataType: 'json',
      success: res => {
        if (res.statusCode === 200 && res.data.status) {
          wx.setStorageSync('userInfo', res.data.data);
          //用户信息存在，跳转到首页
          wx.redirectTo({
            url: '/pages/home/home'
          });
        } else {
          app.util.showModalTip('系统提示', "您还未进行绑定授权操作", '确定');
          //用户信息不存在，则跳转到绑定授权界面
          wx.redirectTo({
            url: '/pages/index/index'
          });
        }
      }
    });
  }
})

综上代码所示，我们用到了以下几个知识点。

① 本地缓存

在获取到用户的唯一Key值后，我们需要通过wx.setStorage(Object obj)方法将数据保存到本地缓存中指定的Key中，我们可以使用wx.getStorage(Object obj)来获取我们存储的Key值内容，并且通过服务器来获取我们需要的数据值。

② 网络请求

/**
     * @description 发起HTTPS网络请求
     * @param {url} 开发者服务器接口地址
     * @param {data} 请求的参数
     * @param {header} 设置请求的header，不能设置Referer。content-type默认为application/json
     * @param {method} HTTP请求方法
     *      @value {OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT}
     * @param {dataType} 返回的数据格式
     *      @Value {
    json（返回后会对数据进行JSON.parse转换）、其他（不会做JSON.parse转换）}
     * @param {responseType} 响应的数据类型
     *      @Value {text（响应的数据为文本）、arraybuffer（响应的数据为ArrayBuffer）}
     * @param {success} 接口调用成功的回调函数
     *      @Value {data（开发者服务器返回的数据）、statusCode（开发者服务器返回的HTTP状态码）、header（开发者服务器返回的HTTP Response Header）}
     * @param {fail} 接口调用失败的回调函数
     * @param {complete} 接口调用结束的回调函数（调用成、失败都会执行）
     * @Return {RequestTask} 网络请求任务对象
 */

③ 获取登录临时凭证

我们可以通过微信官方提供的登录能力方便的获取微信提供的用户身份标识，来与我们现有系统用户做绑定。我们通过wx.login()方法获取临时登录凭证code，并回传到我们的服务器通过auth.code2Session接口获取用户唯一标识OpenID并与用户的账号进行绑定。

/**
 * 通过临时登录凭证CODE换取用户唯一标识OpenID
 *
 * @param code 临时登录凭证
 * @return 用户唯一标识OpenID
 */
public static JSONObject getOpenIdByCode(String code) throws IOException {

    String url = WECHAT_URL + "?appid=" + WECHAT_APPID + "&secret="
            + WECHAT_SECRET + "&js_code=" + code + "&grant_type=" + WECHAT_GRANT_TYPE;

    CloseableHttpClient httpClient = HttpClients.createDefault();

    HttpGet httpGet = new HttpGet(url);

    CloseableHttpResponse httpResponse = httpClient.execute(httpGet);

    HttpEntity httpEntity = httpResponse.getEntity();
    String content = EntityUtils.toString(httpEntity, "UTF-8");

    return JSONObject.parseObject(content);
}

④ 页面跳转

页面路由有五种方法，此处我们使用wx.redirectTo(Object obj)来跳转页面，此方法是关闭当前页面，跳转到应用内的某个页面，但不允许跳转到tabbar页面。