微信小程序实现授权登录及退出_java 小程序退出登录-程序员宅基地

技术标签: 微信小程序  小程序  

1.登录获取用户昵称,头像

<view class="userinfo">
  <image src="{
   {userInfo.avatarUrl}}"></image>
  <view>{
   {userInfo.nickName}}</view>
</view>
<button plain  bindtap="getUser">授权登陆</button>
<button plain bindtap="exitUser">退出</button>
  // 获取用户信息
  getUser(){
   
    //获得用户的头像和昵称
    wx.getUserProfile({
      desc: '获得用户信息'
     
    }).then((res) => {
        console.log(res.userInfo.avatarUrl,res.userInfo.nickName)
        
        this.setData({
          userInfo:res.userInfo
        })
        
            // 添加到数据库用户列表中 yuyue-user
            wx.cloud.database().collection('yuyue-user').add({
              data:{
                // 添加一个号码,由于id和openid太长,此号码可作为唯一标识
                num: Date.now(),
                // 添加用户昵称和头像
                nickName:res.userInfo.nickName,
                avatarUrl:res.userInfo.avatarUrl
              
              }
            }).then(res=>{
                console.log(res)
                // 添加成功提示
                wx.showToast({
                  title: '登录成功!'
                })
               }).catch(err=>{
                console.log(err)
              })
           
        })
        
       
      })
  }

2.创建云函数

右击新建文件夹cloud

在根目录project.config.json中添加:

"cloudfunctionRoot": "cloud/"

右击文件夹cloud选择当前环境

右击文件夹cloud新建Node.js云函数,命名login

在新建文件夹login的index.js文件中:

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    openid: wxContext.OPENID
  }
}

右击login文件夹选择上传并部署:云端安装依赖(不上传node_modules),显示上传成功提示。

3.使用云函数获取openid

根目录app.js中获取openid:

// app.js
App({
  onLaunch() {
    wx.cloud.init({
      env: 'manmanmanman123-2gld2mewb02c0fcb'  //云开发环境id
    })
    // 获取用户的openid
    wx.cloud.callFunction({
      name:'login'
    }).then(res=>{
      console.log(res)
      console.log(res.result.openid)
      //给全局openid赋值  
      this.globalData.openid = res.result.openid
      
    })
  },
  globalData: {
    userInfo: null,
    openid:''
  }
})

4.为防止一个用户在数据库中出现多条登录记录,需要将openid作为查询条件

  // 获取用户信息
  getUser(){
   
    //获得用户的头像和昵称
    wx.getUserProfile({
      desc: '获得用户信息'
     
    }).then((res) => {
        console.log(res.userInfo.avatarUrl,res.userInfo.nickName)
        // 将内容赋值给全局的userInfo,这样可以在别的页面中使用
        app.globalData.userInfo = res.userInfo
        this.setData({
          userInfo:res.userInfo
        })
        // 判断yuyue-user数据库中是否存在原用户,不存在则添加到数据库中,存在则替换
        wx.cloud.database().collection('yuyue-user').where({
          _openid:app.globalData.openid
        }).get().then(result=>{
          console.log(result)
          if(result.data.length === 0){
            // 添加到数据库用户列表中 yuyue-user
            wx.cloud.database().collection('yuyue-user').add({
              data:{
                // 添加一个号码,由于id和openid太长,此号码可作为唯一标识
                num: Date.now(),
                // 添加用户昵称和头像
                nickName:res.userInfo.nickName,
                avatarUrl:res.userInfo.avatarUrl
              
              }
            }).then(res=>{
                console.log(res)
                // 添加成功提示
                wx.showToast({
                  title: '登录成功!'
                })
               }).catch(err=>{
                console.log(err)
              })
            }else{
              this.setData({
               userInfo:result.data[0]
              })
            }
        })
        
       
      } )
  }

5.退出登录

// 退出登录
  exitUser(){
    // 全局和页面上的用户信息为空
    app.globalData.userInfo = null
    this.setData({
      userInfo: null
    })
  }

