uni-app微信公众号（1）——网页授权登录

做关于微信上的小程序或者公众号，最重要的是——授权登录。微信公众号不同于小程序，公众号是基于H5开发的网页版“程序”，而小程序则更像是一个微型的“APP程序”。微信公众号更得是为了营销。小程序则是为了和用户交互。废话不多说，我们直接来看，如何开始做一个微信公众号（1）申请公众号，开发者基本配置这里就不做重复的叙述了。微信开发者文档上，写的很清楚#微信开发者文档https://developers.

徐小硕

5171人浏览 · 2021-10-29 14:25:53

徐小硕 · 2021-10-29 14:25:53 发布

做关于微信上的小程序或者公众号，最重要的是——授权登录。

微信公众号不同于小程序，公众号是基于H5开发的网页版“程序”，而小程序则更像是一个微型的“APP程序”。微信公众号更得是为了营销。小程序则是为了和用户交互。

废话不多说，我们直接来看，如何开始做一个微信公众号

（1）申请公众号，开发者基本配置

这里就不做重复的叙述了。微信开发者文档上，写的很清楚 #微信开发者文档https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Getting_Started_Guide.htmlhttps://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Getting_Started_Guide.html

（2）网页授权登录

在第一步完成之后，我们就要用户的授权登录了，因为是H5开发，所以要使用网页授权登录

#网页授权登录https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.htmlhttps://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html 在微信开发者文档上写的也挺详细的，下面我们根据他的文档，一步步去完成授权

（2.1）用户授权登录，获取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

上面的链接中，有三个蓝色标记处，分别代表三个参数

（1）APPID：

这个是公众号基本配置中的开发者ID(AppID)，如图

（2） REDIRECT_URI：

这个是你授权时返回的路径，也就是说，也就是在这里路径里有你需要的code，你需要在这个url中截取code。

下面是我获取code，和截取code的代码

        // 获取code   
         getCode() { 
				var appid = 'wxa***************26'
				var url = 'https:/**************/index.html'
				this.code = '';
				this.code = this.getUrlCode().code // 截取code
				mapState({
					saveCode: this.code
				});
				console.log(this.code);
				localStorage.setItem('code', this.code)
				if (this.code == undefined || this.code == '' || this.code == null) { // 如果没有code，则去请求
					console.log('没有code');
					window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid +
						'&redirect_uri=' + url + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
				}
			},
            // 截取url中的code方法
			getUrlCode() { 
				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])
					}
				}
				return theRequest
			},

（3）SCOPE：

这个是链接自带的参数，有snsapi_base和snsapi_userinfo可选