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

首先 ，先登录微信小程序

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

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

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

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

参考以下代码：

  
     评教系统-学生端 
  
  

    
       学号：
       
    
    
      密码：
      
    
   
     登录
   
  

页面搭建完工需要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)  
        })
      }
    })
  }

标签名字有点不一样 往往写 HTML 的时候，经常会用到的标签是 div, p, span，但小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者包装好的基本能力。

这样，一个简易的学生登录页面就做好了！