基于java的微信小程序的实现（三）登录，注册，注小程序端的实现

1.微信小程序项目结构认识

js文件用来写相关的逻辑操作，主要是用来操作数据

json文件用来写一些相关的配置

wxss相当于css用来写页面样式

wxml相当于html用来写页面的元素的

pages文件夹中可以存放多个文件夹，每个文件夹里面都是一套是js，json，wxss，wxml的文件结构

2.相关配置的写入

1.现将小程序的相关信息写入app.json文件

{
  "pages":[
    "pages/userLogin/login",
    "pages/userRegist/regist",
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "佐仓小视频",
    "navigationBarTextStyle": "black"
  }
}

2.将相关配置写入app.js

//app.js
App({
  //服务器的路径（因为该路径不能直接填写ip地址，所以这才采用的是内网穿透工具生成的外网url，并配置到本地的tomcat上）
  serverUrl:"http://lex.s3.natapp.cc",
  //该函数为将用户信息存入手机的缓存中
  setGlobalUserInfo:function(user){
    wx.setStorageSync("userInfo", user);
  },
  //从缓存中取出用户信息
  getGlobalUserInfo: function (key) {
    return wx.getStorageSync(key);
  }
})

3.注册功能需求分析

• 用户在注册页面输入的内容不能为空，如果用户名或者密码为空则需要弹出提示消息（暂没有对用户名和密码长度做出限制）
• 用户在输入用户名和密码点击注册之后，要调用注册接口，在回调函数中进行判断，如果返回的状态码为200则说明注册成功，如果为500则说明注册失败，并提示错误信息给用户
• 注册成功之后会直接跳到登录界面

js逻辑代码实现

const app = getApp()

Page({
   data:{

   },
  doRegist:function(e){
    var formObject= e.detail.value;
    var username=formObject.username;
    var password=formObject.password;
    if(username.length==0||password.length==0){
        wx.showToast({
          title: '用户名或密码不能为空',
          icon:"none",
          duration:3000
        })
    }else{
      var serverUrl=app.serverUrl;
      wx.request({
        url: serverUrl +'/regist',
        method:'POST',
        data:{
          username:username,
          password:password
        },
        header:{
          'content-type': 'application/json'
        },
        success:function(res){
          console.log(res.data)
          if (res.data.status==200){
              wx.showToast({
                title: '恭喜你，注册成功',
                icon:"none",
                duration:3000
              })
          }else{
            wx.showToast({
              title: res.data.msg,
              icon:"none",
              duration:3000
            })
          }

        }
      })
    }
  },
  goLoginPage:function(){
    wx.navigateTo({
      url: '../userLogin/login'
    })
  }

})

4.登录功能需求分析

登录功能需要对密码和用户名进行非空的判定，如果为空，给用户返回错误提示

点击登录按钮触发js事件并调用后台登录接口，如果回调函数返回200则说明登陆成功，则将后端返回的用户信息保存到手机的缓存中，并进行页面的跳转

如果500给用户提示错误信息

doLogin:function(e){
    var me =this;
    var formObject=e.detail.value;
    var username = formObject.username;
    var password = formObject.password;
    var serverUrl=app.serverUrl;
    if (username.length == 0 || password.length == 0) {
      wx.showToast({
        title: '用户名或密码不能为空',
        icon: "none",
        duration: 3000
      })
      }else{
        // wx.showToast({
        //   title: '登录ing..',
        //   icon:"none"
        // })
        wx.showLoading({
          title: '登陆ing',
        })
        wx.request({
          url: serverUrl+'/login',
          method:'POST',
          data: {
            username: username,
            password: password
          },
          header: {
            'content-type': 'application/json'
          },
          success:function(res){
          
            if(res.data.status==200){
              wx.showToast({
                title: '登陆成功',
                icon: "success"
              })
              // app.userInfo=res.data.data;
              //将后端返回的用户信息存入缓存中
              app.setGlobalUserInfo(res.data.data);
       
                wx.redirectTo({
                  url: '../mine/mine'
             )
              }
            }else{
              wx.showToast({
                title: '登陆失败',
                icon: "none"
              })
            }
            console.log(res.data);
          }
        })
      }
  }