微信公众号自定义菜单实现跳转html页面
开发准备1、阅读微信开发者文档2、添加一个自定义菜单自定义菜单访问链接无法开启自定义菜单 ( 坑1 )3、 前端获取微信传入的code4、微信开发者工具测试5、域名授权 很重要 ！6、前端获取openid GET 请求！ （ 不推荐！！！）真机测试开发准备
1、微信开发者文档
https://developers./doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
2、公众号权限 长期的 权限高一点
3、一个准备好的html页面
1、阅读微信开发者文档
微信开发者文档 点开就是最有用的页面
https://developers./doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
2、添加一个自定义菜单
选择跳转到网页
自定义菜单访问链接
页面地址链接 固定写法
自定义菜单页面地址：
https://open./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./connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%%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./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" }
真机测试
点击自定义菜单，跳转后成功连接后台，访问业务内容。
完结—
