微信公众号文章怎么使用代码排版?

当前位置：

微信公众号文章怎么使用代码排版?

作者：鱼爪创媒网点击：194 发布时间：2022-02-26

　　有了微信公众号后，就要对微信公众号进行运营，微信运营的方式就是推广文章，好的微信文章是最好的吸粉手段，那微信公众号文章怎么使用代码排版?我们一起来看看下文的例子吧。欢迎大家来阅读。

　　需求

　　简单介绍下西窗烛 App 的信息结构，这是一款古诗词赏析应用，内置了很多经典诗词，用户可以围绕诗词发表三种类型的内容：笔记(文字)、写字(图片)、语音(音频)。

　　需求就是，如何实现一款工具，让“UGC->微信公众号文章”这个过程尽量自动化。

　　我想，这也是机器文明的理想之一：让机器人做它们最擅长做的事情，将人类从单调的工作解放出来，获得更多的自由去做更有趣的事情。

　　首先我们分析一下整个过程，如果没有机器的参与，我要怎样做这件事?大概有以下的步骤：

　　选择：从 UGC 中选择优质内容

　　排版：将内容排版成微信公众号文章

　　发表：将文章发表到公众号上

　　哪些步骤是机器可能完成的?其实都可以：

　　选择：UGC 已有点赞数、评论数等评价指标，机器可以通过这些指标判断是否为优质内容

　　排版：机器可以将内容拼接成 HTML 代码段，并赋予 CSS 样式

　　发表：机器可以每天定时将排版好的文章上传到微信，并自动发表

　　以上基本是最理想的情况，即整个过程完全无需人的参与，100% 由机器完成。无论可能遇到怎样的现实约束，我们可以先把最理想的情况描绘出来，然后去探索。

　　选择

　　按上面的分析，选择是完全可以由机器完成的，可以根据 UGC 的点赞数、评论数计算出一个质量指数，超过一个阈值即标记为优质。但这个过程，机器可能做得不好，比如点赞可能是刷出来的、评论可能是互相对骂(当然，如果加入语言情感分析，是可以解决这个问题，然而这就太麻烦了)。权衡之后，我觉得选择还是自己来做，花不了太多时间，效果却可以比机器好得多。

　　并不是机器能够做，就让它做。需在两个指标：(1)能在多大程度上节省人力(2)完成效果如何进行权衡后，再做决定。

　　排版

　　排版这件事，会耗费太多的人力，而机器完全可以做到人可以达到的效果，那就让它去做吧。

　　所以我们要达到的效果是：选择内容，自动生成微信文章。这是一个典型的数据驱动 UI 的结构，使用 React、Vue 这些 data-driven 的前端框架再适合不过。

　　我对 React 比较熟一点，所以用到了 React。整个思路非常简单：从服务器端加载当天的 UGC 数据，显示在左边，然后提供一个“选择”按钮，选中的数据就会在 React 的驱动下自动生成 HTML，呈现在右边：

　　具体代码就不贴了。有个小坑说一下，微信不支持 div 标签，解决办法是用 section 标签作为替代。

　　素材上传

　　微信不允许使用外链的音频、图片，所以文章中的音频、图片都需要上传到素材库。好在微信已经提供了用于管理素材的 API( 微信文档 )，你可以通过 Ajax 来调用，也可以直接用各语言的微信 SDK，比如 Node 的 wechat-api 、Python 的 wechat-python-sdk 。所以这个过程也是非常适合机器去做的。

　　微信对上传的素材有挺多限制：

　　图片：大小不超过 2M，支持bmp/png/jpeg/jpg/gif 格式

　　语音：大小不超过 5M，长度不超过 60 秒，支持 mp3/wma/wav/amr 格式，每篇文章仅限插入一条语音

　　对于图片来说，格式不是问题，问题是如何保证图片的大小不超过 2M?我的思路是对图片的宽和高进行限制，均不超过 1500px，经验表明，这种尺寸的图片大小一般都不会超过 2M。

　　对于语音来说就麻烦了，首先是格式，微信只支持这四种格式的话，那就需要自己来做格式转换了，我用到了 FFmpeg 这个库，在服务器上执行 ffmpeg 命令即可：

　　import shutil

　　import os

　　filename = url.split('/')[-1]

　　filename_without_extension = filename.split('.')[0]

