解决原生微信小程序获取关联公众号的code(不是wx.login的code)来获取公众号的openId

解决步骤

以下是使用 web-view 并配配合微信公众号提供的 网页授权 来实现

1、在小程序中做一个web-view页面,页面中只需要写微信 网页授权的链接就行了,注意appid请自行替换(公众号的)。

 onLoad() {
   this.setData({
     src: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=`自己公众号openid`&redirect_uri=自己跳转的H5页面&response_type=code&scope=snsapi_base&state=123#wechat_redirect',
   })
 },

2、redirect_uri是我们第一步中的网页地址。**注意:**需要在公众号管理平台中配置授权域名

redirect_uri:必须是https开头,并且需要如下配置
在这里插入图片描述

3、redirect_uri的页面(H5页面)需要截取location.search获取code;返回微信小程序,需要安装weixin-js-sdk

4、拿到H5返回小程序的code值,调用后台接口就可以获取公众号的openId

具体代码

1、微信小程序的web-view页面

<web-view src="{{src}}" />
Page({
  data: {
    src: '',
  },
  onLoad() {
    this.setData({
      src: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=自己的公众号openid&redirect_uri=需要跳转的H5页面&response_type=code&scope=snsapi_base&state=123#wechat_redirect',
    })
  }
});

2、Vue H5页面

<template>
  <div class="wx-h5"></div>
</template>
<script>
import wx from "weixin-js-sdk";
import { showFullScreenLoading } from "@/utils/loading";
export default {
  name: "WXh5",
  mounted() {
  // 页面loading
    showFullScreenLoading("页面跳转中...", "", "wx-text-color");
    // 跳转到tarBar页面
   // wx.miniProgram.switchTab({ url: "****" });
    if (this.getUrlCode().code) {
      wx.miniProgram.redirectTo({url: `/subpackages/extension/index?code=${this.getUrlCode().code}`})
    }
  },
  methods: {
    getUrlCode() {
      // 截取url中的code方法
      var url = location.search
      // eslint-disable-next-line no-new-object
      var theRequest = new Object()
      if (url.indexOf('?') != -1) {
        var str = url.substr(1)
        var strs = str.split('&')
        for (var i = 0; i < strs.length; i++) {
          theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1]
        }
      }
      return theRequest
    }
  }
};
</script>

<style lang="scss">
.wx-text-color {
  width: 90px;
  height: 105px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  .circular {
    .path {
      stroke: #fff;
    }
  }
  .el-loading-text {
    color: #fff;
    font-size: 12px;
  }
}
</style>

3、如上在微信小程序的/subpackages/extension/index页面的onLoad接收参数code,便可根据code获取公众号的openId

4、注意点:

微信小程序的web-view页面只能独立出来使用,不能在/subpackages/extension/index页面使用,不然返回到/subpackages/extension/index页面后,该页面的事件都会失效。

相关文章

基于ElementUi再次封装基础组件文档


基于ant-design-vue再次封装基础组件文档


vue3+ts基于Element-plus再次封装基础组件文档

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/310243.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

《Training language models to follow instructions》论文解读--训练语言模型遵循人类反馈的指令

目录 1摘要 2介绍 方法及实验细节 3.1高层次方法论 3.2数据集 3.3任务 3.4人体数据收集 3.5模型 3.6评价 4 结果 4.1 API分布结果 4.2公共NLP数据集的结果 4.3定性结果 问题 1.什么是rm分数 更多资料 1摘要 使语言模型更大并不能使它们更好地遵循用户的意图。例…

分享7款前端CSS动画特效源码(附在线演示)

精选7款前端CSS动画特效源码 下面我会给出特效样式图或演示效果图 但你也可以点击在线预览查看源码的最终展示效果及下载源码资源 CSS飞行的荷包蛋 CSS荷包蛋动画 荷包蛋会向右前方加速飞行 期间还能看到周围的气流匆匆飞过 以下图片只是简单的模型没有具体的动画效果最终动画…

使用mamba替换conda和anaconda配置环境安装软件

使用mamba替换miniconda和anaconda&#xff0c;原因是速度更快&#xff0c;无论是创建新环境还是激活环境 conda、mamba、anaconda都是蟒蛇的意思… 下载mambaforge wget https://github.com/conda-forge/miniforge/releases/latest/download/Mambaforge-Linux-x86_64.sh ba…

基于SSM的汽车客运订票系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

Redis常用连接工具

RedisInsight 官网地址&#xff1a; RedisInsight | The Best Redis GUI Redis Desktop Manager 官网地址&#xff1a; RedisInsight | The Best Redis GUI 样式&#xff1a; QuickRedis 官网地址&#xff1a; QuickOfficial - QuickRedis 样式&#xff1a; AnotherRed…

Python语言基础

目录 任务驱动式学习 任务一&#xff1a;输出问候语 一、Python程序的两种编程模式 二、Python程序的执行方式——解释执行 三、基本输入输出函数 任务二&#xff1a;计算圆的周长和面积 一、语句块缩进 二、变量与对象 三、数据类型及转换 四、数字类型及运算 五、…

conda安装和配置以及处理OSError: [WinError 123]异常

