微信小程序开发笔记（1）实现登陆界面

最新推荐文章于 2024-08-06 08:59:39 发布

此生无分起相思

最新推荐文章于 2024-08-06 08:59:39 发布

阅读量1.1k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序登陆

本文链接：https://blog.csdn.net/cswfqxs_/article/details/80760620

版权

这篇博客详细记录了微信小程序开发过程中的第一步——创建并实现登陆界面。通过分析`login.wxml`、`login.wxss`和`login.js`文件的内容，展示了如何构建一个完整的登陆界面，并附带了实际效果展示。

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

login.wxml

<!--login wxml-->
<view class="login">  
   <!--头像-->
  <view class="wxUserInfo">  
    <open-data type="userAvatarUrl"></open-data> 
    <open-data type="userNickName"></open-data>  
  </view> 

   <!--登陆-->
   <view class="inputView">
     <input name='input_user_name' class='input' type='number' placeholder='请输入账号' placeholder-style='color: #e0e0e0'/>
   </view>

   <view class="inputView" style="margin-top:5%">
     <input name='input_user_password' class='input' type='number' placeholder='请输入密码' placeholder-style='color: #e0e0e0'/>
   </view>

  <button class='buttonForgetPassword' size='mini'>忘记密码</button>
   
  <view class="buttonLoginView">
    <button class='buttonLogin' bindtap='Login' >登\t陆</button>
  </view>

  <view class="buttonRegisterView">
    <button class='buttonRegister' bindtap='Register'>注\t册</button>
  </view>
    
</view>

/**login.wxss**/
.wxUserInfo {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
}   

.input{
    padding-left: 10rpx;
    height: 80rpx;
}

.inputView{
    border:  1rpx solid #66c5ab;   /*边界：大小1rpx, 为固体，为绿色*/
    border-radius: 30rpx;         /*边界角的弧度*/
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 15rpx;
}

.buttonForgetPassword{
    color: #66c5ab;
    width:30%; 
    margin-right: 5%;
    margin-left: 65%;
    margin-top: 5rpx;
    background: none;
}

.buttonForgetPassword::after{
    border: none;               /*button去边框*/
}

.buttonLoginView{
    border-radius: 30px;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 10rpx;
}

.buttonLogin{
    background: #66c5ab;
    color: white;
}

.buttonLogin::after{
    border: none;
}

.buttonRegisterView{
    border-radius: 30rpx;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%; 
    margin-top: 5rpx;
}

.buttonRegister{
    background: none;
    color: #66c5ab;
}

.buttonRegister::after{
    border: none;
}

login.js

 
  var 
   app = getApp() 
 
  Page({
    
  //页面的初始数据  
 
   data: {
    
   response: 
  "" 
  , 
 
   }, 
 
  //获取用户名和用户密码 
 
   inputUserName: 
  function 
  (e) 
 
   {
    
   getApp().globalData.userName = e.detail.value.replace(/\s+/g,  
  '' 
  );  
  //获取用户名并去空格 
 
   console.log(getApp().globalData.userName);  
  //控制台输出 用于调试 
 
   }, 
 
   inputUserPwd: 
  function 
  (e) 
 
   {
    
   getApp().globalData.userPassword = e.detail.value.replace(/\s+/g,