微信公众号自定义菜单实现跳转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.searchconsole.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 = '' //  公众号基本信息中的 公众号appidconst 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"
}

真机测试

点击自定义菜单，跳转后成功连接后台，访问业务内容。

完结—

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

微信公众号自定义菜单跳转小程序
微信的小程序交给有赞开发,由微信手册,菜单跳小程序需要如下配置: ["type" => "miniprogram","name" =& ...
微信公众号自定义菜单跳转到历史消息页面
首先声明,这个功能微信已经下架了,从已发表里面搜索已经没有历史记录勾选了. 操作方法: 在页面地址中填写以下地址: https://mp.weixin.qq.com/mp/profile_ext?ac ...
springboot微信公众号自定义菜单创建及响应
微信公众号自定义菜单创建及响应前言本篇博客是为了速度开发微信公众号而进行讲解,对于深入的原理性讲解推荐去观看微信公众平台的官方文档. 微信公众号分为订阅号,服务号,小程序,本篇主要是介绍的订阅号开 ...
微信公众号自定义菜单如何设置？
随着微信公众号注册条件的放宽,微信公众号的使用范围更加广泛,普及程度也有所提高.现在大大小小的商家几乎都有自己的微信公众号. 无论什么产品,都离不开一个固有的规律,那就是是用的人多了,问题也就显现出来 ...
微信公众号自定义菜单怎么添加多篇文章？
本文主要是从个人的经验出发,分享一个主题: 微信公众号自定义菜单如何添加多篇文章(主要通过推文分类.精选来实现) 不仅仅从微信页面模板.专辑的角度,同时分享一些微信公众号运营人员遇到的共性问题,例如 ...
微信公众号自定义菜单添加emoji表情图标
微信公众号自定义菜单添加emoji表情图标第一步:打开微信公众平台接口调试工具,点击前往接口调试工具: 第二步:把这段代码 {"button":[{"sub_but ...
微信公众号自定义菜单设置教程
微信公众号菜单等功能如何开通自定义菜单最大的优点是减少了用户的认知门槛,可以将公众账号里的重点信息入口直观的暴露给用户.当用户进入到公众账号时,可以一目了然的了解相关的服务,只需要点击,不需要再通过 ...
java 创建自定义菜单_Java实现微信公众号自定义菜单的创建方法示例
本文实例讲述了Java实现微信公众号自定义菜单的创建方法.分享给大家供大家参考,具体如下: 开发公众号的时候可能需要给一些自定义菜单添加事件,比如点击某菜单然后服务端给用户推送信息. 我们也可以使用微 ...
php 微信公众号自定义菜单
使用php配置微信公众号自定义菜单注意: 编写发送消息之前需要在微信公众平台后台左边菜单找到基本配置然后开启服务器配置一级菜单数组,个数应为1~3个, 二级菜单数组,个数应为1~5个如果有疑问 ...
微信公众号自定义菜单如何添加特殊符号？
前言有些公众号底部的菜单栏,会出现一些表情(小图标),如图所示: 众所周知,微信不允许这种特殊符号 ,那么如何使用这些特殊符号呢? 第一种办法这种办法最简单,利用一个网站即可:传送门! 一.打开 ...

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

微信公众号自定义菜单实现跳转html页面

开发准备

1、阅读微信开发者文档

2、添加一个自定义菜单

自定义菜单访问链接

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

3、前端获取微信传入的code

4、微信开发者工具测试

5、域名授权很重要！

6、前端获取openid GET 请求！（不推荐！！！）

真机测试

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

最新文章

热门文章

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

微信公众号自定义菜单实现跳转html页面

开发准备

1、阅读微信开发者文档

2、添加一个自定义菜单

自定义菜单访问链接

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

3、 前端获取微信传入的code

4、微信开发者工具测试

5、域名授权 很重要 ！

6、前端获取openid GET 请求！ （ 不推荐！！！）

真机测试

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

最新文章

热门文章

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

3、前端获取微信传入的code

5、域名授权很重要！

6、前端获取openid GET 请求！（不推荐！！！）

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