首先申請一個小程式，開啟開發文件進行開發

先建立登入頁面的資料夾如下所示

之後開始搭建頁面，在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'
        })
      }
 

最後的頁面效果如圖所示