conda安装和配置 由于更换电脑&#xff0c;浅浅记录下conda安装和配置。以及处理这次安装的 OSError: [WinError 123] 异常。 conda的作用 下载之前&#xff0c;先了解下为什么需要使用conda&#xff0c;它是一个开源的Anaconda是专注于数据分析的Python发行版本&#xff0c;…

操作系统导论-课后作业-ch5

关于man的使用 man 系统参考手册 man n name 在系统手册第n章查看name1. 代码&#xff1a; #include <stdio.h> #include <sys/types.h> #include <unistd.h> #include <sys/wait.h>int main() {int x 100;int rc fork();if (rc -1) {fprintf…

如何一眼分辨哪个U盘的接口更快?

前言 从第一篇图文&#xff0c;小伙伴们已经知道使用U盘的时候如何选择合适的USB接口了。 有Type-C的插Type-C&#xff0c;蓝/黄/红/绿的USB接口次之。 那么&#xff0c;如何看自己的U盘读写快慢&#xff1f; 都2023年了&#xff0c;估计很多小伙伴还在使用USB2.0的U盘&…

2023启示录 | 商业航天这一年

图片&#xff5c;SpaceX ©⾃象限原创 作者丨罗辑 编辑丨程心 整个2023年&#xff0c;在全球热度上能够和ChatGPT一争高下的&#xff0c;可能只有SpaceX的两次星舰发射。 就像2023年菜市场卖鱼的大爷都能聊两句大模型一样&#xff0c;即使从来不关心航天的人也会知道星舰…

Win10子系统Ubuntu实战(二)

在 Windows 10 中安装 Ubuntu 子系统&#xff08;Windows Subsystem for Linux&#xff0c;简称 WSL&#xff09;有几个主要的用途和好处&#xff1a;Linux 环境的支持、跨平台开发、命令行工具、测试和验证、教育用途。总体而言&#xff0c;WSL 提供了一种将 Windows 和 Linux…

k8s的存储卷---数据卷

前言 容器磁盘上的文件的生命周期是短暂的&#xff0c;这就使得在容器中运行重要应用时会出现一些问题。首先&#xff0c;当容器崩溃时&#xff0c;kubelet 会重启它&#xff0c;但是容器中的文件将丢失——容器以干净的状态&#xff08;镜像最初的状态&#xff09;重新启动。其…

念数字(C语言)

做法非常巧妙&#xff08;这也是我看别人的写法写的&#xff09; #include <string.h> #include <stdio.h> int main() { int i 0; char str[100000] { \0}; char arr[10][5] { "ling","yi","er","san",&…

众和策略股市行情分析:了解散户的典型特征

散户特色如下&#xff1a; 1、出资规模小&#xff1a;散户的出资规模一般比较小&#xff0c;资金量有限&#xff0c;无法对商场发生显著的影响。资金量较小的一起&#xff0c;其对危险的承受能力也相对较弱。 2、缺少危险意识&#xff1a;散户往往缺少危险意识&#xff0c;没…

GitHub pull request(傻瓜式入门版)

基础入门版 pull request一、fork项目二、clone代码到本地三、进入到克隆的项目目录下四、列出所有分支五、创建一个本地分支&#xff0c;并追踪远程项目分支六、查看当前分支七、与远程仓库建立连接八、与上游仓库建立连接八、同步最新代码九、修改代码并提交十、提交pr pull …

C++ 数组分页,经常有用到分页,索性做一个简单封装 已解决

在项目设计中&#xff0c; 有鼠标滑动需求&#xff0c;但是只能说能力有限&#xff0c;索性使用 php版本的数组分页&#xff0c;解决问题。 经常有用到分页&#xff0c;索性做一个简单封装、 测试用例 QTime curtime QTime::currentTime();nHour curtime.hour();nMin curtim…

了解PyTorch中的缩放点积注意力及演示

torch.nn.functional.scaled_dot_product_attention 函数在 PyTorch 框架中用于实现缩放点积注意力&#xff08;Scaled Dot-Product Attention&#xff09;。这是一种在自然语言处理和计算机视觉等领域常用的注意力机制。它的主要目的是通过计算查询&#xff08;query&#xff…

linux磁盘总结

什么是page_cache linux读写磁盘&#xff0c;如果都是采用directIO的话&#xff0c;效率太低&#xff0c;所以我们在读写磁盘上加了一层缓存&#xff0c;page_cache。读的话&#xff0c;如果page_cache有的话&#xff0c;就不用向磁盘发出请求。写的话&#xff0c;也直接写入的…

VUE购物车商品的添加、删除和计算总金额功能

效果 代码 <template><div id"box"><!--全选功能--><input type"checkbox" change"handleChange" v-model"isAllChecked" /><!--绑定事件&#xff0c;不选用click&#xff0c;使用change每次check值改变会…

vscode 创建文件自动添加注释信息

随机记录 目录 1. 背景介绍 2. "Docstring Generator"扩展 2.1 安装 2.2 设置注释信息 3. 自动配置py 文件头注释 1. 背景介绍 在VS Code中&#xff0c;您可以使用扩展来为新创建的Python文件自动添加头部注释信息。有几个常用的扩展可以实现此功能&#xff0…