微信公众号静默网页授权(前端开发、本地调试及上线)图文教程例子解析

代码示例：

根据您的请求，以下是微信公众号静默网页授权的详细图文教程，包括前端开发、本地调试及上线的步骤：

1. 公众号后台配置

首先，使用管理员或开发人员的账号登录微信公众平台：微信公众平台。

打开 设置与开发 - 开发者工具 - Web开发者工具。
配置网站域名，即上线后的后端接口域名。需要配置的包括业务域名、JS接口安全域名和网页授权域名。
添加开发者微信号，并在“微信开发者工具”登录此账号，以便进行本地调试。需关注“公众平台安全助手”公众号，且不能开免打扰。

2. 本地调试（微信开发者工具）

在 设置与开发 - 开发者工具 - 公众平台测试账号 中，微信官方提供了一个测试号，用于本地调试网页授权功能。后期部署到线上时，需更换为自己的公众号appId和配置线上后端域名。

在 网站授权获取用户基本信息 部分，输入本地启动的项目IP地址。注意，只输入IP，不要输入http://或端口，默认端口是80。微信重定向不支持带端口的访问域名，因此项目端口也必须设置成80端口。

3. 代码实现

以下是实现静默网页授权的代码示例：

window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?" +
"appid=测试号的appid&redirect_uri=" +
"http://192.168.03.130/${这里可以拼你要跳转的路由，不拼则默认跳到首页，例如/pages/home}" +
"&response_type=code&scope=snsapi_base#wechat_redirect";

参数说明：

appid：公众号的appid。
redirect_uri：授权后重定向的回调链接地址。
response_type：返回类型，填写code。
scope：应用授权作用域，snsapi_base（不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo（弹出授权页面，可通过openid拿到昵称、性别、所在地）。
state：重定向会带上state参数，可填a-zA-Z0-9，作为路由参数。
#wechat_redirect：必带。