设为首页收藏本站
开启辅助访问

微信公众号 自定义菜单跳转html页面 前端获取code，openid

 您所在的位置：网站首页 › 公众号怎么直接跳转网页链接 › 微信公众号 自定义菜单跳转html页面 前端获取code，openid

微信公众号 自定义菜单跳转html页面 前端获取code，openid

2024-07-16 08:52:52| 来源: 网络整理| 查看: 265

微信公众号自定义菜单实现跳转html页面 开发准备1、阅读微信开发者文档2、添加一个自定义菜单自定义菜单访问链接无法开启自定义菜单 ( 坑1 )3、 前端获取微信传入的code 4、微信开发者工具测试5、域名授权 很重要 ！6、前端获取openid GET 请求！ （ 不推荐！！！）真机测试

开发准备

1、微信开发者文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html 2、公众号权限 长期的 权限高一点 在这里插入图片描述 3、一个准备好的html页面

1、阅读微信开发者文档

微信开发者文档 点开就是最有用的页面 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

2、添加一个自定义菜单

选择跳转到网页 在这里插入图片描述

自定义菜单访问链接

页面地址链接 固定写法 自定义菜单页面地址： https://open.weixin.qq.com/connect/oauth2/authorize?appid=（你的appid）&redirect_uri=（http----------index.html）&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect

官方示例： https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60& redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php& response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

1、redirect_uri 是授权后重定向的回调链接地址， 需要使用 urlEncode 对链接进行处理（ 很重要）使用在线工具处理一下地址。

redirect_uri 此处需要域名授权的地址，可查看本章的 域名授权

2、appid 在公众号基本配置里

3、scop = snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid） snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）

无法开启自定义菜单 ( 坑1 )

在列表基本配置中，取消开启服务器配置即可

3、 前端获取微信传入的code const url = window.location.search console.log('截取code-------') console.log(url) const code = url.substring(6, url.indexOf("&")) console.log('传入code-------') console.log(code); 4、微信开发者工具测试

完成以上步骤后可使用 微信开发者工具 进行测试 官方步骤： 1 第一步：用户同意授权，获取code 2 第二步：通过code换取网页授权access_token 3 第三步：刷新access_token（如果需要） 4 第四步：拉取用户信息(需scope为 snsapi_userinfo)

// code 只能使用一次，不使用五分钟会失效哦~ 1、红框处放入 自定义菜单绑定的链接，调用成功后会返回如图的code 2、通常前端获取code 传入后台，后台通过微信的查询接口 查询用户的openid等等 *** // 因为这一步 传参中有 重要信息放在后台处理更安全一点*** 在这里插入图片描述

5、域名授权 很重要 ！

// 微信公众号测试账号-redirect_uri域名与后台配置不一致，错误代码:10003 按照提示下载微信给的txt文档放到域名目录下，否则会保存不成功 在这里插入图片描述

6、前端获取openid GET 请求！ （ 不推荐！！！） function function_name() { const appId = '' // 公众号基本信息中的 公众号appid const secret = '‘ // 重要信息 公众号基本信息中的 开发者密码(AppSecret) const searchCode=‘’ // 上一步获取的微信传入的code $.ajax({ url: `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appId}&secret=${secret}&code=${searchCode}&grant_type=authorization_code`, type: "GET", success: function(result) { console.log('微信接口调用成功-----------') const data = JSON.parse(result); console.log(data) getData(data.openid) // 调用业务查询接口 }, error: function(data) { console.log(data); } }); }

调用成功返回参数

{ "access_token":"ACCESS_TOKEN", "expires_in":7200, "refresh_token":"REFRESH_TOKEN", "openid":"OPENID", "scope":"SCOPE" } 真机测试

点击自定义菜单，跳转后成功连接后台，访问业务内容。 在这里插入图片描述 在这里插入图片描述

完结—



【本文地址】

公司简介

联系我们

今日新闻

点击排行
实验室常用的仪器、试剂和
说到实验室常用到的东西，主要就分为仪器、试剂和耗
不用再找了，全球10大实验
01、赛默飞世尔科技（热电）Thermo Fisher Scientif
三代水柜的量产巅峰T-72坦
作者：寞寒最近，西边闹腾挺大，本来小寞以为忙完这
通风柜跟实验室通风系统有
说到通风柜跟实验室通风，不少人都纠结二者到底是不
集消毒杀菌、烘干收纳为一
厨房是家里细菌较多的地方，潮湿的环境、没有完全密
实验室设备之全钢实验台如
全钢实验台是实验室家具中较为重要的家具之一，很多

推荐新闻

图片新闻
实验室药品柜的特性有哪些
实验室药品柜是实验室家具的重要组成部分之一，主要
小学科学实验中有哪些教学
计算机 计算器 一般 打孔器 打气筒 仪器车 显微镜
实验室各种仪器原理动图讲
1.紫外分光光谱UV分析原理：吸收紫外光能量，引起分
高中化学常见仪器及实验装
1、可加热仪器：2、计量仪器：（1）仪器A的名称：量
微生物操作主要设备和器具
今天盘点一下微生物操作主要设备和器具，别嫌我啰嗦
浅谈通风柜使用基本常识
　众所周知，通风柜功能中最主要的就是排气功能。在

专题文章
    CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