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