微信小程序-枯木学习笔记3-登录功能

1、实现登录页面
2、请求java后台登录学生的信息，返回存储到本地浏览器缓存（h5支持）

• 背景图片，高度100%（样式）
• 轮播图 swiper组件
• 输入框：image图标、lable标签、bindinput事件
• 密码输入框
• 登录按钮：bindtap事件，wxToast消息提醒，wx.request Ajax请求java后台，返回json数据缓存到本地

全局配置文件，先添加 index 首页模块，
最后添加对应的页面模块 exam、my 声明，在添加tabBar（首页、考试、我的）

{
  "pages":[
    "pages/index/index",
    "pages/exam/exam",
    "pages/my/my",
    "pages/home/home",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
      "backgroundColor": "#563624",
      "color": "#ffff",
      "list": [
          {
            "pagePath":"pages/home/home",
            "text":"首页",
            "iconPath":"pages/images/Home.png"
          },
          {
              "pagePath": "pages/exam/exam",
              "text": "考试",
              "iconPath": "pages/images/My_exam.png"
          },
          {
              "pagePath": "pages/my/my",
              "text": "我的",
              "iconPath": "pages/images/My.png"
          }
      ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

页面布局，代码量大集中在这里

 
    
      
        
      
      
        
      
      
        
      
      
        
      
    
  
  
.
   
  
    
     
       
      账号 
       
     
    
     
    
    
     
       
      密码 
       
     
    
    
     
      登录 
     

  
  

样式修饰

page{
    height: 100%;
}

.container{
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
}

.login-img{
    width: 750rpx;
}

.login-form{
    margin-top: 40px;
    flex: auto;
    height: 100%;
}

.inputView{
    line-height: 45px;
    border-radius: 20px;
    border:1px solid #999999;
}

.nameImage, .keyImage{
    margin-left: 22px;
    width: 18px;
    height: 16px;
}

.loginLab {
    margin: 15px;
    font-size: 14px;
}

.inputText{
    flex: block;
    float: right;
    text-align: left;
    margin-right: 22px;
    margin-top: 11px;
}

.line{
    margin-top: 8px;
}

.loginBtnView{
    width: 100%;
    height: auto;
}

.loginBtn{
    width: 90%;
    margin-top: 30px;
    border-radius: 10px;
}

声明全局变量，方便统一配置java后台的链接域名和端口号

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null,
    myhost: "http://localhost:8088"
  }
})

页面输入框事件、按钮登录后请求后台并处理返回数据
涉及到微信的api较多，死记

// index.js
// 获取应用实例
const app = getApp()
const myhost = app.globalData.myhost

Page({
  data: {
   id: '',
   password: ''
  },
  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad() {
    
  },
  
  usernameInput: function(e){
      this.setData({
          id: e.detail.value
      })
  },
  passwordInput: function(e){
      this.setData({
          password: e.detail.value
      })
  },
  login: function(){
      var that = this;
      if(this.data.id.length==0 || this.data.password.length ==0){
          wx.showToast({
              title: "账号或密码不能为空",
              icon: 'none',
              duration: 2000
          })
      }else{
          console.log('wx.request---'+myhost)
          wx.request({
              url: myhost + '/student/login',
              method: 'post',
              data:{
                  id: that.data.id,
                  password: that.data.password
              },
              success(res){
                  if(res.data == null || res.data == ""){
                      wx.showToast({
                        title: '错误啦',
                        icon: 'error',
                        duration: 2000
                      })
                  }else{
                      wx.setStorageSync('student', res.data);
                      wx.switchTab({
                        url: '/pages/home/home',
                      })
                  }
              },
              fail(err){
                console.log("出错拉"+err)
                  console.log(err)
              }
          })
      }
  }
})