最近做的一個專案有涉及到使用者登入。微信小程式的使用者登入在我看來有兩種，一種是需要用微信提供的使用者身份標識，簡單地說就是小程式的登入者就是使用這個小程式的微信使用者，還有一種是小程式和伺服器之間有自己的一套使用者唯一標識，類似於員工id這種，這種就不需要獲取微信的登陸憑證換取openid等繁雜操作，就是簡單地輸入賬號密碼登陸然後就能從伺服器獲取使用者資料。這次做的專案用的是第二種。

第一種方式官方文件的流程圖已經說得足夠明白清晰。

步驟分為兩步：

1.小程式呼叫wx.login() 獲取 臨時登入憑證code ，並回傳到開發者伺服器。

2.開發者伺服器以code換取 使用者唯一標識openid

之後開發者伺服器可以根據使用者標識來生成自定義登入態，用於後續業務邏輯中前後端互動時識別使用者身份。

具體介面詳見官方文件

第二種方式就簡單多了，只需要發起wx.request()請求將輸入的賬號密碼送至伺服器換取登入資訊。

wxml程式碼

<view class="container">
 
 <open-data type="userAvatarUrl" class='avatar'></open-data>
 <!-- <image src='{{avatarUrl}}' class='avatar'></image>-->
  <form bindsubmit="formSubmit" class='form'>
    <view class="row">

    <input type="text" name="userId" placeholder="請輸入使用者賬號" placeholder-class='placeholder' value="{{userId}}" />
   </view>
   <view class="row">
     <input type="password" name="userPassword" placeholder="請輸入密碼" placeholder-class='placeholder' value="{{userPassword}}" />
   </view>
    <view class="row">
      <button class='btn'  form-type="submit"><text class='lable'>繫結賬號</text></button>
    </view>
 
  </form>
</view>
 

這裡特別要提一嘴的是，用到了這行程式碼顯示使用者頭像。

<open-data type="userAvatarUrl" class='avatar'></open-data>

獲取使用者資訊時，如果是隻需要獲取使用者的頭像和暱稱，可以直接使用<open data />元件，如果還需要更多使用者資訊要通過wx.getUserInfo()獲取。

最終的介面是這樣子的

登陸按鈕的bindsubmit事件中的wx.request()

wx.request({
        url: '',           //伺服器的登入介面
        data: {
          id: objData.userId,
           password: objData.userPassword
        },
        header: { 'Content-Type': 'application/x-www-form-urlencoded' },
        method: 'POST',
        success: function (res) {
        if(res.data.code == 0){              //賬號密碼比對正確
           var userInfo = res.data.data    //使用者登入資訊
           wx.setStorageSync('userInfo', userInfo);  
                //跳轉到成功頁面
          wx.switchTab({
             url: '../onDuty/onDuty'
          })
          }
           else {                //出現error
             wx.showToast({
              title: res.data.message.slice(5),
               icon: 'loading'
             })
          }
        },
        fail: function () {
          console.log('繫結失敗QAQ')
          wx.showModal({
          title: '失敗',
          content: '繫結失敗，請重試',
          })
              }})