微信开发小程序之登录页

首先申请一个小程序，打开开发文档进行开发

先创建登录页面的文件夹如下所示

之后开始搭建页面，在login.wxml文件中

代码如下，具体的标签可以参考微信开发小程序的文档介绍

评教系统——学生端


  
    学号：
    
  
  
    密码：
    
  
  
  登录
  

  

在login.wxss文件中设置样式

.header{
  font-weight: bold;
}
form{
  width: 100%;
  /* border: solid 1px #0f0;  */
}
.section{
  margin: 50rpx auto;
}
input{
  height: 100rpx;
  border: solid 1px #ccc;
}

接下来就是表单提交时发出的事件，在login.js文件中

formSubmit:function(e){
    // console.log(e.detail.value);
    wx.request({
      url: 'https://www.zhangsan.top/pingjiao/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'
        })
      }

最后的页面效果如图所示