微信小程序登录流程以及代码示例

官方流程

代码

app.js（小程序的入口文件）的完整代码
 
const loginDataKey = 'loginData'
 
//app.js
App({
  onLaunch: function () {
 
    const loginData = wx.getStorageSync(loginDataKey)
    console.log('--loginData--')
    console.log(loginData)
    let toLogin = () => {
      console.log('未登录，去登录..')
      wx.showLoading({title: '登录中', icon: 'loading', mask: true})
      wx.login({
        success(res){
          console.log('wx.login res')
          console.log(res)
          let success = () => {
            console.log('登录成功')
            let loginResponse = {"openid":"ooZAbwpdDdaZV_xiamianshi_mashaike"}
            wx.setStorageSync(loginDataKey, loginResponse)
            wx.hideLoading()
          }
          let fail = () => {
            wx.hideLoading()
            wx.showToast({
              title: '登录失败，请重新打开小程序试试',
              icon: 'none',
              duration: 1e8
            })
          }
          // TODO 发起网络请求
          // 延时模拟请求登录成功
          setTimeout(success, 500)
        },
        fail(err){
          console.log(err)
          wx.hideLoading()
          wx.showToast({
            title: '登录失败，请重新打开小程序试试',
            icon: 'none',
            duration: 1e8
          })
        }
      })
    }
    // 未登录，去登录
    if(!loginData){
      toLogin()
    // 已登录，但是微信session_key过期
    }else{
      wx.checkSession({
        success () {
          //session_key 未过期，并且在本生命周期一直有效
          console.log('session_key 未过期')
        },
        fail () {
          // session_key 已经失效，需要重新执行登录流程
          console.log('session_key 已经失效，需要重新执行登录流程, 重新登录中')
          toLogin()
        }
      })
    }
 
  },
  globalData: {
    userInfo: null
  }
})

流程如下

根据本地储存判断是否登录

已登录判断是否失效

失效或者未登录去登录

登录展示toast

拿到信息存储关闭toast

核心

wx.login拿到code

然后把code通过 auth.code2Session 获取openid和unionid等。

这是我通过 auth.code2Session 拿到openid的截图（因为这个是测试号，所以没有unionid）

【unionid】是拿来和其他平台打通账号的关键，如果只有一个小程序，都可以不需要这个。

效果

其他

纯展示用户头像昵称等

<open-data type="useravatarurl">
<open-data type="usernickname"></open-data type="usernickname"></open-data type="useravatarurl">

上一篇：小程序页面间传递数据

下一篇：uniapp 点击出现阴影罩层弹窗，同时点击阴影部分自动隐藏弹窗

微信小程序登录流程以及代码示例

推荐标签

下载该资源用户也下载了

签到成功!