微信小程序获取用户openid的图文教程(含源码)

 更新时间:2023年01月31日 09:46:38   作者:Linaaa~  
微信小程序的开发过程中,有时前端需要获取到openId来使用,下面这篇文章主要给大家介绍了关于微信小程序获取用户openid的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

小程序端直接获取:

实现代码:直接简单

wx.login({
      success(res) {
        if (res.code) {
          //发起网络请求
          wx.request({
          //这里填你自己的appid 和 wxspSecret 
            url: "https://api.weixin.qq.com/sns/jscode2session?appid=" + wxspAppid+"&secret=" + wxspSecret + "&js_code=" + res.code + "&grant_type=authorization_code" ,
            method: "POST",
            success(res){//获取成功要执行的动作},
            fail(data){//失败要执行的动作 }
          })
        } else {console.log('登录失败!' + res.errMsg)}
      }
   })

问题: 前端直接暴露appid和appsecret

最开始使用这种方式,到了小程序发布的阶段,因为直接暴露自己的appid和appsecret在前端,经过反编译小程序会直接获取到你的这些信息,并且不改的话也发布不了。。。之后就改成云函数获取了

云函数获取oppenid

方便并且没有暴露信息的风险:

步骤1:创建云函数

打开云开发控制台:

选择云函数,创建一个函数,函数名为get

步骤2:建立一个云函数,命名为刚刚的get

步骤3:

index.js

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  console.log("OPENID",wxContext.OPENID);
  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

config.json

{
  "permissions": {
    "openapi": [
    ]
  }
}

在你需要获取的地方直接调用即可,比如在app.js中

getOpenid() {
    let that = this;
    wx.cloud.callFunction({
      name: 'get',
      complete: res => {
        //你想要完成的功能,比如存储openid到全局
        that.globalData.openid = res.result.openid;
      }
    })
  },

上线两个星期左右,云函数收费了。。。
后面还是使用后端完成openid的获取

后端获取openid

小程序端

wx.login({
      success(res) {
        if (res.code) {
          //发起网络请求
          wx.request({
            url: "你的接口"+res.code,
            method: "POST",
            success(res){//成功后的逻辑处理 }
          })
        } else {
          wx.showToast({
            title: '出现错误',
            icon: 'fail',
            duration: 5000
          })
          console.log('出现错误!' + res.errMsg)
        }
      }
    })

后端(springboot)

@PostMapping("你的接口")
    public Response decodeOpenid(HttpServletResponse response, @RequestParam String code){
      
        response.setContentType("text/html;charset=UTF-8");
        response.setCharacterEncoding("utf-8");

        String wxspAppid = "你的appid";
        String wxspSecret = "你的密钥";

        try {
            Map<String, String> map = new HashMap<>();
            // 授权(必填)固定
            String grant_type = "authorization_code";
            // 发送请求
            String res = HttpRequest.post("https://api.weixin.qq.com/sns/jscode2session")
                    .form("appid",wxspAppid)
                    .form("secret",wxspSecret)
                    .form("js_code",code)
                    .form("grant_type",grant_type)
                    .execute().body();

            // 解析相应内容(转换成json对象)
            JSONObject json = JSONObject.parseObject(res);
            log.info("解析code请求结果:"+json.toString());
            //获取openid
            String openid = json.getString("openid");
            log.info("openid:"+openid);
            return Response.success(openid);
        } catch (Exception e) {
            e.printStackTrace();
            return Response.fail("openId生成失败");
        }
    }

需要导入hutools工具包和slf4j的依赖

ps: 微信小程序如果要发布的话是需要进行域名购买和备案的,以及后端https的配置。

总结 

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

相关文章

  • textarea不能通过maxlength属性来限制字数的解决方法

    textarea不能通过maxlength属性来限制字数的解决方法

    textarea称文本域,又称文本区,其不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制以达到预设的需求
    2014-09-09
  • JS使用正则实现去掉字符串左右空格的方法

    JS使用正则实现去掉字符串左右空格的方法

    这篇文章主要介绍了JS使用正则实现去掉字符串左右空格的方法,结合实例形式分析了JS针对首尾匹配及空格匹配的简单实现技巧,需要的朋友可以参考下
    2016-12-12
  • Typescript模块的导入导出与继承方式

    Typescript模块的导入导出与继承方式

    这篇文章主要介绍了Typescript模块的导入导出与继承方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 在JavaScript中call()与apply()区别

    在JavaScript中call()与apply()区别

    这篇文章主要介绍了在JavaScript中call()与apply()区别 的相关资料,需要的朋友可以参考下
    2016-01-01
  • JavaScript 对象成员的可见性说明

    JavaScript 对象成员的可见性说明

    与java等基于类的面向对象语言的private、protected、public等关键字的用途类似,基于对象的JavaScript语言,在对象构造上也存在类似的成员可见性问题。
    2009-10-10
  • JavaScript获取网页的宽高及如何兼容详解

    JavaScript获取网页的宽高及如何兼容详解

    这篇文章主要给大家介绍了关于JavaScript获取网页的宽高及如何兼容的相关资料,主要介绍了三个方式,分别是window.innerWidth / window.innerHeight、document.documentElement.clientWidth以及混杂模式/怪异模式 下的宽高的获取,需要的朋友可以参考下
    2021-05-05
  • JS实现iframe自适应高度的方法示例

    JS实现iframe自适应高度的方法示例

    这篇文章主要介绍了JS实现iframe自适应高度的方法,结合实例形式分析了JS实现iframe高度自适应的实现技巧,并给出了项目示例供大家参考,需要的朋友可以参考下
    2017-01-01
  • 一文了解你不知道的JavaScript生成器篇

    一文了解你不知道的JavaScript生成器篇

    ES6引入了一个新的函数类型,发现它并不符合这种运行到结束的特性。这类新的函数被称为生成器。生成器的出现是我们知道原来有时代码并不会顺利的运行,可以通过暂停的方式进行异步回调,让我们摒弃了此前的认知。本文就来聊聊JavaScript中生成器的相关知识
    2022-11-11
  • stats.js使用性能监控源码解读

    stats.js使用性能监控源码解读

    这篇文章主要为大家介绍了stats.js使用性能监控源码解读,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • javascript中的注释使用与注意事项小结

    javascript中的注释使用与注意事项小结

    在javascript中有两种注释方式,单行注释与多行注释。
    2011-09-09

最新评论