首先 ，先登入微信小程式

建立login目錄，使用Page自動生成檔案

小程式採用wxml,js,wcss,json頁面結構，wxml如同html,wcss如同css

在微信開發者工具中編寫小程式時，切記使用div

實現學生登入，第一要搭建頁面

參考以下程式碼：

<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='1635050915' placeholder='請輸入學號'></input>  
    </view>  
    <view class='section'>  
      <text>密碼：</text>  
      <input password='true' name="pwd" value='123456'></input>  
    </view>  
   <view class='section'>  
     <button type='primary' form-type='submit'>登入</button>  
   </view>  
  </form>  
</view> 
 

頁面搭建完工需要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 等等，這些標籤就是小程式給開發者包裝好的基本能力。