　　download_path = '/tmp/' + filename

　　convert_path = '/tmp/' + filename_without_extension + '.mp3'

　　r = requests.get(url, stream=True)

　　if r.status_code == 200:

　　with open(download_path, 'wb') as f:

　　r.raw.decode_content = True

　　shutil.copyfileobj(r.raw, f)

　　if not any([url.endswith(extension) for extension in ['.mp3', '.wma', '.wav', '.amr']]):

　　os.system("ffmpeg -y -i " + download_path + " " + convert_path)

　　格式问题还是能够解决的，然而微信对音频的大小 & 时长限制就很头疼了，因为用户产生的语音肯定会超过 1 分钟。这样的话，音频的上传就无法自动化了，只能人工上传(人工上传没有大小和时长的限制)。

　　好吧，理想丰满，现实骨感...不过没关系，至少我们曾经努力过 :)

　　最终的操作界面如下所示，多了2个按钮：“上传图片”、“下载音频”：

　　整个排版的过程就是：

　　点击“选择”按钮选择内容

　　点击“上传图片”，将文章中的图片上传到微信，并替换原有的 url

　　点击“下载音频”，下载转换格式后的语音文件

　　发表

　　排版完成后，就可以在微信公众号发表了。接下来要做的，就是如何将排版结果上传到微信的“图文素材”。这方面的接口微信已经有了( 微信文档-新增永久图文素材 )，但问题在于，如何将 CSS 内联到 HTML 标签中，大概有 2 种方案：

　　手写内联 CSS

　　使用外部 CSS，生成文章时，通过代码将 CSS 插入到 HTML 中

　　第一种方案最直接。第二种方案最优雅，比如可以使用 Python 的 premailer 、 pynliner 来进行这种转换。

　　如果你既不想写内联 CSS，又觉得样式转换太麻烦，还有第三种方法：手动复制网页上的文章，粘贴到微信编辑器上...好吧，我就是这么做的...

　　对了，还可以用下面的代码帮你自动选中并复制到剪切板：

　　var selection = window.getSelection();

　　var range = document.createRange();

　　// 选中

　　range.selectNodeContents(document.getElementById('wechat-post'));

　　selection.removeAllRanges();

　　selection.addRange(range);

　　// 复制

　　document.execCommand('copy');

　　不幸的是，Chrome 不支持第三方 js 执行 document.execCommand('copy') ，有一些解决方案，但太麻烦，就没折腾了。

　　自动选中的效果如下：

　　按下复制键(Ctrl/Command + C)，粘贴到微信编辑器就可以啦~

　　程序员是懒惰的，一旦发现某个事情重复而枯燥，就会尝试用技术的方式去尽量它自动化起来，节省的时间，就可以去做自己更感兴趣的事情啦。

　　你可能会觉得自动化是一件非常稀奇的事情，但其实不是，生活的方方面面都有自动化的存在，比如洗衣机、网购、打电话，可以说有机器、有代码、有技术的地方，就有自动化。

　　如果从个体的视角去看待自动化，其实可以把自动化理解为：将某件事情委托给外界去做，个体只需发出指令、接收结果。那么，即使某个过程有人类的参与，也可以说是自动化的，比如你通过美团点一份外卖，外部世界就会自动帮助你完成这个过程(外卖软件、餐厅、配送人员)，做饭的时间因此被节省，你只需要在敲门声响起的时候，说声“你好，谢谢!”，就拿到了自动化的成果：一份便当。

　　自动化无处不在，并且随着人工智能技术的不断发展，会越来越深刻地影响每个人的生活。

　　但从人的角度讲，重要的不是一件事情是否能够自动化，重要的是选择。一件事情，即使完全可以 100% 自动化(而且可能比你做得更好)，但只要你喜欢、觉得有意义，就完全可以不自动化。

　　你饿了，你想美餐一顿，你完全可以拿起手机点一份外卖。但如果你喜欢做饭，享受这个过程，就完全没必要节省时间。因为时间，就应该浪费在你觉得有意义的事情上。

　　那些你选择不自动化完成的事情，充实了你的一生。

　这就是微信公众号文章怎么使用代码排版?的全部内容，希望能够对需要的朋友有一些帮助，想要了解更多的微信素材，可以访问鱼爪创媒网站哦!