小程序开发记录贴(陕西挂测)二

前面我们说了小程序开发的登录界面设计和css布局，并没有js，这里我们开始实现小程序轮播图，以及账号和密码的输入。
直接贴代码：

// pages/login/login.js 封存除了新家用户不在做修改
var app = getApp(),

  MD5 = require('../../utils/md5.js'),

  Util = require('../../utils/util.js')
Page({

  /**
   * 页面的初始数据
   */
  data: {

    slider: [{

        picUrl: '/images/login-1.jpg'

      },

      {

        picUrl: '/images/login-2.jpg'

      },

    ],

    swiperCurrent: 0,

    userName: '',

    userPassword: '',

    Height: "", //这是swiper要动态设置的高度属性

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

    var that = this

    that.upDate()

    that.catchInfo()

  },

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

    wx.setNavigationBarTitle({

      title: "用户登陆"

    })

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

  /**
   *页面动态轮播图 
   */
  imgHeight: function(e) {

    var that = this

    var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度

    var imgh = e.detail.height; //图片高度

    var imgw = e.detail.width; //图片宽度

    var swiperH = winWid * imgh / imgw + "px" //等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度  ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度

    that.setData({

      Height: swiperH //设置高度

    })
  },

  /**
   *页面动态轮播图dos
   */
  swiperChange: function(e) {

    var that = this

    that.setData({

      swiperCurrent: e.detail.current

    })
  },
  /**
   * 获取输入用户名
   */
  userNameInput: function(e) {

    var that = this

    that.setData({

      userName: e.detail.value

    })
    //获取成功后进行缓存
    if (that.data.userName) {

      wx.setStorageSync('userName', that.data.userName) //同步方式存储用户名

    }

  },

  /**
   * 获取输入密码
   */
  passWdInput: function(e) {

    var that = this

    that.setData({

      userPassword: e.detail.value

    })

    if (that.data.userPassword) {

      wx.setStorageSync('userPassword', that.data.userPassword) //同步方式存储用户名

    }

  },

  /**
   * 第一进入先加载是否有缓存账号和密码
   */
  catchInfo: function() {

    var that = this

    var userName = wx.getStorageSync('userName'); //取出缓存用户名

    var userPassword = wx.getStorageSync('userPassword'); //取出缓存用户密码

    //取出缓存用户名和密码打印到前台显示

    if (userName && userPassword) {

      that.setData({

        userName: userName,

        userPassword: userPassword

      })

    }

  },

  /**
   * 登陆按钮被触发
   */
  formSubmit: function() {

    var that = this

    let name = that.data.userName

    let pass = MD5(that.data.userName + that.data.userPassword)

    const url = '/login/doLogin.action' //换成自己的登录地址

    var data = {

      'userId': name,

      'password': pass

    }

        Util.sendRequest(url, data, 'post',"正在登陆..").then(res => {

          if (res.data.msgDesc == "登录成功！") {

            app.serData.cookie = res.header['Set-Cookie']; //保存Cookie到全局变量中

            wx.switchTab({

              url: "/pages/index/index",

            })

            that.userInfo()

          } else {

            Util.showToast({

              title: '检查账号密码',

              duration: 5000
            })
          }
        }).finally(function(res) {

          setTimeout(function() { //自动延迟3秒

            wx.hideLoading()

          }, 500);
        })
  },

  /**
   * 用户信息注入
   */
  userInfo: function() {

   
  },

  /**
   * 检查更新
   */
  upDate: function() {
    // wx.getUpdateManager 在 1.9.90 才可用，请注意兼容
    const updateManager = wx.getUpdateManager()

    updateManager.onCheckForUpdate(function(res) {
      // 请求完新版本信息的回调
      console.log(res.hasUpdate)
    })

    updateManager.onUpdateReady(function() {

      wx.showModal({

        title: '更新提示',

        content: '新版本已经准备好,修复已知bug,是否马上重启小程序？',

        success: function(res) {

          if (res.confirm) {
            // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
            updateManager.applyUpdate()
          }
        }

      })

    })

    updateManager.onUpdateFailed(function() {

      wx.showModal({

        title: '提示',

        content: '检查到有新版本，但下载失败，请稍后尝试',

      })

    })

  },
})