初接触微信公众号的开发，被各种问题折腾。这是一个记录。本文大纲如下：业务需求为什么要做微信公众号网页授权微信公众号网页授权步骤备注详细授权码1.业务需求因为我项目的业务需求是判断用户是否有已根据用户的openid进行绑定在我们的平台设置好账号后，如果已经绑定，会直接进入项目首页，如果还没有绑定，则先去登录页面绑定账号。所以我们需要先获取到用户的openid，如何获取到用户的openid，这就涉及到微信公众号的网页授权问题了。因为是第一次接触微信的开发公众号，所以被这个授权问题困扰了很久，下面就详细说一下授权流程，可能有点啰嗦.但这都是有用的信息。2、为什么要授权微信公众号网页？为什么微信公众号网页需要授权？这个问题在微信开发文档中有详细说明。在微信中打开第三方网页，我们可以通过微信网页的授权获取用户的基本信息，从而实现我们进一步的业务逻辑。好吧，就这句话就这么牛逼，因为我们要判断用户是否绑定了我们平台的账号，所以我们需要获取当前的微信openid，每个微信用户的openid都是唯一的。一旦我们得到它，我们就可以判断。三、微信网页授权步骤1、进入微信公众平台-公众号设置-在功能设置中找到“网页授权域名”，这里填写我们部署的项目的域名。在填写域名之前，我们可以看到有一个txt文件。我们需要把这个文件放在项目部署域名的根目录下。请记住，它是根目录。然后填写我们项目部署的服务器的域名。切记这里的域名不要加http或者https，微信公众号的网页授权域名必须是80或者443端口。因为没仔细看文档，惭愧了半天时间。2、引导用户进入https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect进入该页面的目的是获取授权码微信，有了这段代码，我们就可以发到后台去获取openid了~其中scope表示应用权限的范围，有两个值，一个是snsapi_userinfo（非静默授权，也就是说会有一个授权page，需要用户点击Confirmationauthorization），一种是snsapi_base（silentauthorization，也就是说用户是感知不到的），我这里使用的是non-silentauthorization。这里就不解释这两种授权方式的区别了。文档中有详细的介绍。4.注意事项首先要注意的一点：这里强调的是redirect_uri，这个参数表示获取到code值后的回调地址，也就是说我们跳转到微信的这个地址进行授权，拿到code后，跳转到回到我们项目的地址。所以这里可以填写详细路径，注意这里的域名一定要和我们在微信公众号后台填写的网页授权域名一致，而且一定要填写完整的域名，http://和其他协议必须带来。第二点注意：我们微信后台填写的网页授权域名公众号必须是80或者443端口，这是微信的规定，因为我在项目开始的时候用的是8082端口号，导致一直提示10003。redirect_uri域名与后台配置不一致的错误。又是一次折腾。获取code后，我们可以通过请求后台的接口获取用户的openid。虽然前端在获取code后也可以获取openid，但是由于微信公众号有如下提示，特别注意：由于公众号的保密和获取，获取的access_token安全级别非常高，只能存储在服务器上，不允许传递给客户端。后续刷新access_token、通过access_token获取用户信息等步骤也必须从服务端发起。所以，我们还是通过向后端请求接口来获取openid。5.授权码详解下面贴出详细的授权码mounted(){this.getUrlCode();},methods:{...mapMutations(['SET_USER_INFO']),getUrlCode(){//getUrlParams是封装的方法，使用拦截当前地址栏中的参数constcode=getUrlParams('code');if(code==null||code==''){this.getWxCode();//进入微信授权页面获取codereturnfalse;}//拿到code后可以请求后台接口获取OpenId，因为接口参数需要token，我们先获取tokenthis.code=code;这个.GetToken();},getWxCode(){constAppId=this.AppId;让状态='123'；让redirectURL=encodeURIComponent(window.location.href);letbase=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=`;窗口。位置。href=base+AppId+`&redirect_uri=`+redirectURL+`&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect`;},GetToken(){GetToken(this.tokenParams).then(data=>{if(!data.iserror){utils.setSession('token',data.data.access_token);//拿到token后，可以通过代码this.GetWxOpenId()获取OpenId；}})},GetWxOpenId(){GetWxOpenId({Code:this.code}).then(data=>{if(!data.iserror){this.OpenId=data.data.openid;//获取openidutils.setSession('OpenId',data.data.openid);this.GetCode()//通过openid判断用户是否绑定了平台账号，然后跳转到对应页面}})},GetCode(){GetCode({OpenId:this.OpenId}).then(data=>{if(!data.iserror){letfullpath=this.$route.query.redirect;if(fullpath){utils.setSession('代码',data.data.Code);//将代码存储在头部this.SET_USER_INFO(data.data)this.$router.push(this.$route.query.redirect);}else{this.$router.push({path:'/home'});}}})},}点击下方文字阅读原文，在微信打开文档中可以看到微信公众号网页授权的内容！
