微信公众号自定义菜单实现跳转html页面
开发准备
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"
}
真机测试
点击自定义菜单,跳转后成功连接后台,访问业务内容。
完结—