微信小程式是一種全新的連線使用者與服務的方式，它可以在微信內被便捷地獲取和傳播，同時具有出色的使用體驗。

建立目錄login，在login目錄下建立檔案

這是我簡單搭的html頁面

<view class='container'>
  <view class='header'>
  <text>評教系統--學生端</text>
  </view>
  <form bindsubmit="formSubmit">
     <image style="width: 200rpx; height: 200rpx; background-color: #eeeeee;" mode="{{item.mode}}" src="/images/01.jpg"></image>
    <view class="section">
      <label>學號：</label>
      <input name="no" type='text'  placeholder="請輸入學號" value='1635050710' />
    </view>
    <view class="section">
      <label>密碼：</label>
      <input type="password" name="pwd" placeholder="請輸入密碼" value='123456' />
    </view>
    <view class="btn-area">
      <button formType="submit" type="primary">登入</button>
    </view>
  </form>
</view>
 

css檔案

form{
  width:80%;
  margin-top: 50rpx;
}
.container view {
   margin-top: 30rpx; 
}
.container view input {
   margin-top: 16rpx; 
}
.btn-area button{
  margin-top:50rpx;
}
.container input{
  border:1px solid #666;
  border-radius: 40rpx;
  padding-left: 10rpx;
  height: 70rpx;
} 
 image{
  margin-left: 150rpx; 
  margin-top:10rpx;
  border-radius: 200rpx;
  }
.header{
  font-size: 40rpx;
  font-weight: bold;
}
 

js檔案

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