微信小程序实现授权登录及退出_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

智能推荐

Spring Boot 获取 bean 的 3 种方式!还有谁不会?,Java面试官_springboot2.7获取bean-程序员宅基地

文章浏览阅读1.2k次,点赞35次,收藏18次。AutowiredPostConstruct 注释用于在依赖关系注入完成之后需要执行的方法上,以执行任何初始化。此方法必须在将类放入服务之前调用。支持依赖关系注入的所有类都必须支持此注释。即使类没有请求注入任何资源,用 PostConstruct 注释的方法也必须被调用。只有一个方法可以用此注释进行注释。_springboot2.7获取bean

Logistic Regression Java程序_logisticregression java-程序员宅基地

文章浏览阅读2.1k次。理论介绍 节点定义package logistic;public class Instance { public int label; public double[] x; public Instance(){} public Instance(int label,double[] x){ this.label = label; th_logisticregression java

linux文件误删除该如何恢复?,2024年最新Linux运维开发知识点-程序员宅基地

文章浏览阅读981次,点赞21次,收藏18次。本书是获得了很多读者好评的Linux经典畅销书**《Linux从入门到精通》的第2版**。下面我们来进行文件的恢复,执行下文中的lsof命令,在其返回结果中我们可以看到test-recovery.txt (deleted)被删除了,但是其存在一个进程tail使用它,tail进程的进程编号是1535。我们看到文件名为3的文件,就是我们刚刚“误删除”的文件,所以我们使用下面的cp命令把它恢复回去。命令进入该进程的文件目录下,1535是tail进程的进程id,这个文件目录里包含了若干该进程正在打开使用的文件。

流媒体协议之RTMP详解-程序员宅基地

文章浏览阅读10w+次,点赞12次,收藏72次。RTMP(Real Time Messaging Protocol)实时消息传输协议是Adobe公司提出得一种媒体流传输协议,其提供了一个双向得通道消息服务,意图在通信端之间传递带有时间信息得视频、音频和数据消息流,其通过对不同类型得消息分配不同得优先级,进而在网传能力限制下确定各种消息得传输次序。_rtmp

微型计算机2017年12月下,2017年12月计算机一级MSOffice考试习题(二)-程序员宅基地

文章浏览阅读64次。2017年12月的计算机等级考试将要来临!出国留学网为考生们整理了2017年12月计算机一级MSOffice考试习题,希望能帮到大家,想了解更多计算机等级考试消息,请关注我们,我们会第一时间更新。2017年12月计算机一级MSOffice考试习题(二)一、单选题1). 计算机最主要的工作特点是( )。A.存储程序与自动控制B.高速度与高精度C.可靠性与可用性D.有记忆能力正确答案:A答案解析:计算...

20210415web渗透学习之Mysqludf提权(二)(胃肠炎住院期间转)_the provided input file '/usr/share/metasploit-fra-程序员宅基地

文章浏览阅读356次。在学MYSQL的时候刚刚好看到了这个提权,很久之前用过别人现成的,但是一直时间没去细想, 这次就自己复现学习下。 0x00 UDF 什么是UDF? UDF (user defined function),即用户自定义函数。是通过添加新函数,对MySQL的功能进行扩充,就像使..._the provided input file '/usr/share/metasploit-framework/data/exploits/mysql

随便推点

webService详细-程序员宅基地

文章浏览阅读3.1w次,点赞71次,收藏485次。webService一 WebService概述1.1 WebService是什么WebService是一种跨编程语言和跨操作系统平台的远程调用技术。Web service是一个平台独立的,低耦合的,自包含的、基于可编程的web的应用程序,可使用开放的XML(标准通用标记语言下的一个子集)标准...

Retrofit(2.0)入门小错误 -- Could not locate ResponseBody xxx Tried: * retrofit.BuiltInConverters_已添加addconverterfactory 但是 could not locate respons-程序员宅基地

文章浏览阅读1w次。前言照例给出官网:Retrofit官网其实大家学习的时候,完全可以按照官网Introduction,自己写一个例子来运行。但是百密一疏,官网可能忘记添加了一句非常重要的话,导致你可能出现如下错误:Could not locate ResponseBody converter错误信息:Caused by: java.lang.IllegalArgumentException: Could not l_已添加addconverterfactory 但是 could not locate responsebody converter

一套键鼠控制Windows+Linux——Synergy在Windows10和Ubuntu18.04共控的实践_linux 18.04 synergy-程序员宅基地

文章浏览阅读1k次。一套键鼠控制Windows+Linux——Synergy在Windows10和Ubuntu18.04共控的实践Synergy简介准备工作(重要)Windows服务端配置Ubuntu客户端配置配置开机启动Synergy简介Synergy能够通过IP地址实现一套键鼠对多系统、多终端进行控制,免去了对不同终端操作时频繁切换键鼠的麻烦,可跨平台使用,拥有Linux、MacOS、Windows多个版本。Synergy应用分服务端和客户端,服务端即主控端,Synergy会共享连接服务端的键鼠给客户端终端使用。本文_linux 18.04 synergy

nacos集成seata1.4.0注意事项_seata1.4.0 +nacos 集成-程序员宅基地

文章浏览阅读374次。写demo的时候遇到了很多问题,记录一下。安装nacos1.4.0配置mysql数据库,新建nacos_config数据库,并根据初始化脚本新建表,使配置从数据库读取,可单机模式启动也可以集群模式启动,启动时 ./start.sh -m standaloneapplication.properties 主要是db部分配置## Copyright 1999-2018 Alibaba Group Holding Ltd.## Licensed under the Apache License,_seata1.4.0 +nacos 集成

iperf3常用_iperf客户端指定ip地址-程序员宅基地

文章浏览阅读833次。iperf使用方法详解 iperf3是一款带宽测试工具,它支持调节各种参数,比如通信协议,数据包个数,发送持续时间,测试完会报告网络带宽,丢包率和其他参数。 安装 sudo apt-get install iperf3 iPerf3常用的参数: -c :指定客户端模式。例如:iperf3 -c 192.168.1.100。这将使用客户端模式连接到IP地址为192.16..._iperf客户端指定ip地址

浮点性(float)转化为字符串类型 自定义实现和深入探讨C++内部实现方法_c++浮点数 转 字符串 精度损失最小-程序员宅基地

文章浏览阅读7.4k次。 写这个函数目的不是为了和C/C++库中的函数在性能和安全性上一比高低,只是为了给那些喜欢探讨函数内部实现的网友,提供一种从浮点性到字符串转换的一种途径。 浮点数是有精度限制的,所以即使我们在使用C/C++中的sprintf或者cout 限制,当然这个精度限制是可以修改的。比方在C++中,我们可以cout.precision(10),不过这样设置的整个输出字符长度为10,而不是特定的小数点后1_c++浮点数 转 字符串 精度损失最小

推荐文章

热门文章

相关标签