微信公众号网页本地开发环境搭建

co松柏
2 阅读4分钟

前言

大家好，我是松柏。

前两天公司要我配合前端同学开发微信公众号网页，需要我在本地提供开发环境，这个过程中也是踩了几个大坑，今天把这个过程整理出来分享给大家，希望对大家有所帮助。

公众号网页的好处

那我们首先要了解下为什么要做微信公众号网页，它有什么好处呢？

  1. 首先就是微信拥有广泛的用户基础，公众号网页可以直接在微信内为用户提供服务。
  2. 其次是公众号网页可以为用户提供非常方便的交互体验，在微信内就能完成阅读、购物、支付等操作。
  3. 第三通过右上角分享或者点击链接，用户能直接进入到网站中，对产品的传播十分有利。

搭建步骤

了解了它的好处之后，我们开始搭建开发环境。

1）申请测试号
一般情况下我们会使用测试号在本地开发调试，所以首先要申请测试号：mp.weixin.qq.com/debug/cgi-b…
扫码登录之后，我们会看到这个界面：image.png

2）接口信息配置
为了本地开发调试方便， URL 我们可以填内网穿透的地址，Token 自己可以随意填。
需要注意的是填写的 URL 一定是公网可访问的，而且需要按照文档校验微信传过来的数据，才能够配置成功。
比如我这里是 http://域名/mp ,这个 url 可以访问到我本地 Java 项目，该方法如下：

public String check(String timestamp, String nonce, String signature, String echostr)
        throws WxErrorException {
    if (wxMpService.checkSignature(timestamp, nonce, signature)) {
        return echostr;
    } else {
        return "";
    }
}

wxMpService 对象来自 wxJava

3）配置 JS 接口安全域名
这里可以直接写本地的 ip
image.png

4）关注测试号
这一步是必须的，关注之后我们才能使用后续的一些接口
image.png

5）设置授权回调页面域名
这一步的目的是保证我们在公众号网页获取用户相关数据时，能够正确地回调到指定接口或页面
首先找到下图中的选项，点击修改：
image.png
image.png
这里我们直接填前端的调试地址就可以
可能有小伙伴好奇，既然是回调地址，为什么不直接写后端地址，处理完登录逻辑之后再重定向到前端呢？
这里的原因我们在最后一步解释

6）前端跳转到授权页面
根据公众号的文档，在前端的合适位置判断当前是否是微信环境，是的话则就跳转，参考代码如下：

if (isWechat()) {
  window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxx&redirect_uri=http%3A%2F%2F127.0.0.1:8000%2Fapi%2Flogin%2Fwx&response_type=code&scope=snsapi_userinfo#wechat_redirect`;
}

isWechat 方法可以根据 UA 判断实现。
可以看到，我在 redirect_uri 参数中传递的是一个前端地址，然后通过代理请求后端，而不是直接写后端接口，这里跟上一步是有联系的，原因我们同样在最后一步解释

7）通过后端回调函数重定向到指定页面
在上一步中我们指定了 redirect_uri ，也就是微信处理完之后的回调地址，我们这一步的目的就是编写这个回调函数，处理微信返回的数据并记录登录态完成登录：

@GetMapping("/login/wx")
public void userLoginByWxMpWeb(HttpServletRequest request, HttpServletResponse response, @RequestParam("code") String code) throws IOException {
    // todo 根据 code 获取用户信息并记录登录态
    response.sendRedirect("http://localhost:8000");
}

为什么我们不在 redirect_uri 中直接写后端地址呢？
我们梳理一下这个过程：

tip: 我这里的场景是前端通过代理访问后端，如果是直接访问后端应该就不会有上述问题

  1. 微信网页环境下，浏览器访问微信服务器
  2. 微信服务器处理后将请求重定向到 redirect_uri
  3. redirect_uri 处理后重定向到前端地址

其中，我们会在 redirect_uri 这个回调中处理并记录用户的登录态，也就是 cookie 的 domain 是 redirect_uri 的域名，如果 redirect_uri 与前端地址的域名不一致，那么从前端访问发起请求的时候就不会携带上述的 cookie ，导致无法登录。示意图如下： 8）通过微信开发者工具调试
使用官方的开发工具可以方便的模拟出微信环境，首先点击公众号网页项目，
image.png
然后输入项目地址：
image.png
到这里开发环境的准备就完成了

结语

经过以上步骤，我们就能在本地愉快的开发微信公众号网页啦！
如果有一点点帮助的话，不妨点个赞和关注吧，也欢迎一起交流学习，本篇文章就到这里了，再见！

avatar
文章
阅读
粉丝