uniapp 获取微信的 openid(借助 uniCloud)

简介: uniapp 获取微信的 openid(借助 uniCloud)

1. 新建云函数 getOpenid

uniCloud-aliyun/cloudfunctions/getOpenid/index.js

'use strict';

exports.main = async (event, context) => {
  let appid = "wx*****"; //你的AppID
  let secret = "de****"; //你的AppSecret
  let url =
    "https://api.weixin.qq.com/sns/jscode2session?appid=" +
    appid +
    "&secret=" +
    secret +
    "&js_code=" +
    event.code +
    "&grant_type=authorization_code";
  let res = await uniCloud.httpclient.request(
    url, // 请求路径,
    {
      dataType: "json"
    }
  );
  let openid = res.data.openid
  return openid
};

AppID 和 AppSecret 从你的微信小程序的后台获取

2. 上传部署云函数 getOpenid

3. 调用云函数 getOpenid

pages/index/index.vue

<button @tap="getOpenid">获取微信的Openid</button>
getOpenid() {
  uni.login({
    provider: "weixin",
    success: function(res) {
      uniCloud.callFunction({
        name: 'getOpenid',
        data: {
          code: res.code
        },
        success: (res) => {
          console.log('Openid为', res.result)
        },
        fail: () => {
          console.log('获取失败')
        }
      })
    },
  });
}

项目运行到微信开发者工具

点击按钮,在控制台即可看到获取的 openid

目录
相关文章
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的马拉松报名系统微信小程附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的马拉松报名系统微信小程附带文章源码部署视频讲解等
13 4
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的微信小程序的网上商城附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的微信小程序的网上商城附带文章源码部署视频讲解等
11 3
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生校园兼职微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生校园兼职微信小程序附带文章源码部署视频讲解等
11 1
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的“狮子狗”二手交易微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的“狮子狗”二手交易微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
5 0
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的微信小程序跑腿平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的微信小程序跑腿平台附带文章源码部署视频讲解等
6 0
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的停车场微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的停车场微信小程序附带文章源码部署视频讲解等
7 0
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的生活小助手微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的生活小助手微信小程序附带文章源码部署视频讲解等
9 0
|
2天前
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
7 0
|
2天前
|
前端开发
uniapp 实战 -- 创建 uni-admin 项目,部署到 uniCloud 前端网页托管(免费云空间)
uniapp 实战 -- 创建 uni-admin 项目,部署到 uniCloud 前端网页托管(免费云空间)
5 0
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的个人健康管理系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的个人健康管理系统小程序附带文章源码部署视频讲解等
11 2

相关实验场景

更多