微信公众号开发

介绍

微信公众号开发文档：https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html

微信公众号管理后台界面：https://mp.weixin.qq.com/

微信公众号测试号管理后台界面：https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index

微信开发者工具下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

微信开发者工具使用

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
使用流程：打开【微信开发者工具】，选择【公众号网页调试】，将调试页面地址复制到如下即可本地调试页面

微信开发者工具

内网穿透工具

使用 cploar ，官网地址：https://www.cpolar.com/

什么是内网穿透工具：

在微信开发中我们必须将代码部署在公网服务器上才能调试（说白了就是需要微信端能够调用到你的服务器）
内网穿透工具能够将本地端口映射到它提供的一个公网域名上，通过访问这个域名来实现本地方法的调用

公众号测试号配置

URL 和 Token 配置

url:
    必须以http://或https://开头，分别支持80端口和443端口
    URL规范：比如项目的基础目录为 www.abc.com/wechat/，则URL地址为 www.abc.com/wechat

token:
    可由开发者可以任意填写，用作生成签名（该Token会和接口URL中包含的Token进行比对，从而验证安全性）

URL和Token配置

配置 JS接口安全域名

1
2
3

JS接口安全域名：
    就是当我们调用微信开发的JS接口时，使用的域名必须与配置的 JS接口安全域名一致
    这个域名可以不与上面的URL一致

JS接口安全域名

配置授权回调页面域名

授权回调页面域名:
    当我们在跳转的页面中需要调用微信公众号的接口，就必须配置这个域名地址
    这个域名可以不与上面的URL一致
    具体使用细节，参考：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

授权回调页面域名

在当前测试号页面可以看到 appId 和 secret ，配置完后就可以在项目中使用微信公众号测试号了。

appId和secret

公众号配置

在公众号中配置 URL 和 token，在【基本配置】中配置

基本配置

配置 JS域名地址和授权回调域名地址，在【公众号设置】-【功能设置】中配置

功能设置

在配置 JS域名地址和授权回调域名地址还需要在服务上配置一个txt文件，然后通过 配置的域名 + xxx.txt 能访问到。通常这个可以使用 nginx 转发实现。

域名验证

nginx 配置。将文件放置在 d:/webapps/wx/ 目录下

location /MP_verify_n5GSFAcyM6FNnI9L.txt {
  alias d:/webapps/wx/;
  index MP_verify_n5GSFAcyM6FNnI9L.txt;
}

微信认证接口

在配置 URL 对应的 controller 下需要添加微信认证，认证接口是一个 get 请求且路径只能配置为 /

/**
 * 微信认证
 *
 * @param signature
 * @param timestamp
 * @param nonce
 * @param echostr
 * @return
 */
@GetMapping("/")
@ResponseBody
public String authWechat(String signature, String timestamp, String nonce, String echostr) {
    log.info("微信请求参数：[signature={}, timestamp={}, nonce={}, echostr={}]", signature, timestamp, nonce, echostr);
    if (CommonUtil.isAnyBlank(signature, timestamp, nonce, echostr)) {
        throw new RuntimeException("请求参数非法！");
    }

    if (!checkSignature(signature, timestamp, nonce)) {
        throw new RuntimeException("请求参数非法！");
    }

    return echostr;
}

/**
 * 检查signature
 *
 * @param timestamp
 * @param nonce
 * @return
 */
public boolean checkSignature(String signature, String timestamp, String nonce) {
    StringBuilder stringBuilder = new StringBuilder();
    // 自然排序，字符串拼接
    Stream.of(token, timestamp, nonce)
            .sorted()
            .forEach(stringBuilder::append);

    String encryptSHA1 = CommonUtil.encryptSHA1(stringBuilder.toString());

    return Objects.equals(encryptSHA1, signature);
}

CommonUtil工具类

public class CommonUtil {

    /**
     * 是否存在空白的数据
     *
     * @param params
     * @return
     */
    public static boolean isAnyBlank(String... params) {
        for (String param : params) {
            if (!StringUtils.hasText(param)) {
                return true;
            }
        }
        return false;
    }

    /**
     * sha1 加密
     *
     * @param str
     * @return
     */
    public static String encryptSHA1(String str) {
        try {
            MessageDigest sha1 = MessageDigest.getInstance("SHA-1");
            byte[] hashedBytes = sha1.digest(str.getBytes());
            StringBuilder sb = new StringBuilder();
            for (byte b : hashedBytes) {
                sb.append(String.format("%02x", b));
            }
            return sb.toString();
        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
        }
        return null;
    }
}

微信事件处理接口

在配置 URL 对应的 controller 下需要添加微信事件处理，认证接口是一个 post 请求且路径只能配置为 /

/**
 * 接收普通消息/事件
 *
 * @param request
 * @return
 */
