1. 程式人生 > >微信小程式(表單登入並獲取個人資訊的實現)

微信小程式(表單登入並獲取個人資訊的實現)

首先先建立一個index的目錄和page,在xml裡面通過程式碼設計一個登入頁面,程式碼如下:

<view class='container'>  
  <form bindsubmit="formSubmit" bindreset="formReset">  
  <view class="section">  
    <view class="no">學號:</view>  
    <input name="no" placeholder="請輸入你的學號" />  
  </view>  
  <view class="section">  
    <view class="pwd">密碼:</view>  
    <input name="pwd" type='number' placeholder="請輸入你的密碼"/>  
  </view>  
  <view class="btn-area">  
    <button formType="submit" class='submit'>登入</button>  
    <button formType="reset" class='reset'>重置</button>  
  </view>  
</form>  
</view>  
formSubmit:function(e){  
    // console.log(e.detail.value);  
    wx.request({  
      url: ''//相應的域名連結,  
      data: {  
        no: e.detail.value.no,  
        password: e.detail.value.pwd  
      },  
      header: {  
        'content-type': 'application/json' // 預設值  
      },  
      success: function (res) {  
        // console.log(res.data)  
  
        wx.redirectTo({  
          url: '../teachers/teachers'  
        })  
      }  
    })  
  }  

獲取學號和密碼跳轉到教師列表頁面即可。

感謝觀看。