微信小程序，教师评分系统，登录界面

1.首先在微信调试工具中登录微信账号，然后建立名为login的目录，新建pages。

2.生成四个文件wxml、json、js、wxss其中在wxml中写入界面设计。代码如下：

  
    评教系统-学生端
  
  


  学号：
  


  密码：
  

 登录 

 

其中相当于一个div盒子，写入一个表单。

3.在wxss中写入页面样式，代码如下：

/* pages/login/login.wxss */
input{
  border: 1px solid #ccc;
  height: 80rpx;
}
 form{
  width: 100%;
  /* border: solid 1px #0f0; */
} 

.section{
  margin: 50rpx auto;
}

.but-login{
  margin-top: 50px;
}
.header{
  margin-top: 30rpx;
  font-size: 60rpx;
}

在代码中，px最好用rpx代替，在手机端建议使用rpx。

4.在js文件中写入js。代码如下：

  formSubmit:function(e){
    // console.log(e.detail.value.no);
    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);
        wx.setStorage({
          key: "student",
          data: res.data
        });
        
        wx.redirectTo({
          url: "../teachers/teachers"
        })
      }
    })
  }

这样就可以成功显示一个手机页面的登录窗口了。可以在调试工具中预览生成二维码，手机扫描来查看。