使用微信小程序实现学生登录

最新推荐文章于 2024-09-13 07:21:22 发布

sensiblely

最新推荐文章于 2024-09-13 07:21:22 发布

阅读量4.9k

点赞数 1

首先，先登录微信小程序

创建login目录，使用Page自动生成文件

小程序采用wxml,js,wcss,json页面结构，wxml如同html,wcss如同css

在微信开发者工具中编写小程序时，切记使用div

实现学生登录，第一要搭建页面

参考以下代码：

<view class='container'>  
  <view class='header'>  
     <text>评教系统-学生端</text>   
  </view>  
  <form bindsubmit='formSubmit' bindreset='formReset'>  
    <view class='section'>  
       <text>学号：</text>  
       <input type="number" name="no" value='1635050915' placeholder='请输入学号'></input>  
    </view>  
    <view class='section'>  
      <text>密码：</text>  
      <input password='true' name="pwd" value='123456'></input>  
    </view>  
   <view class='section'>  
     <button type='primary' form-type='submit'>登录</button>  
   </view>  
  </form>  
</view>

页面搭建完工需要wcss的美观以下

如下：

form{  
  width: 100%;  
  border: 1px solid #0f0;  
}  
.section{  
  margin: 50rpx auto;  
}  
input{  
  border: 1px solid #ccc;  
  height:100rpx;  
}  
.header{  
  padding-top: 20rpx;  
}

要实现简易的功能，需要js实现

如下代码：

formSubmit:function(e){  
    console.log(e.detail.value);  
    wx.request({  
      url: 'https://www.lishuming.top/pj/index.php/student/api/login', //仅为示例，并非真实的接口地址  
      data: {  
        username:e.detail.value.no,  
        password:e.detail.value.pwd  
      },  
      header: {  
        'content-type': 'application/json' // 默认值  
      },  
      success: function (res) {  
        console.log(res.data)    
        })  
      }  
    })  
  }