【完美解决】微信测试公众号消息显示存在的字数限制问题

【完美解决】微信测试公众号消息显示存在的字数限制问题

前言

• 好久不见呀，朋友们，没想到这么快我们又见面了，从年更变成月更博主了哈哈~
• 这次我打算讲一讲最近解决的一个困扰我很久的一个问题：微信测试公众号消息显示存在的字数限制问题
• 我觉得很完美、很优雅的一个方案，当然，如果你有更好的方案，欢迎大家来交流交流~

问题描述

消息模板
消息内容	参数content1/2/3/4/5 传的内容都是：测试1测试2测试3测试4测试5测试6测试7测试8测试9测试10测试11测试12测试13测试14测试15测试16测试17测试18测试19测试20
卡片结果

问题显而易见，即：每一个参数最多只能显示前29个字符，剩下的都变成…了，不能显示出所有的内容！！！

解决方案

从官方文档中可以看到消息接口提供了一个url的传参，即点击消息卡片内容会跳转到对应的链接：

• 那么，就可以利用这个url这个传参，将我们实际要发送的全部内容放到跳转后的url里面显示，就能完美解决字符限制的问题了！！！
• 我们知道，一个url里面是可以传参数的，如百度一下：https://www.baidu.com/s?wd=七里香还是稻香 ，后面的wd参数就是接收所要搜索的内容，那么我们可以将消息内容直接放到url的参数上就可以了
• 但是，要提供url，意味着要拥有自己的服务器、自己的域名然后开发一个接收参数的接口并对外开放才行，那么，有没有现成的网站可以提供类似的功能？或者可以编写类似功能的网站？答案是有的，就是：GitHub Pages

效果展示

消息模板
消息内容
详情跳转

可以看到，消息模板中并没有配置任何的参数，因为我将需要发送的全部内容传给了我创建的GitHub Pages：Display Content，通过url中的参数content来进行传输，网站自动识别参数content里的内容并展示了出来！！！

---

实现过程

一、创建GitHub Pages项目

• 在互联网上，众多优秀的项目案例可供借鉴，其中不乏体系完整的作品，例如个人博客和知识文档等完善的GitHub Pages项目
• 然而，我的需求相对简单，仅希望通过解析url中的参数来自定义显示内容，无需构建功能复杂、完备的网站。
• 基于此，以下是我在GitHub Pages上实现项目的具体步骤：

（1）创建一个公开的GitHub仓库
（2）编写并上传文件名为：index.html的文件到仓库中
（3）在仓库的“设置”（Settings）中启用Pages服务，并指定项目的启动路径
（4）稍等片刻，即可通过浏览器访问属于自己的GitHub Pages项目站点
（5）网址一般形如：https://{username}.github.io/{repositoryname}/，其中，username为GitHub用户名，repositoryname为仓库名
（6）项目将自动监测仓库文件的变动与修改，实现实时更新部署与发布

二、index.html中的javascript核心逻辑

• 利用window.location.search来获取url中的参数内容，并将常见的url编码还原为原来的字符

function decodeUrlEncodedString(encodedStr) {
   
    // 替换常见的URL编码字符
    const urlEncodedChars = {
   
        '%20': ' ', // 空格
        '%21': '!', // 叹号
        '%22': '"', // 双引号
        '%23': '#', // 井号
        '%24': '$', // 美元符号
        '%25': '%', // 百分号
        '%26': '&', // 和号
        '%27': "'", // 单引号
        '%28': '(', // 左括号
        '%29': ')', // 右括号
        '%2A': '*', // 星号
        '%2B': '+', // 加号
        '%2C': ',', // 逗号
        '%2F': '/', // 斜杠
        '%3A': ':', // 冒号
        '%3B': ';', // 分号
        '%3C': '<', // 小于号
        '%3D': '=', // 等于号
        '%3E': '>', // 大于号
        '%3F': '?', // 问号
        '%40': '@', // 花号
        // ... 可以继续添加其他需要的编码
    };

    // 替换所有已知的URL编码字符
    return encodedStr.replace(/%[0-9A-F]{2}/gi, function(match) {
   
        return urlEncodedChars[match] || match; // 如果没有匹配的编码，则返回原字符
    });
}

function getBase64ContentFromUrl(url) {
   
    // 使用正则表达式匹配 'content' 参数
    const regex