微信公众号网页授权--前端获取code及用户信息（vue）【简单详细版】

嗨喽大家好，前段时间开发微信公众号网页授权，虽然网上已经有很多关于这方面的博客或者教程，但是第一次开发还是遇到挺多坑的，以下分享一下我的遇到的一些问题的见解，希望对你们有帮助。

一、测试号相关配置

首先在你公司申请的测试号上配置好相关信息，将你的域名配置好

URL与Token都是要后台配置好的，直接叫后台给过来就好啦，域名一定要和URL的域名保持一致。

然后，在体验接口权限表里面找到网页帐号--网页授权获取用户基本信息，点击修改：

二、获取code

配置好以上回调域名等后，就可以写代码了。首先是获取code，说道获取code我们就需要用到这个接口：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 若提示“该链接无法访问”，请检查参数是否填写错误，是否拥有scope参数对应的授权作用域权限。

给大家看个使用列子

getCode () { // 非静默授权，第一次有弹框
			                this.code = ''
			                if (this.page == 'shopproductdetails') {
			                	var local = '你们自己的域名'
			                } else {
			                	var local = '你们自己的域名'
			                }
			                var appid = '你们自己的appid'  //公众号里有自己查，不会找的查一下百度
			                this.code = this.getUrlCode().code // 截取code
			                if (this.code == null || this.code === '') { // 如果没有code，则去请求
			                  window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + this.appid +
			                  	"&redirect_uri=" +
			                  	encodeURIComponent(local) + "&response_type=code&scope=snsapi_base#wechat_redirect"
							} else {
			                    // 你自己的业务逻辑
			                }
			            },
			getUrlCode() { // 截取url中的code方法
			                var url = location.search
			                this.winUrl = url
			                var theRequest = new Object()
			                if (url.indexOf("?") != -1) {
			                    var str = url.substr(1)
			                    var strs = str.split("&")
			                    for(var i = 0; i < strs.length; i ++) {
			                        theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1])
			                    }
			                }
							console.log(theRequest)
			                return theRequest
			            },

大家可以参照一下，回调后code在路径上第二个方法截取下来，大家缓存或者用其他方式存储起来就可以用了，好啦，今天就到这，谢谢大家！