从零开始开发微信公众号网页，一篇文章教你掌握全流程技巧

如果您觉得这篇文章有帮助的话！给个点赞和评论支持下吧，感谢~

作者：哇子

前端、后端技术(摸鱼)交流QQ群：374984174

唠唠嗑

hello，大家好，我是哇子，最近打算开发一个微信公众号网页，在研究一番后，写下这篇文章。

众所周知，微信公众号分为两种：订阅号 和 服务号

订阅号用于个人，服务号用于企业。两者的微信权限是不一样的。我们开发微信公众号网页就是想知道用户是谁？或者说就是想拿到用户的openid，呢称，性别，地区等。这在微信公众号中属于网页授权接口，官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

由于订阅号和服务号的微信接口权限不一样，

订阅号是没有【网页授权】接口权限的
服务号有【网页授权】接口权限

所以，如果你的公众号类型是个人（订阅号）的话，不能开发公众号网页，但是不是完全没办法，可以用另外的变通方法，这个我下一篇文章讲

这期先讲服务号的网页开发

服务号网页开发

先看官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

文档中说明了网页授权一共分为两种，一种是静默授权，一种是弹框授权，也就是需要用户手动同意

静默授权：用户无感知，直接进入回调页。只能获取到openid
弹框授权（手动确认授权）：这种授权需要用户手动同意（如下图）。能获取用户openid，呢称，性别，地区等

两种方式看你自己业务需求怎么选，如果你需要用户更多信息，那你就选弹框授权，可能会用户体验不好。如果你只想获取用户的openid，那你就选择静默授权。

无论你是哪种方式，你都需要先在公众号后台设置回调页面地址，回调地址就是你要跳转的页面地址。

设置回调地址

// 微信公众号测试账号-redirect_uri域名与后台配置不一致，错误代码:10003
按照提示下载微信给的txt文档放到域名目录下，否则会保存不成功

设置菜单

自定义菜单页面地址：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

参数说明

参数	是否必须	说明
appid	是	公众号的唯一标识
redirect_uri	是	授权后重定向的回调链接地址，请使用 urlEncode 对链接进行处理
response_type	是	返回类型，请填写code
scope	是	应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息）
state	否	重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节
#wechat_redirect	是	无论直接打开还是做页面302重定向时候，必须带此参数
forcePopup	否	强制此次授权需要用户弹窗确认；默认为false；需要注意的是，若用户命中了特殊场景下的静默授权逻辑，则此参数不生效

开始开发

接下来，就是官网文档的步骤了

网页授权流程分为四步：

引导用户进入授权页面同意授权，获取code
通过code换取网页授权access_token（与基础支持中的access_token不同）
如果需要，开发者可以刷新网页授权access_token，避免过期
通过网页授权access_token和openid获取用户基本信息（支持UnionID机制）

如果是静默授权的话，到第二步其实就完成了，这个官方文档也说了，弹框授权需要走完所有步骤