微信小程序踩坑—用户登录界面

最近做的一个项目有涉及到用户登录。微信小程序的用户登录在我看来有两种，一种是需要用微信提供的用户身份标识，简单地说就是小程序的登录者就是使用这个小程序的微信用户，还有一种是小程序和服务器之间有自己的一套用户唯一标识，类似于员工id这种，这种就不需要获取微信的登陆凭证换取openid等繁杂操作，就是简单地输入账号密码登陆然后就能从服务器获取用户数据。这次做的项目用的是第二种。

第一种方式官方文档的流程图已经说得足够明白清晰。

步骤分为两步：

1.小程序调用wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。

2.开发者服务器以code换取 用户唯一标识openid 和 会话密钥session_key。

之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。

具体接口详见官方文档

第二种方式就简单多了，只需要发起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: '绑定失败，请重试',
          })
              }})

需要同服务端保持seesion见微信小程序踩坑–设置cookie保持session