微信开发小程序之登录页

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

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

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

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

<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='1635050222' placeholder='请输入学号' />
  </view>
  <view class='section'>
    <text>密码：</text>
    <input password='true' name='pwd' value='123456' />
  </view>
  <view class='section'>
  <button type='primary' form-type='submit'>登录</button>
  </view>
</form>
  
</view>

在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'
        })
      }

最后的页面效果如图所示