最近做的一个项目有涉及到用户登录。微信小程序的用户登录在我看来有两种，一种是需要用微信提供的用户身份标识，简单地说就是小程序的登录者就是使用这个小程序的微信用户，还有一种是小程序和服务器之间有自己的一套用户唯一标识，类似于员工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
