项目实训二，登陆界面完成

最新推荐文章于 2024-10-02 17:48:59 发布

kingdom ss

最新推荐文章于 2024-10-02 17:48:59 发布

阅读量207

点赞数

分类专栏：学习笔记文章标签：小程序 js

本文链接：https://blog.csdn.net/qq_43754599/article/details/115988908

版权

学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何使用微信小程序（WXML）创建一个登录界面，包括设置半透明背景、网络获取图片、input组件的高级用法以及利用wx.request与后端交互进行登录验证。在样式编写中，涉及了布局、图片显示和按钮设计，同时在JS部分展示了登录功能的实现，通过wx.request发送POST请求并处理登录成功或失败的反馈。

摘要由CSDN通过智能技术生成

首先完成wxml编写

我们学习到了

我们完成了背景图片半透明的设置采用如下方法

view class="bg"  style="opacity:{{0.1}}">
    <image class="bg-image" mode="scaleToFill"></image>
  </view>

从网络获得logo图片
学习到input的高级用法，默认文字，隐藏输入等

<view class="container">
  <view class="bg"  style="opacity:{{0.1}}">
    <image class="bg-image" mode="scaleToFill"></image>
  </view>



  <view class="login">
    <view class="logo">
      <image src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3313516209,1160077825&fm=26&gp=0.jpg"></image>
    </view>
    <view class="login-form">
      <input placeholder="请输入统一认证用户名（学工号）" auto-focus class="login-txt" bindinput="usernameInput"/>
      <input placeholder="请输入统一认证密码" class="login-txt" password="true" bindinput="passwordInput"/>
      <button class="login-btn" bindtap="denglu">登录</button>
    </view>
    
  </view>
</view>

对样式进行编写，继续完善背景设置

.container {
  height: 100%;
}
.logo{
  border-top: 1px #f2f2f2 solid;
  padding: 100px 0;
  text-align: center;
}
.logo image{
  width: 400rpx;
  height: 150rpx;
}
.login-txt{
  background: #fff2e9;
  font-size: 24rpx;
  text-align: center;
  color:#333;
  padding: 15rpx;
  margin-bottom: 5rpx;
}
.login-btn{
  background: rgb(161, 6, 6);
  border: 0;
  color: #fff;
  font-size: 24rpx;
  padding: 15rpx;
  margin: 100rpx 20rpx 20rpx 20rpx;
}
.forget-reg{
  font-size: 24rpx;
  color: #f00;
  margin: 0 30rpx;
}
.reg{
  float: right;
}
.bg{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:url('https://webvpn.sdu.edu.cn/https/77726476706e69737468656265737421e0f6528f69236c45300d8db9d6562d/cas/comm/sdu/image/login_container_bg_07.jpg?1618926812569') ;
  background-size:cover;
  z-index:-1;
  }
  
  .bg-img{
      width : 100%;
      height : 100%;
  }

最后对js进行编写，学习了wx.request方法，实际上与后端进行了交互

获得了返回值token等

const app = getApp()
Page({
  data:{
    text:"Page login",
    username: '',
    password: ''

  },
  
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  }
  ,
  usernameInput: function (e) {
    this.setData({
      username: e.detail.value
    })
  },
 
  // 获取输入密码 
  passwordInput: function (e) {
    this.setData({
      password: e.detail.value
    })
  },
  denglu:function(){
    var that = this;
    if (this.data.username.length == 0 || this.data.password.length == 0) {
      wx.showToast({
        title: "账号或密码不能为空",
        icon: 'none',
        duration: 2000
      })
    } else {
      wx.request({
        url: app.globalData.globalReqUrl +'/api/login', 
        // 仅为示例，并非真实的接口地址
        method: 'post',
        data: {
          username: that.data.username,
          password: that.data.password
        },
        header: {
          'content-type': 'application/json' // 默认值
          },
        success(res) {
          if (res.data.msg == "成功") {
            app.globalData.token=res.data.content
            console.log(app.globalData.token)
            wx.switchTab
            ({
      url: '../index/index',
    })  
          } else {
            wx.showToast({
              title: "登陆失败",
              icon: 'none',
              duration: 2000
            })
          }
        }
    })
}

}
})

最后得到了登陆界面