uni-app微信公众号（1）—

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

微信公众号不同于小程序，公众号是基于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 // 截取codemapState({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.searchthis.winUrl = urlvar 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可选

（2.2）通过code换取网页授权access_token

第一步之后，我们就获取了code值。将code发送给后端，后端调用接口链接，来换取access_token。

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

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

（1）APPID和SECRET

(2)CODE

code即是上面获取的code

后端代码如下

第二步完成会返回三个值，如上图红色方块中圈中的

（2.3）刷新access_token（如果需要）

由于access_token拥有较短的有效期，当access_token超时后，可以使用refresh_token进行刷新，refresh_token有效期为30天，当refresh_token失效之后，需要用户重新授权。

https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

（2.4）拉取用户信息(需scope为 snsapi_userinfo)

当2.1,2.2完成之后，我们就可以获取用户信息了。

http：GET（请使用https协议） https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

ACCESS_TOKEN和OPENID参数，即是2.2中返回的数据

综上所述。微信公众号的网页授权登录，就已经完成了。

文章内容有什么错误的地方，望斧正，谢谢~