业务流程:
1:首先需要一个按钮触发事件
2:调用微信小程序的登录接口wx.login,拿到code
3:调用微信小程序的获取用户信息的接口wx.getUserProfile,拿到用户的个人信息(包括用的昵称以及头像)
4:拿到的个人信息调用后台的接口,八个人信息传给后台,登陆成功并把相关喜喜存储在本地的缓存中,方便之后的开发使用
下面开始使用代码介绍
wxml:
<view>
<button bindtap:"login">登录</button>
</view>
js:
1.data初始数据
//后台接口需要的以下参数(具体要和后台的同事商量)
loginInfo:{
code:'',
spread_spid:0,
spread_code:0
}
2:按钮触发的login点击事件
调用微信小程序的登录接口:
wx.login(Object object)
调用微信获取用户个人信息的接口:
wx.getUserProfile(Object object)
//登录按钮触发的事件
login(){
//调用微信小程序的登录接口
wx.login({
success(e){
this.data.loginInfo.code=e.code//拿到的code存储在data中
wx.showModal({
title:'温馨提示',
content:'微信授权登陆后才能正常使用小程序功能',
canceltext:'拒绝',
confirmText:'同意',
success(successInfo){
//调用微信小程序的获取用户信息的接口
wx.getUserprofile({
desc:'用于完善会员资料',//声明获取用户个人信息后的用途
lang:'zh_CN',
success(info){
//把获取到的信息复制到data中的loginInfo中
this.data.loginInfo=Object.assign(this.data.login,info)
//调用后台的接口,把所有整合的个人信息传过去
this.handlerLogin(this.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)
wx.getStorageSync('token'):获取本地缓存的数据
any wx.getStorageSync(String key)文章来源:https://www.toymoban.com/news/detail-435838.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',truw)
wx.setStorageSync('userInfo',JSON.stringfy(userInfo))
wx.setStorageSync('loginRecord',new Date().getTime())
})
.catch((res)=>{
console.log('catch',res)
})
.finally(()=>{
console.log('finally')
})
}
以上就是微信小程序开发时,实现的登录,一共分为四步文章来源地址https://www.toymoban.com/news/detail-435838.html
到了这里,关于微信小程序,如何实现登录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!