@PostMapping("/")
@ResponseBody
public String receiveMessage(HttpServletRequest request) {
    Map<String, String> map = new HashMap<>();

    try (ServletInputStream inputStream = request.getInputStream()) {
        SAXReader saxReader = new SAXReader();
        Document document = saxReader.read(inputStream);
        // 获取root
        Element root = document.getRootElement();
        // 获得所有子节点
        List<Element> elements = root.elements();
        for (Element element : elements) {
            map.put(element.getName(), element.getStringValue());
        }
    } catch (IOException | DocumentException e) {
        throw new RuntimeException(e);
    }
    System.out.println(map);
    // 回复消息
    return replyMessage(map);
}

    /**
     * 回复消息
     *
     * @param map
     * @return
     */
    private String replyMessage(Map<String, String> map) {
        String msgType = map.get("MsgType");
        String message = "";

        switch (msgType) {
            case "text":
                // TODO 消息
                break;
            case "event":
                // TODO 事件
                break;
            default:
                message = commonReply(map, "欢迎你使用公众号！");
                break;
        }
        return message;
    }

解析 xml 使用到了 xstream ， maven依赖

<dependency>
    <groupId>com.thoughtworks.xstream</groupId>
    <artifactId>xstream</artifactId>
    <version>1.4.20</version>
</dependency>

xstream拓展，除了解析 xml ，它还提供了java对象转 xml，代码如下：
- 代转 xml 的对象

@Data
@XStreamAlias("xml")
public class TextMessage {
    /**
     * 接收方账号
     */
    @XStreamAlias("ToUserName")
    private String toUserName;
    /**
     * 开发者微信号
     */
    @XStreamAlias("FromUserName")
    private String fromUserName;
    /**
     * 消息创建时间 （整型）
     */
    @XStreamAlias("CreateTime")
    private Long createTime;
    /**
     * 消息类型
     */
    @XStreamAlias("MsgType")
    private String msgType;
    /**
     * 回复的消息内容
     */
    @XStreamAlias("Content")
    private String content;
}

在实际代码中转 xml

private String commonReply(Map<String, String> map, String content) {
    TextMessage textMessage = new TextMessage();
    textMessage.setToUserName(map.get("FromUserName"));
    textMessage.setFromUserName(map.get("ToUserName"));
    textMessage.setMsgType("text");
    textMessage.setCreateTime(System.currentTimeMillis() / 1000);
    textMessage.setContent(content);

    // 将java对象转换成xml对象
    XStream xStream = new XStream();
    xStream.processAnnotations(TextMessage.class);

    return xStream.toXML(textMessage);
}

UnionID、OpenID、AppID区别

UnionID：在微信公众平台和微信开放平台中，对于同一个微信用户，无论其通过多少个不同的应用（App）或公众号登录，都会对应一个唯一的 UnionID
OpenID：每个应用（App）或公众号下，同一个微信用户的 OpenID 是不同的。这意味着即使同一个用户在不同的应用或公众号中登录，每个应用或公众号会为该用户分配一个独特的 OpenID
AppID：每个微信应用（包括小程序、公众号等）都有一个唯一的 appID，用于标识该应用

遇到的问题

前后端部署在两个服务器存在跨域问题

当前后端部署在两个服务器中，会存在跨域问题，这个时候可以在 controller 上面配置 @CrossOrigin 注解，从而允许来自该域名的跨域请求

@RestController
@RequestMapping("/wechat/")
@CrossOrigin(origins = "http://net.abc.com") // 允许来自该域名的跨域请求
public class WxBaseConfigController { ... }

微信扫描生成的二维码

微信扫描生成的二维码有两种情况：

已经关注了公众号，这时候扫描会进入【微信事件处理接口】，条件为

// xxx 表示生成二维码携带的内容
if ("subscribe".equals(map.get("Event"))
        && Objects.equals(map.get("EventKey"), "xxx")) {
    // TODO 业务处理
}

未关注公众号，这个时候扫描也会进入【微信事件处理接口】，但条件变为

// 此时 EventKey 的内容等于 qrscene_ + xxx，其中xxx为二维码携带的内容
if ("SCAN".equals(map.get("Event"))
        && Objects.equals(map.get("EventKey"), "qrscene_xxx")) {
    // TODO 业务处理
}

生成公众号二维码参考：https://developers.weixin.qq.com/doc/offiaccount/Account_Management/Generating_a_Parametric_QR_Code.html

微信公众号将当前页面转成图片并下载

前置条件：微信公众号前端使用的是 vue3 写的

我使用的是 vue 的 html2canvas 实现的，部分代码如下：

<script setup lang="ts">

import html2canvas from "html2canvas";

const btnClickDownload = () => {
    
    var content = document.getElementById("flexGird");
    if (content) {
        app.data.showPic = true;
        html2canvas(content).then(canvas => {
            //添加属性
            canvas.setAttribute('id', 'thecanvas');
            var base64Image = document.getElementById('base64Img');
            const img = canvas.toDataURL('image/png'); // 将canvas转换为base64图片格式
            if (base64Image) {
                base64Image.setAttribute("src", img);
            }
        });
    }
};

</script>
<template>
    <div>
        <div class="container" id="flexGird">
            <div>需要生成图片的页面</div>
        </div>

        <div class="btn-box">
            <div class="button" @click="btnClickDownload">下载图片</div>
        </div>
    </div>
</template>

<style scoped>
</style>