一文教会你微信小程序如何实现登录

微信小程序页面画好后,需要开始做一系列和用户的交互功能了,首先就是登录,这篇文章主要给大家介绍了关于微信小程序如何实现登录的相关资料,需要的朋友可以参考下

业务流程：

1：首先需要一个按钮触发事件

2：调用微信小程序的登录接口wx.login，拿到code

3：调用微信小程序的获取用户信息的接口wx.getUserProfile，拿到用户的个人信息

4：拿到的个人信息调用后台的接口，把个人信息传给后台，登录成功并把相关信息存储在本地的缓存中，方便之后的开发使用

下面开始用代码介绍

wxml：

js：

1：data初始数据

//后台接口需要的一下参数（具体要和后台的同事商量） loginInfo: { code: '', spread_spid: 0, spread_code: 0 }

2：按钮触发的login点击事件

调用微信小程序的登录接口：

wx.login(Object object) | 微信开放文档
微信开发者平台文档
https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html

调用微信获取用户个人信息的接口：

wx.getUserProfile(Object object) | 微信开放文档
微信开发者平台文档
https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html

//登录按钮触发的事件 login(){ let that = this //调用微信小程序的登录接口 wx.login({ success(e) { that.data.loginInfo.code = e.code //拿到的code存储在data中 wx.showModal({ title: '温馨提示', content: '微信授权登录后才能正常使用小程序功能', cancelText: '拒绝', confirmText: '同意', success( sucessInfo ) { //调用微信小程序的获取用户信息的接口 wx.getUserProfile({ desc: '用于完善会员资料', // 声明获取用户个人信息后的用途 lang: 'zh_CN', success(info) { //把获取到的信息复制到data中的loginInfo中 that.data.loginInfo = Object.assign( that.data.loginInfo, info ) //调用后台的接口，把所有整合的个人信息传过去 that.handlerLogin( that.data.loginInfo ) }, fail(e) { console.log('获取用户信息失败', e) } }) }, fail() { console.log("拒绝") }, complete() {} }) }, fail(e) { console.log('fail', e) wx.showToast({ title: '网络异常', duration: 2000 }) return } }) }

3：调用后台的登录接口

wx.setStorageSync() ：将数据存储在本地缓存中，

wx.setStorageSync(string key, any data) | 微信开放文档
微信开发者平台文档
https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html

wx.getStorageSync('token') ：获取本地缓存的数据

any wx.getStorageSync(string key) | 微信开放文档
微信开发者平台文档
https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.getStorageSync.html

//调用后台的登录接口 handlerLogin( loginInfo ) { let that = this //login是后台接口封装的方法 login( loginInfo ).then(( res ) => { console.log('登录成功', res) let { cache_key, expires_time, token, userInfo } = res.data //把用户信息存储到storage中，方便其它地方使用 wx.setStorageSync('cache_key', cache_key) wx.setStorageSync('expires_time', expires_time) wx.setStorageSync('token', token) wx.setStorageSync('isLog', true) wx.setStorageSync('userInfo', JSON.stringify( userInfo )) wx.setStorageSync('loginRecord', new Date().getTime()) }) .catch(( res ) => { console.log('catch', res) }) .finally(() => { console.log('finally') }) }