微信小程序获取用户openid的方法详解

 更新时间:2022年04月21日 10:43:28   作者:失う.  
小程序的openid相当重要,它是用户的唯一标识id,牵扯的支付,登录,授权等,下面这篇文章主要给大家介绍了关于微信小程序获取用户openid的相关资料,需要的朋友可以参考下
  • 小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系
  • 然而因为小程序中的openid不可以直接使用需要用code(登录凭证)去换取openid

获取openid的思路

获取openid首先需要调用小程序的login方法获取小程序的登录凭证code,然后使用code向微信换取登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session_key)

我这里是用一个点击事件来触发一个函数

wx.getUserInfo 会获取到你的一些信息 比如名字

  info(){
    wx.getUserInfo({
      //成功后会返回
      success:(res)=>{
        console.log(res);
      }
    })
  },

下图看打印

wx.login 可以获取到你的code值

        wx.login({
          //成功放回
          success:(res)=>{
            console.log(res);
            let code=res.code
          }
        })

下图看打印

通过wx.request 来让code换取openid

这里面需要一段很长的url地址

  https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

这个地址可以在开发文档=>服务器=>登录中 找到

不要以为你把这个路径cv上就好了 这段连接中有三处地方需要改动

(每个人的id都不一样所以你要自己去作修改 下面有修改处的位置)

            wx.request({
              url: `https://api.weixin.qq.com/sns/jscode2session?appid=wx16ccbe7d04209a11&secret=1f9465bdebe244b5ad15635e8a655832&js_code=$[code]&grant_type=authorization_code`,
              success:(res)=>{
                console.log(res);
                userInfo.openid=res.data.openid
                //获取到你的openid
                console.log(userInfo.openid);
              }
            })

需要修改的地方

注意是没处地方都是等号之后&符号之前的 (这里一定不能出错)

我给大家说下这三处地方在哪找

第一个

登录 微信公众平台 =>开发管理=>开发设置=>开发者Id

第二个

在第一个的下面

第三个是你获取的code值

把他拼接过去 注意要使用反引号

你还需要再设置中沟一个东西 要不然会报错 (如图)

然后打印你就会看到你的openid的值 如下

完整代码

  info(){
    wx.getUserInfo({
      //成功后会返回
      success:(res)=>{
        console.log(res);
        // 把你的用户信息存到一个变量中方便下面使用
        let userInfo= res.userInfo
        //获取openId(需要code来换取)这是用户的唯一标识符
        // 获取code值
        wx.login({
          //成功放回
          success:(res)=>{
            console.log(res);
            let code=res.code
            // 通过code换取openId
            wx.request({
              url: `https://api.weixin.qq.com/sns/jscode2session?appid=wx16ccbe7d04209a11&secret=1f9465bdebe244b5ad15635e8a655832&js_code=$[code]&grant_type=authorization_code`,
              success:(res)=>{
                console.log(res);
                userInfo.openid=res.data.openid
                console.log(userInfo.openid);
              }
            })
          }
        })

      }
    })
  },

总结

openid是用户的唯一标识,它可以快速的建立小程序内的用户体系因为openid是一个敏感信息所有他不会直接给你,需要你用登录凭证(code)去换取openid 

到此这篇关于微信小程序获取用户openid的文章就介绍到这了,更多相关微信小程序获取用户openid内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Javascript Function.prototype.bind详细分析

    Javascript Function.prototype.bind详细分析

    这篇文章主要介绍了Javascript Function.prototype.bind详细分析的相关资料,需要的朋友可以参考下
    2016-12-12
  • JavaScript获取当前时间戳5种方法汇总

    JavaScript获取当前时间戳5种方法汇总

    很多时候我们都把时间戳作为id值,下面这篇文章主要给大家介绍了关于JavaScript获取当前时间戳的5种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • 用console.table()调试javascript

    用console.table()调试javascript

    昨天我了解到Chrome调试工具一个小巧的调试方法,在WDCC期间, Marcus Ross(@zahlenhelfer) 介绍了,chrome调试工具各种调试方法,这个只是其中一种,现在我来给大家秀下。
    2014-09-09
  • 微信小程序云开发实现增删改查功能

    微信小程序云开发实现增删改查功能

    这篇文章主要为大家详细介绍了微信小程序云开发实现增删改查功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • javascript add event remove event

    javascript add event remove event

    javascript事件绑定和删除功能代码
    2008-04-04
  • JavaScript实现动态加载删除表格

    JavaScript实现动态加载删除表格

    这篇文章主要为大家详细介绍了JavaScript实现动态加载删除表格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • js计算任意值之间随机数的方法

    js计算任意值之间随机数的方法

    这篇文章主要介绍了js计算任意值之间随机数的方法,分析了Math.random函数的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • js实现图片切换(动画版)

    js实现图片切换(动画版)

    本文主要对javascript实现图片切换(动画版)的方法进行步骤分析、实例介绍,具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • 深入理解JS中的微任务和宏任务的执行顺序及应用场景

    深入理解JS中的微任务和宏任务的执行顺序及应用场景

    JavaScript中的任务分为宏任务和微任务,它们的执行顺序会影响代码的执行结果。了解它们的机制可以帮助我们更好地理解事件循环和异步编程,避免出现一些意想不到的错误
    2023-05-05
  • JavaScript DOM节点操作方式全面讲解

    JavaScript DOM节点操作方式全面讲解

    DOM(Document Object Model 文档对象模型)定义了访问和操作文档的标准方法。整个浏览器网页就是一个Dom树形结构,这篇文章主要介绍了JavaScript DOM节点操作方式
    2022-10-10

最新评论