6.实现自动登陆,用户不用退出小程序后再次登录

根目录app.js中:

// app.js
App({
  onLaunch() {
    wx.cloud.init({
      env: 'manmanmanman123-2gld2mewb02c0fcb'  //云开发环境id
    })
    // 获取用户的openid
    wx.cloud.callFunction({
      name:'login'
    }).then(res=>{
      console.log(res)
      console.log(res.result.openid)
      this.globalData.openid = res.result.openid
      // 刚开始启动小程序时,通过openid来查找yuyue-user用户数据库中是否存在用户
      //有的话就不用再登陆
      wx.cloud.database().collection('yuyue-user').where({
        _openid : res.result.openid
      }).get().then(result=>{
        console.log(result)
        this.globalData.userInfo = result.data[0]
      })
    })
  },
  globalData: {
    userInfo: null,
    openid:''
  }
})

在登录界面:

onShow() {
    // 获取到全局的userInfo
    this.setData({
      userInfo:app.globalData.userInfo
    })
  }

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_68842055/article/details/125211966

智能推荐

对今日头条android端的一次简单分析(上)_chromium libwebp.so libstatic-webp.so-程序员宅基地

文章浏览阅读6.7k次。前言闲来无事,正看着百度新闻,突然灵感一闪,何不研究下一款新闻app,那就从今日头条开始吧。第一步1.1、轮廓分析这里使用压缩软件打开,主要看lib目录及assets目录。 1.2、lib目录lib目录主要是放一些库或jar包,打开后发现,只有一个armeabi目录,我们知道x86/x86_64/armeabi-v7a/arm64-v8a设备都支持armeabi架构的.so文件,所以一个目录也是可_chromium libwebp.so libstatic-webp.so

Linux 有线网络驱动实验(PHY芯片LAN8720)_lan8720每秒可以发送几次数据-程序员宅基地

文章浏览阅读2.4k次,点赞3次,收藏20次。网络驱动是linux 里面驱动三巨头之一,linux 下的网络功能非常强大,嵌入式linux 中也常常用到网络功能。前面我们已经讲过了字符设备驱动和块设备驱动,本章我们就来学习一下linux 里面的网络设备驱动。_lan8720每秒可以发送几次数据

Go内置关键字分析(二)_for i, x := range nums-程序员宅基地

文章浏览阅读665次。Go语言25个内置关键字分析(一):https://blog.csdn.net/sinat_24568041/article/details/80904271Go关键字按类型不同做如下区分(注:图片来自网络,若有侵权,请联系删除):2.2引用类型(1) Map作用:用于声明map类型数据 a.Map 是一种无序的键值对的集合。Map 最重要的一点是通过 key 来快速检索数据,key 类似于..._for i, x := range nums

GD32F103RCT6/GD32F303RCT6(6.2)USART串口库函数介绍(包含DMA库函数)-程序员宅基地

文章浏览阅读699次,点赞6次,收藏10次。GD32教程 单片机 嵌入式 串口 向上代码兼容GD32F303RCT6中使用

宁波大学2013 计算机应用基础 高级c语言程序 练习册答案,计算机应用基础A1-程序员宅基地

文章浏览阅读286次。spContent=软件定义未来,软件实现了用计算机解决真实世界的各种问题。自计算机诞生之日起,人们探索的重点不仅在于建造运算速度更快、处理能力更强的计算机,而且在于开发能让人们更有效使用这种计算设备的各种软件。本课程作为大学阶段的第一门计算机基础课程,主要介绍面向过程的结构化程序设计思想及方法,为你打开软件设计与开发的大门。数字时代呼啸而来,懂得程序设计,就能更好的在数字海洋中自由遨游。本课程面..._c语言程序设计孙改平答案

mybatisplus 更新数据时(update updatebyId) 将指定字段的null值更新到数据库_mybatis updatebyid 空值更新入库-程序员宅基地

