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

网友投稿 643 2023-11-07

−目录业务流程：下面开始用代码介绍1：data初始数据2：按钮触发的login点击事件3：调用后台的登录接口总结

业务流程：

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

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

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

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

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

下面开始用代码介绍

wxml：

<view>

</view>

js：

1：data初始数据

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

//登录按钮触发的事件

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是后台接口封装的方法

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)

})

}

总结

以上就是微信小程序开发时，实现的登录。一共4步走，希望能帮助得到大家。

您可能感兴趣的文章:微信小程序实战之登录页面制作(5)微信小程序用户授权，以及判断登录是否过期的方法微信小程序获取手机号授权用户登录功能微信小程序实现授权登录一步步教会你微信小程序的登录鉴权微信小程序登录的简单实现微信小程序后台登录（非微信账号）实例详解微信小程序如何保持登录状态微信小程序登录实例详解微信小程序静默登录的实现代码