如何优雅的编辑企业微信推送内容模板生成自己想要的样子

咳咳,新年第一炮,哦不,新年第一发,感觉哪里不对,新年第一帖!

企业微信推送大家都会了,但是某某在说了,样子不美丽,推送的显示太粗糙,看着别人的推送内容那么美,各种羡慕!那是因为你没化妆啊!

下面我们来进行化妆教学示范。。 :thinking:

首先看一下企业微信关于图文消息的描述

有图文消息和图文消息(mpnews)2个实现方式,图文消息点开直接跳转到网页,这个不适合,直接跳过。我们用图文消息(mpnews),这里还有一点原因:mpnews类型的图文消息,跟普通的图文消息一致,唯一的差异是图文内容存储在企业微信。看懂没,图文内容存储在企业微信!

直切正题,先看一下消息结构

//前面加了//的项表示可以不要
msg.payload = {
   "touser" : "id",  //成员ID列表(消息接收者,多个接收者用‘|’分隔,最多支持1000个)。特殊情况:指定为@all,则向关注该企业应用的全部成员发送
   //"toparty" : "PartyID1 | PartyID2", //部门ID列表,多个接收者用‘|’分隔,最多支持100个。当touser为@all时忽略本参数
   //"totag": "TagID1 | TagID2", //标签ID列表,多个接收者用‘|’分隔,最多支持100个。当touser为@all时忽略本参数
   "msgtype" : "mpnews", //消息类型,此时固定为:mpnews
   //"agentid" : 1000002, //企业应用的id,整型。企业内部开发,可在应用的设置页面查看
   "mpnews" : {
       "articles":[ //图文消息,一个图文消息支持1到8条图文,即下方一个{}表示一条消息
           {
               "title": `标题,不超过128个字节,超过会自动截断`, 
               "thumb_media_id": "图文消息缩略图的media_id, 可以通过素材管理接口获得。此处thumb_media_id即上传接口返回的media_id",//`${msg.payload.media_id}`,
               //"author": "图文消息的作者,不超过64个字节",
               //"content_source_url": "图文消息点击“阅读原文”之后的页面链接",
               "content": `图文消息的内容,支持html标签,不超过666 K个字节`,
               "digest": "图文消息的描述,不超过512个字节,超过会自动截断"
            }
       ]
   },
   "safe":0
}

好,接下来我们组装一下,先搞个测试流

image

这时,微信收到消息

image

打开后

上面的正文使用Markdown Nice进行排版

供导入测试:

