微信公众号网页开发问题和解决办法记录

非凡00
198 阅读7分钟

文章内容介绍

微信公众号网页开发过程中碰到了许多问题，主要是和微信相关的功能，比如网页授权登录和JSSDK的使用，虽然微信有官方的开发文档，但是文档中有些地方不仔细看真的容易出现问题，而且隐患比较深。虽然我是个前端开发，但是文章中一些后端调用微信接口的逻辑和注意点我也会提到，文章会从公众号配置到具体代码实现一步步全部讲到。

开发前的准备工作

作为前端，开发前肯定是基本的前端项目脚手架要准备好，测试环境地址也要准备好；

注意点：如果项目线上环境地址是https协议，域名地址必须有安全证书否则无法在微信环境下打开（会在微信网页上直接显示白屏也没有其他提示），http协议没有限制；

开发前的公众号配置

绑定运营者微信号

微信公众号的管理员需要将相关开发的微信绑定为运营者，这样开发者才能扫码登录进入微信公众平台，微信公众平台中的一些功能开发者都需要去进行配置或用来协助项目开发； image.png

绑定域名地址

如果你是一个开发人员，在上一步完成后你已经能进入微信公众平台了，选择“设置与开发-公众号设置-功能设置”，能看到有3个“业务域名”、“JS接口安全域名”、“网页授权域名”，这3个域名分别针对什么功能不用管，直接3个全部绑定上就完事了。 image.png

具体绑定做法简结来说就是将一个文件MP_verify_heFjWXgWDGnPCKFu.txt，把这个文件放到线上域名地址的跟目录下就行了。如果你是前端不知道怎么放跟你们团队的运维讲一下，运维一听就会明白。可以通过业务域名地址+MP.txt文件名称的访问路径如果页面上出现MP.txt文件中的字符内容就说明放置文件位于根目录下这一步成功了。 image.png

那绑定的域名地址怎么填呢？举个例子就啥都明白了，如果你们的网页地址是：www.baidu.com/， 域名地址这么填就行了：www.baidu.com, 记住了奥，管你域名地址是https还是http，不用填协议也不要加上什么“/”。如果你的网页地址是那种二级域名比如：www.baidu.com/mp/, 不用管二级域名啥的，域名地址还是填：www.baidu.com， 这样就能绑定成功了。

IP白名单

access_token是调用微信接口一个非常重要的东西，如果想要获取到token就需要调用接口的IP地址在白名单中，这个应该是后端配置内容，进入“设置与开发-安全中心-IP白名单”就知道了。

网页授权登录

网页授权登录的基本作用就是用户只要点击按钮后同意授权登录，那咱们就能够获取用户的微信基本信息了，比如头像，名字，籍贯之类的还有微信用户唯一标识openId。下面就讲前端实现网页授权登录需要做哪些工作；

页面上就随便画个按钮，用户点击之后就能唤起微信授权登录；点击事件代码如下；

const torLogin = () => {
    let appid = getWeiXinSafety().appid//微信APPid
    let url = getWeiXinSafety().url
    //不存在就打开上面的地址进行授权
    window.location.href =
      "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
      appid +
      "&redirect_uri=" +
      url +
      "&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect";
  }

其实就是跳转至微信的授权登录链接，这个链接中有两个可配置参数“appId”和“url”，appId：微信公众号appId(设置与开发-基本配置-公众号开发信息)，url就是自己的线上环境地址，刚刚文章中做绑定域名操作时不是拿www.baidu.com/ 举例吗，那这个方法里的url就填 www.baidu.com 写出完整的回调地址，记住这个url地址屁股上不要带/。

这个点击事件响应后就会弹出一个授权登录框，点击同意后就会跳转到方法里填写的url地址，这个时候你就能看到你的url地址上拼上了一串code码，地址会像这样显示：www.baidu.com/?code=061vK… ，这个code有大作用前端解析地址拿到code码之后要通过接口传递给后，后端就能通过一系列操作拿到微信用户的基本信息。至于后续如何处理这些用户信息就结合业务需求了。到这里网页授权登录也完成了。

网页授权登录可能出现的bug

这个网页授权登录我又发现了一个新问题，就是上面提到授权登录成功后网页地址会拼上一个code码，如果此时你再次去执行授权登录，微信会在你当前网页路径已有code的情况下又去追加了一个code，网页路径就会出现这样的情况：www.baidu.com/?code=061vK…

我发现问题的情况下是这样的，用户在微信授权登录后执行了退出登录操作，但是退出的话并不会去主动刷新网页，所以路径上的code码得到了保留，此时再去做微信授权登录操作路径上又拼得了一个新code，而我解析code的方法只会得到路径上的第一个code码，所以拿着这个之前被使用过的code码再去使用就会报错了。 解决方法：可以在执行退出登录操作后主动刷新网页或者解析路径时只获取路径上最后的一个code码， 我选择的方法是后者。

本地联调

在线上环境可用之前肯定要进行本地联调啊，总不能改一点儿代码我就往线上发吧(一开始作为小白我真是这样做的)，进入微信公众平台，“设置与开发-开发者工具-公众平台测试账号”，扫码登录后你就能获得自己的测试账号，测试账号中有咱们授权登录中必须用到的appId，记得和你一起开发联调的后端都要扫描二维码关注这个测试公众号。还记得正式公招要绑定域名吗？测试公众号也要绑定只是简单了许多，找到“体验接口权限表-网页服务-网页账号”点击修改会跳出一个域名框，这个域名就填写咱们的本地项目启动地址就行了，比如本地项目的启动地址为http://192.108.6.7:10086/ 那在域名框里填 192:108.6.7.10086 就行了。这样的话就配置完成可以进行本地联调了。

image.png

注意点

微信网页授权登录不是前端一个人的事情，很多配置信息都要与后端同步，比如appId和appserect无论是本地联调还是上线环境，前后端都要配置成一样的，否则都会导致联调不成功。

微信公众号有许多功能是有次数限制的，但是网页授权登录不会有次数限制，使用次数是无限制的！！！网页授权登录中使用到的access_token(后端配合openId获取用户信息),和“设置与开发-接口权限-基础支持”中的获取access_token有本质区别，后者是有2000次的次数限制，但是网页授权登录次数是无限的。

后续文章内容更新

后续这个文章我还会持续更新，下次就更新如何使用微信JSSDK，来使用微信中的扫码，拍照，定位等功能。还有什么不明白的地方可以留在评论区。

avatar
文章
阅读
粉丝