微信小程序，如何实现登录-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序，如何实现登录。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

业务流程：

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)

//调用后台的登录接口
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模板网！