[{"id":"cb4ed0e9.cc2","type":"bizwechat-push","z":"6744922e.a497ec","name":"推送微信","bizwechat":"8a940403.c886a8","x":2700,"y":2040,"wires":[["87b361e5.e3461"]]},{"id":"d15d3564.f90738","type":"function","z":"6744922e.a497ec","name":"mpnews","func":"msg.payload = {\n   \"touser\" : \"AAA\",\n   \"msgtype\" : \"mpnews\",\n   \"mpnews\" : {\n       \"articles\":[\n           {\n               \"title\": `测试  ${msg.filename}`, \n               \"thumb_media_id\": `${msg.payload.media_id}`,\n               //\"author\": \"Author\",\n               //\"content_source_url\": \"URL\",\n               \"content\": `<section id=\"nice\" style=\"padding: 10px; line-height: 1.6; word-spacing: 0px; letter-spacing: 0px; word-break: break-word; word-wrap: break-word; text-align: left; font-size: 16px; margin-top: -1em; color: #333; padding-top: 0; padding-bottom: 0; font-family: -apple-system,system-ui,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;\"><h1 style=\"margin-top: 40px; margin-bottom: 20px; font-weight: bold; margin: 1em 0; color: #333; font-size: 1.4em; padding-bottom: .3em; border-bottom: 1px solid #dfe2e5; line-height: 1.6 !important;\"><span style=\"line-height: 1.6 !important;\">感谢使用本容器</span></h1>\n<h3 style=\"margin-top: 40px; margin-bottom: 20px; font-weight: bold; margin: 1em 0; color: #333; font-size: 1.2em; line-height: 1.6 !important;\"><span style=\"line-height: 1.6 !important;\">通过本容器您将获得</span></h3>\n<ul style=\"margin-top: 8px; margin-bottom: 8px; padding-left: 25px; list-style-type: disc; margin: 1em 0; color: #333; line-height: 1.6 !important;\">\n<li style=\"line-height: 1.6 !important;\"><section style=\"margin: 1em 0; text-align: left; color: rgb(1,1,1); margin-top: .3em; margin-bottom: .3em; font-weight: normal; line-height: 1.6 !important;\">ioBroker - 设备接入与控制</section></li><li style=\"line-height: 1.6 !important;\"><section style=\"margin: 1em 0; text-align: left; color: rgb(1,1,1); margin-top: .3em; margin-bottom: .3em; font-weight: normal; line-height: 1.6 !important;\">Home Assistant - UI 展示与控制(上墙平板、安卓手机客户端)</section></li><li style=\"line-height: 1.6 !important;\"><section style=\"margin: 1em 0; text-align: left; color: rgb(1,1,1); margin-top: .3em; margin-bottom: .3em; font-weight: normal; line-height: 1.6 !important;\">HomeKit - 语音控制(苹果手机友好)</section></li><li style=\"line-height: 1.6 !important;\"><section style=\"margin: 1em 0; text-align: left; color: rgb(1,1,1); margin-top: .3em; margin-bottom: .3em; font-weight: normal; line-height: 1.6 !important;\">Node-Red - 自动化</section></li><li style=\"line-height: 1.6 !important;\"><section style=\"margin: 1em 0; text-align: left; color: rgb(1,1,1); margin-top: .3em; margin-bottom: .3em; font-weight: normal; line-height: 1.6 !important;\">Mqtt - 数据传输、设备通讯</section></li><li style=\"line-height: 1.6 !important;\"><section style=\"margin: 1em 0; text-align: left; color: rgb(1,1,1); margin-top: .3em; margin-bottom: .3em; font-weight: normal; line-height: 1.6 !important;\">influxdb - 数据库</section></li><li style=\"line-height: 1.6 !important;\"><section style=\"margin: 1em 0; text-align: left; color: rgb(1,1,1); margin-top: .3em; margin-bottom: .3em; font-weight: normal; line-height: 1.6 !important;\">Grafana - 数据可视化</section></li><li style=\"line-height: 1.6 !important;\"><section style=\"margin: 1em 0; text-align: left; color: rgb(1,1,1); margin-top: .3em; margin-bottom: .3em; font-weight: normal; line-height: 1.6 !important;\">Node-Media-Server - 摄像头直播平台</section></li></ul>\n</section>`,\n               \"digest\": \"这里是简介内容的测试这里是简介内容的测试这里是简介内容的测试这里是简介内容的测试这里是简介内容的测试这里是简介内容的测试这里是简介内容的测试这里是简介内容的测试这里是简介内容的测试这里是简介内容的测试这里是简介内容的测试这里是简介内容的测试这里是简介内容的测试这里是简介内容的测试这里是简介内容的测试这里是简介内容的测试\"\n            }\n       ]\n   },\n   \"safe\":0\n}\nreturn msg;","outputs":1,"noerr":0,"x":2540,"y":2040,"wires":[["cb4ed0e9.cc2"]]},{"id":"a45b1297.891a4","type":"inject","z":"6744922e.a497ec","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":2390,"y":1960,"wires":[["e187cc1f.f24b2"]]},{"id":"87b361e5.e3461","type":"debug","z":"6744922e.a497ec","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":2870,"y":2040,"wires":[]},{"id":"e1393b56.ae7908","type":"bizwechat-upload","z":"6744922e.a497ec","name":"","bizwechat":"8a940403.c886a8","x":2940,"y":1960,"wires":[["d15d3564.f90738"]]},{"id":"e187cc1f.f24b2","type":"file in","z":"6744922e.a497ec","name":"","filename":"/opt/iobroker/cover.jpg","format":"stream","chunk":false,"sendError":false,"encoding":"binary","x":2580,"y":1960,"wires":[["60ee475f.96d038"]]},{"id":"60ee475f.96d038","type":"function","z":"6744922e.a497ec","name":"","func":"msg.type = \"image\"; //上传临时文件必须要的\nmsg.filename = \"cover.jpg\"; //文件名可以随便写\nreturn msg;","outputs":1,"noerr":0,"x":2770,"y":1960,"wires":[["e1393b56.ae7908"]]},{"id":"8a940403.c886a8","type":"bizwechat-configurator","z":"","name":"导出专用","port":"","corpid":"","agentid":"","corpsecret":"","url":"","token":"","aeskey":"","client_id":"","client_secret":""}]

接下去我们看案例2

先看效果

下面开始讲解

一般看到这个,一定是这样想的,卧槽,这得学CSS吧,好难,放弃。。

其实,可以不用那么麻烦,因为是微信系统的,排版和公众号的原理一致,有模板可以套用!有模板可以套用!有模板可以套用!

这次我们用135编辑器来实现我们要的美 :smile:
打开编辑器,我们先看一下

左边选择样式,右边编辑并看效果,编辑完后,点HTML按钮,切换到源码,复制

我们把复制的内容黏贴到content中,再看看效果吧

疑难处理

这时,有人要问了,我要推送不同的内容,可是这个是写死的啊!
很好,有没有发现我们用的引导很特别? 是 `` 而不是 ‘’ 或者 “”
我们用${msg.payload.xxx} 或者 ${msg.xxx} 从前面的节点获得所需的数据,
重新修改一下内容,把固定的文字改成${msg.payload.xxx} ,再试试吧

好多我喜欢的模板要收费的啊!!!坑爹 :sob:
别怕,我们开启Chrome浏览器的开发者模式,咦右键不行,没事,CRTL+SHIFT+I
咦,还是不能用右键啊!没事

我们一层一层剥洋葱

image

每一个li标签就是一个效果

我们鼠标一个个往下,当我们想要的效果被选中了,就找到了,接着我们继续剥这个

image

圈出的这层我们不需要,框出的就是我们需要的源码,我们在上面鼠标右键,Copy,Copy element,搞定!我们把这个源码继续复制到编辑器里根据自己需要编辑

前排坐好,感谢三木

强帖,占位 :grinning:

牛批 进来学习一下

2020的第一炮

支持,,有空我在玩玩 :smile:

认真学习,反复推敲,终于初步搞明白了,感谢三木大神

样式教程有了,可是做些设呢内容呢?………………愁