小程序轻松获取公众号openid，一文详解具体操作步骤

前端

2023-03-18 18:30:04

获取公众号 OpenID：跨域通讯的桥梁

在移动开发领域，小程序和小程序已成为炙手可热的平台。它们允许企业快速构建移动应用，提供全面的功能和服务。在某些情况下，我们需要在小程序和小程序之间交换数据，例如获取公众号的 OpenID，以实现公众号和小程序之间的无缝交互。

获取公众号 OpenID 的步骤：

1. 技术准备

打开微信开发者工具 ：这是小程序开发的官方工具。

选择目标小程序 ：在开发工具中，选择要获取 OpenID 的小程序项目。

2. 业务域名设置

点击“设置” ：在项目中，点击“设置”选项卡。

找到“业务域名” ：在“设置”页面中，找到“业务域名”选项。

添加公众号域名 ：在业务域名中，添加公众号的域名。这将允许小程序与公众号进行跨域通信。

3. 跨域请求配置

打开“项目设置” ：在开发工具中，点击“项目”菜单，然后选择“项目设置”。

点击“小程序服务” ：在项目设置中，点击“小程序服务”选项。

找到“开发辅助” ：在小程序服务中，找到“开发辅助”部分。

勾选“允许跨域请求” ：勾选此选项，以允许小程序向公众号的域名发送跨域请求。

4. 公众号后台设置

打开公众号后台 ：使用公众号管理员账号登录公众号后台。

找到“开发” ：在公众号后台的菜单中，找到“开发”选项。

点击“基本配置” ：在开发菜单中，点击“基本配置”。

找到“JS 安全域名” ：在基本配置中，找到“JS 安全域名”选项。

添加小程序域名 ：在 JS 安全域名中，添加小程序的域名。这将允许公众号在小程序中使用 JS-SDK。

5. 接口权限配置

点击“接口权限” ：在公众号后台的“开发”菜单中，点击“接口权限”。

找到“网页授权获取用户基本信息” ：在接口权限中，找到“网页授权获取用户基本信息”选项。

勾选“启用” ：勾选此选项，以启用公众号的网页授权功能。

6. 小程序代码编写

打开“代码编辑器” ：在开发工具中，点击“代码编辑器”选项。

找到“app.js”文件 ：在代码编辑器中，找到小程序的入口文件“app.js”。

添加获取 OpenID 的代码 ：在“app.js”文件中，添加以下代码以获取 OpenID：

wx.login({
  success: function (res) {
    if (res.code) {
      // 向服务器发送 code 以换取 OpenID
      wx.request({
        url: 'https://example.com/api/getOpenid',
        data: {
          code: res.code
        },
        success: function (res) {
          if (res.data.openid) {
            // 获取并存储 OpenID
            console.log(res.data.openid);
          }
        }
      });
    }
  }
});