微信公众号的网页开发（用户授权、微信分享）

1.开发前的公众平台配置

首先确定微信公众号是服务号还是订阅号（这里只介绍服务号）

1.1申请测试账号用于本地开发

开发->开发者工具->公众平台测试账号->配置账号信息（获取用户信息公众号必须具备网页账号权限）

配置回调域名

点击修改配置授权回掉页面

回调域名

1.2正式环境配置

上线前的配置

可以在设置的js接口安全域名下调用微信开放的JS接口

用户在网页授权页同意授权给公众号后，微信会将授权数据传给一个回调页面，回调页面需在此域名下

2.网页授权

授权过程

1.用户打开推广出去的地址，页面中需要判断用户打开的地址中是否带有code参数(是否已经授权)

2.存在code（说明用户已经授权）否则调用授权页面

授权页面

（1）授权页面完整地址：https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri="+redirect_uri+"&response_type=code&scope=snsapi_userinfo#wechat_redirect

（2）scope有两个值分别是：（获取用户基本信息，这里scope的值选snsapi_userinfo）

（a.）snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid）

（b.）snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息）

3.用户会看到一个如下的授权页面

4.用户确认后，页面会跳转到redirect_uri/?code=CODE&state=STATE。在后面加上code

到此为止，已经完成了用户授权

3.获取用户基本信息

通过code换取网页授权access_token、用access_token拉取用户信息（这两部可以由后端完成），也可以前端完成

具体可以参考网页授权的开发文档

4.微信分享

确保使用JSSDK（微信分享）的域名是第一部分平台配置中的JS接口安全域名

1.引入js文件

2.通过config接口验证配置（可以请求后台接口拿到config需要的属性值）

3.分享功能（希望在页面加载时就初始化分享）

5.遇到的问题

（1）分享出去的标题、描述、和图片与设置的不一致

授权的切入点：

（a.）开发时准备整个活动的入口就是https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=url&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect 打开活动首页就进行微信授权。拿到code换取token进行正常的页面渲染

既然入口就是微信授权，分享出去的链接也必须是授权页面（上面的地址）。此时出现了分享的标题、描述等不一致的问题。

原因：分享的地址出错了，导致分享失败

修改js安全域名？？？？下图说明行不通，要将一个文件上传到填写的域名下，以证明此域名是有效的

此时意识到，思路出错了，分享出去的链接只能是页面地址，不可以加上微信授权。

（b.）入口是页面地址，在页面代码中进行页面授权。即（2.网页授权）中的步骤

PS：第一次写文章，表达不是很清楚，请见谅！

最后编辑于：2018.06.20 10:41:29