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

目录
  • 获取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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序获取用户openid的实现

    1.wx.login(OBJECT) 调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的 会话密钥(session_key).用户数据的加解密通讯需要依赖会话密钥完成. 2.code 换取 session_key 这是一个 HTTPS 接口,开发者服务器使用登录凭证 code 获取 session_key 和 openid.其中 session_key 是对用户数据进行加密签名的密钥.为了自身应用安全,session_key 不应该在网络上传

  • 微信小程序如何获取openid及用户信息

    微信小程序获取openid及用户信息的方法 1. 获取openid 1.1 获取code 调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的会话密钥(session_key).用户数据的加解密通讯需要依赖会话密钥完成. wx.login({ //获取code success: function(res) { code = res.code //返回code } }) 1.2 获取openid 拿到上一步获取的code,结合小程序 appid

  • 详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs

    微信小程序-获取用户session_key,openid,unionid - 后端为nodejs8.0+ 步骤: 1.通过wx.login接口获取code既jscode,传递到后端: 2.后端请求 https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code 地址,就能获取到openid和unionid. 小程序接

  • 微信小程序授权获取用户详细信息openid的实例详解

    小程序获取用户的头像昵称openid之类 第一种使用wx.getUserInfo直接获取微信头像,昵称 wx.getUserInfo({ success: function (res) { that.setData({ nickName: res.userInfo.nickName, avatarUrl: res.userInfo.avatarUrl, }) }, }) 第二种 我们在使用小程序wx.login API进行登录的时候,直接使用wx.getUserInfo是不能获取更多的信息的,如

  • 微信小程序 springboot后台如何获取用户的openid

    openid可以标识一个用户,session_key会变,所以来获取一下openid. openid不能在微信小程序中直接获取,需要后台发送请求到微信的接口,然后微信返回一个json格式的字符串到后台,后台处理之后,再返回到微信小程序. 发布的小程序需要https的域名,而测试的时候可以使用http. 小程序在app.js中,修改login()中的内容: // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, session

  • 微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】

    本文实例讲述了微信小程序实现发送模板消息功能.分享给大家供大家参考,具体如下: 一.获取access_token access_token是接口调用的凭证,目前有效期为两个小时,需要定时刷新,重复获取将导致上次获取的access_token失效.(注:不建议每次调用需要access_token的接口,都去重新获取access_token,会导致失败) 获取access_token的接口地址: https://api.weixin.qq.com/cgi-bin/token?grant_type=c

  • 微信小程序获取用户openId的实现方法

    微信小程序获取用户openId的实现方法 前端: wx.login({ success: function (res) { res.code }) 获取到code后,传到后台, 然后请求微信接口 https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code 把参数替换为自己的参数,这个接口就直接返回openId了

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

    目录 获取openid的思路 需要修改的地方 完整代码 总结 小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系 然而因为小程序中的openid不可以直接使用需要用code(登录凭证)去换取openid 获取openid的思路 获取openid首先需要调用小程序的login方法获取小程序的登录凭证code,然后使用code向微信换取登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session_key) 我这里是用一个点击事件来触

  • 微信小程序实现页面导航的方法详解

    目录 一.页面导航 二.声明式导航 1.导航到tabBar页面 2.导航到非tabBar页面 3.后退导航 三.编程式导航 1.导航到tabBar页面 2.导航到非tabBar页面 3.后退导航 四.导航传参 1.声明式导航传参 2.编程式导航传参 3.在onLoad中接收导航传参 五.总结 一.页面导航 1.什么是页面导航 页面导航是指页面之间的相互跳转. 2.页面导航的两种实现方式 页面导航有两种实现方式: 声明式导航 方法:在页面声明一个navigator组件,通过点击这个组件来实现页面的

  • 微信小程序 获取二维码实例详解

     微信小程序 获取二维码实例详解 理论: 接口A: 适用于需要的码数量较少的业务场景 接口地址:(永久有效,数量有限,进入path对应的页面) https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN path String 不能为空,最大长度 128 字节 width Int 430(默认) 二维码的宽度 auto_color .. line_color .. 接口B:适用于需要的码数量极多,或仅临时使用的业务场景(永

  • 微信小程序scroll-view隐藏滚动条的方法详解

    效果图: 1.scroll-view 中的需要滑动的元素不可以用 float 浮动使其一行展示: 2.包裹scroll-view的元素如果用 display:flex; 是没有滚动效果的: 3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排: 4.包裹 scroll-view 的元素要加上样式–> overflow:hidden;white-space:nowrap; 5.有时候为了美观要隐藏滚动条,需要在样式里加上 核心代码: 在w

  • 微信小程序自定义toast组件的方法详解【含动画】

    本文实例讲述了微信小程序自定义toast组件的方法.分享给大家供大家参考,具体如下: 怎么创建就不说了,前面一篇有 微信小程序自定义prompt组件 直接上代码 wxml <!-- components/toast/toast.wxml --> <view class="toast-box {{isShow? 'show':''}}" animation="{{animationData}}"> <view class="to

  • 微信小程序裁剪头像插件使用方法详解

    本文实例为大家分享了微信小程序裁剪头像插件的具体使用代码,供大家参考,具体内容如下 用户上传头像,需要裁剪成正方形,结合在网上找到裁剪图片方法,封装为微信小程序组件.调用很方便. 参数介绍: image_url:需要裁剪的图片链接 showCutImage:是否显示裁剪图片组件 wxml调用: <cutImage imageUrl="{{image_url}}" bind:returnImageUrl="returnImageUrl"  wx:if="

  • 微信小程序Echarts图表组件使用方法详解

    1:下载 GitHub 上的 项目 2:但项目下载之后,打开小程序开发工具,可以看到效果如下,适配性还是比较完美的. 如果是在项目里面引入组件的话,打开从github上面下载的代码,将ec-canvas文件夹复制黏贴到你的项目里面. 好的,组件已经复制到了我的项目里面,现在我想实现一个折线图,现在开始去组件里面搬运复制黏贴代码了. wxml <!--index.wxml--> <view class="container"> <ec-canvas id=&

  • 微信小程序自定义波浪组件使用方法详解

    最近看到好多app上有波浪背景,有动态的,有静态的,这里是在小程序中用得动态. 先看看效果图:里面的文本是组件内部定义的. 这是用两个svg的图片用css关键帧动画做的效果(这里谢谢子弹短信里前端群的小伙伴提供的web版的css动画文件) 在小程序中使用,注意一个问题:就是svg不可以直接使用,需要转为base64(这个大家应该有收藏吧),这里我已经转换好了,在下面的wxss中. 这里顺便用一下自定义组件: 首先定义组件 wave wave.wxml:这里我默认是用得显示个人信息.其中isSho

随机推荐