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

微信公众号自定义菜单实现跳转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" 
}

真机测试

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

完结—