文章浏览阅读4.1k次,点赞2次,收藏3次。mybatisplus 在封装更新语句时 会默认不更新值为null的字段;有的时候我们需要指定某个字段为null时更新进去又不想去mapper.xml 写update sql于是就有了如图 在对应的字段上面添加 @tableField注解注意 jdbcType 必须要有 不然会报错 无效列类型value 对应的是数据库的字段名另外在update的时候运用此注解 还有以下作用有兴趣的可以多看看源码了解哈..._mybatis updatebyid 空值更新入库

随便推点

vue打包出0kb的文件,导致部署到平台后报错404的问题_vue3.0 打包0kbcss-程序员宅基地

文章浏览阅读967次。问题描述:vue项目,进行打包后,在前端和后端本地都可以非常正常的跑起来,但部署到平台,提示 chunk-xxx.css文件找不到,报错404!解决办法:问题定位:那个提示找不到的css文件是0kb的,怀疑和这个有关,试了很多种乱七八槽的高级操作,最终,将代码中的<style></style>里面注释掉的css代码删除掉,重新打包,这次打出来的包就没有0kb文件了,再次部署,成功了~网上有人说是这个原因:springboot1时,0kb的css不会有什么问题,s._vue3.0 打包0kbcss

C++的双端队列_c++双端队列-程序员宅基地

双端队列是一种允许在队列两端进行插入和删除操作的数据结构。通过使用双端队列,可以实现从队列底部删除元素的需求。具体使用方法可以参考相关示例代码。

从一个class文件深入理解Class文件结构-程序员宅基地

文章浏览阅读382次。深入理解Class文件结构概述我们都知道编写的Java的源码会先编译成Class文件,java虚拟机再将Class文件解释编译成对应平台的机器指令,所以能够解析Class文件的数据结构是非常有必要的。先编写一段java源码,定义一个类并实现一个接口,类内部定义了一个成员变量、一个类变量和一个sum方法。package com.changyy.jvm;public class ClassTest implements IClassTest { private int n = 10_class文件结构

二叉树及先序遍历二叉树,中序遍历二叉树,后序遍历二叉树_1. 输入二叉树结点数,先序遍历序列,中序遍历序列2.输出该二叉树的后序遍历序-程序员宅基地

文章浏览阅读2.5k次,点赞2次,收藏17次。1.二叉树的常用性质&lt;1&gt;.在二叉树的第i层上最多有2 i-1 个节点 。(i&gt;=1)&lt;2&gt;.二叉树中如果深度为k(有k层),那么最多有2k-1个节点。(k&gt;=1)&lt;3&gt;.若二叉树按照从上到下从左到右依次编号,则若某节点编号为k,则其左右子树根节点编号分别为2k和2k+1;&lt;4&gt;.二叉树分类:满二叉树,完全二叉树..._1. 输入二叉树结点数,先序遍历序列,中序遍历序列2.输出该二叉树的后序遍历序

微软cl编译器的简单使用_cl编译器tiny模式-程序员宅基地

文章浏览阅读562次。cl的位置:开始 –> 所有程序 -> Microsoft Visual Studio ->Visual Studio Tools -> Developer Command Prompt编译器产生通用对象文件格式 (COFF) 对象 (.obj) 文件。链接器产生可执行文件 (.exe) 或动态链接库文件 (DLL)。注意,所有编译器选项都区分大小写。若要编译但不链接,请使用/_cl编译器tiny模式

设置相机水印字体的大小、位置_平板拍照的水印字体大小-程序员宅基地

文章浏览阅读7.9k次。需求是根据保存的照片的不同分辨率设置不同大小的文字水印,文字需要黑色描边,白底色,位于照片右下角水印描边是非常重要的,两种区别明显的颜色(示例代码中使用的就是黑色和白色)可以有效的提升在不同背景下水印的可识别度。解决方法是获取照片的尺寸,然后根据照片的尺寸进行文字大小的设置;并利用canvas.drawText(test,x,y,paint) 设置文字绘制的位置。根据Bitmap的尺..._平板拍照的水印字体大小

推荐文章

热门文章

相关标签