HTML入门——互动式推送初尝试
0.背景
疫情原因，导致许多大众喜闻乐见的体育活动停摆，但博主和队友们运营的体育社团公众号不能停摆。为了利用当下线上活动频率高的契机增加关注量，加之微信推送的互动性已成为趋势，博主打算和队友们尝试实现互动式推送，在此分享一些自己整理的经验。不奢求达到“涂小瓶子”“点亮武汉”等活动的风靡程度，但求所有努力能得到用户滴认可。
1.HTML格式简介
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。参考来源：菜鸟教程网站。
HTML文件由文件头、主体等部分组成，最大的特点是标签化管理。
注意，一个标签（例如a标签）的开始与结尾分别用<a></a>表示，也可以表示为<a />，部分不规范的HTML文档会省略后面的</a>。
标签的内容放在两个尖括号之间，标签的属性放在尖括号"里"，像这样：<style type="text/css">，表示style标签的type属性为"text或者css"
（注：CSS是层叠样式表(Cascading Style Sheets)，以下是从菜鸟教程网站上搬过来的CSS简单介绍
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
此处不必细究，会套用示例就行。
2.示例
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<style type="text/css">
body {background-color:white}
p {color:purple}
</style>
</head>
这是示例的HTML文件头部，下面进入主体部分。
此处参考文章为：网易王三三的《绝对色感の挑战：不 瞎 算 你 赢》 ，示例的大部分代码来自于该文章，仅做学习用途。
2.1 插入文字
p标签代表一段话(paragraph)，可以设置风格样式、页面位置等，我们要显示的文字在这里放在<span>标签下，大家把“请看题：以下哪个是”用需要显示的内容替换即可。
另外，我们注意到下面代码第8行的span标签多了一个color: rgb(204, 0, 0);的color属性，说明对这半句话“中国乒乓球队队服的主流颜色”的字体颜色进行了设置，为了突出显示。颜色就是RGB格式的(204, 0, 0)，如果第一个参数==255且后两个参数为0，即为纯正的红色。
<body>
<p style="max-width: 100%;min-height: 1em;white-space: normal;margin-left: 16px;margin-right: 16px;line-height: 1.75em;letter-spacing: 0.5px;font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;box-sizing: border-box !important;overflow-wrap: break-word !important;">
<span style="font-size: 15px;">
<span style="font-size: 15px;text-align: left;font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;"> 请看题：以下哪个是
</span>
<span style="font-size: 15px;text-align: left;font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;box-sizing: border-box;color: rgb(204, 0, 0);">中国乒乓球队队服的主流颜色
</span>
<span style="font-size: 15px;text-align: left;font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;">？
</span>
</span>
<br />
</p>
2.2 插入图片
以下的内容由多个section标签嵌套构成，我们只需要替换下面2.3节第二个代码框中第5行的background-image后面跟着的url即可。
需要注意的是，替换时只需要更改中间的图片链接，开始处的 (" 和结尾的 ") 都不需要动。
url("https://baike.so.com/gallery/listghid=first&pic_idx=1&eid=1395020&sid=1474879")
图片链接可以选择网络图片-右键-复制链接地址，也可以先从本地上传图片到网络（比如传到私人博客或BBS），只要能保证图片链接在使用期内不会丢失即可。（靠谱的网站不会倒闭，不要选择新 浪 微 博 相 册这种会下线的功能就行）
2.3添加 点击-切换到背景图片 动画
生成动画的标签为svg，用svg绘图的文章一搜一大把，在此不赘述了。svg下面的具体动画动作标签为animate，以下面的动画标签为例：简便起见，我们只关注fill、from、to、duration、begin标签。
- fill="freeze"代表动画效果展示完毕后保留，可选相对应的属性为"remove"，代表完成后去除动画效果。
- from和to代表状态的变化，"0"代表透明，"1"代表完全不透明，从1变为0即为“图片消失”效果，反之，“图片出现”。btw, 其他标签可能有的属性opacity也是透明度的意思。
- begin代表动画触发机制，可选值为点击"click"、点击+滞后时间"click+0.1s"、打开页面后一定时间内自动触发"2000ms"、"0.16s"等。
- duration代表动画完成需要的时长。
<animate attributename="width" style="box-sizing: border-box;" fill="freeze" to="0" from="1" duration="0.01" begin="click + 0.1s"
</animate>
以下是一个完整section的内容，包含了图片显示的box位置、大小，图片链接，动画效果。
要实现的效果是，打开页面时展示红色图片，点击图片后显示张继科身着西红柿炒鸡蛋色球服图片。
红色图片不是插入的外部图片，可绘制红色填充矩形得到，搜索<rec>标签即可。
红色图片的动画是“点击-立刻从1不透明到0透明”，点击后，接着会触发背景图片（科科+球服图片）的动画“点击-0.1s后-从0透明到1不透明”。
<section style="box-sizing: border-box;font-size: 16px;">
……
<section style="background-image: url("https://baike.so.com/gallery/list?ghid=first&pic_idx=1&eid=1395020&sid=1474879");background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;background-attachment: scroll;width: 95%;margin-left: auto;margin-right: auto;box-sizing: border-box;"><section class="group-empty" style="display: inline-block;width: 100%;height: 105px;vertical-align: top;overflow-y: auto;border-style: none;border-width: 0px;border-radius: 10px;border-color: rgb(62, 62, 62);box-sizing: border-box;-webkit-overflow-scrolling: touch;"></section></section><section style="box-sizing: border-box;margin-top: -105px;height: 105px;">
<section class="top-div" style="height: 100%;box-sizing: border-box;">
<svg class="svg-layout-content root-svg" width="95%" height="100%" xmlns="http://www.w3.org/2000/svg" style="box-sizing: border-box;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);width: 95%;" opacity="1">
<animate class="init-width-animation" attributename="width" style="box-sizing: border-box;" fill="freeze" to="95.00%" from="95.00%" begin="0s" duration="0.01">
</animate>
<animate attributename="width" style="box-sizing: border-box;" fill="freeze" to="0" from="1" duration="0.01" begin="click + 0.1s">
</animate>
……
</section>
3.示例的完整代码
注意：微信公众号编辑器无法直接对HTML代码进行转换，可以先在其他编辑器中点击html转换按钮转换后，选择复制正文（而不是编辑框中的代码）粘贴到微信公众号编辑器中。
以135编辑器https://www.135editor.com/为例，先点击HTML转换按钮，再选择右侧-微信复制即可。另外可点击右侧-手机预览，在手机端扫描临时链接查看效果。如下图所示：
示例的完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<style type="text/css">
body {background-color:white}
p {color:purple}
</style>
</head> <body> <p style="max-width: 100%;min-height: 1em;white-space: normal;background-color: rgb(255, 255, 255);margin-left: 16px;margin-right: 16px;line-height: 1.75em;letter-spacing: 0.5px;font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;box-sizing: border-box !important;overflow-wrap: break-word !important;">
<span style="font-size: 15px;">
<span style="font-size: 15px;text-align: left;font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;"> 请看题：以下哪个是
</span>
<span style="font-size: 15px;text-align: left;font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;box-sizing: border-box;color: rgb(204, 0, 0);">中国乒乓球队队服的主流颜色
</span>
<span style="font-size: 15px;text-align: left;font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;">？
</span>
</span>
<br />
</p> <section style="box-sizing: border-box;font-size: 16px;">
<section style="text-align: center;margin-top: 10px;margin-right: 0%;margin-left: 0%;box-sizing: border-box;" powered-by="xiumi.us">
<section style="display: inline-block;vertical-align: top;width: 33.33%;padding: 3px;box-sizing: border-box;">
<section style="box-sizing: border-box;" powered-by="xiumi.us">
<section style="background-image: url("https://p1.ssl.qhimg.com/t010a1dd1ad2b57a3b0.jpg");background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;background-attachment: scroll;width: 95%;margin-left: auto;margin-right: auto;box-sizing: border-box;"><section class="group-empty" style="display: inline-block;width: 100%;height: 105px;vertical-align: top;overflow-y: auto;border-style: none;border-width: 0px;border-radius: 10px;border-color: rgb(62, 62, 62);box-sizing: border-box;-webkit-overflow-scrolling: touch;"></section></section><section style="box-sizing: border-box;margin-top: -105px;height: 105px;">
<section class="top-div" style="height: 100%;box-sizing: border-box;">
<svg class="svg-layout-content root-svg" width="95%" height="100%" xmlns="http://www.w3.org/2000/svg" style="box-sizing: border-box;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);width: 95%;" opacity="1">
<animate class="init-width-animation" attributename="width" style="box-sizing: border-box;" fill="freeze" to="95.00%" from="95.00%" begin="0s" duration="0.01">
</animate>
<animate attributename="width" style="box-sizing: border-box;" fill="freeze" to="0" from="1" duration="0.01" begin="click + 0.1s">
</animate>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="box-sizing: border-box;">
<svg class="rect-content" width="100%" height="100%" style="box-sizing: border-box;">
<rect width="100%" height="100%" style="box-sizing: border-box;opacity: 1;fill: rgb(229, 171, 195);" x="0%">
</rect>
</svg>
<svg style="width: 100%;height: 100%;box-sizing: border-box;" version="1.1" xmlns="http://www.w3.org/2000/svg">
</svg>
</svg>
<animate attributename="opacity" style="box-sizing: border-box;" fill="freeze" dur="0.1" begin="click" from="1" to="0">
</animate>
</svg>
</section>
</section>
</section>
</section>
<section style="display: inline-block;vertical-align: top;width: 33.33%;padding: 3px;box-sizing: border-box;">
<section style="box-sizing: border-box;" powered-by="xiumi.us">
<section class="group-empty" style="display: inline-block;width: 95%;height: 105px;vertical-align: top;overflow-y: auto;border-width: 0px;border-radius: 10px;border-style: none;border-color: rgb(62, 62, 62);box-sizing: border-box;-webkit-overflow-scrolling: touch;">
</section>
<section style="box-sizing: border-box;margin-top: -105px;height: 105px;">
<section class="top-div" style="height: 100%;box-sizing: border-box;">
<svg class="svg-layout-content root-svg" width="95%" height="100%" xmlns="http://www.w3.org/2000/svg" style="box-sizing: border-box;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);width: 95%;" opacity="1">
<animate class="init-width-animation" attributename="width" style="box-sizing: border-box;" fill="freeze" to="95.00%" from="95.00%" begin="0s" duration="0.01">
</animate>
<animate attributename="width" style="box-sizing: border-box;" fill="freeze" to="0" from="1" duration="0.01" begin="click + 0.1s">
</animate>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="box-sizing: border-box;">
<svg class="rect-content" width="100%" height="100%" style="box-sizing: border-box;">
<rect width="100%" height="100%" style="box-sizing: border-box;opacity: 1;fill: rgb(255, 255, 224);" x="0%">
</rect>
</svg>
<svg style="width: 100%;height: 100%;box-sizing: border-box;" version="1.1" xmlns="http://www.w3.org/2000/svg">
</svg>
</svg>
<animate attributename="opacity" style="box-sizing: border-box;" fill="freeze" dur="0.1" begin="click" from="1" to="0">
</animate>
</svg>
</section>
</section>
</section>
</section>
<section style="display: inline-block;vertical-align: top;width: 33.33%;padding: 3px;box-sizing: border-box;">
<section style="box-sizing: border-box;" powered-by="xiumi.us">
<section class="group-empty" style="display: inline-block;width: 95%;height: 105px;vertical-align: top;overflow-y: auto;border-width: 0px;border-radius: 10px;border-style: none;border-color: rgb(62, 62, 62);box-sizing: border-box;-webkit-overflow-scrolling: touch;">
</section>
<section style="box-sizing: border-box;margin-top: -105px;height: 105px;">
<section class="top-div" style="height: 100%;box-sizing: border-box;">
<svg class="svg-layout-content root-svg" width="95%" height="100%" xmlns="http://www.w3.org/2000/svg" style="box-sizing: border-box;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);width: 95%;" opacity="1">
<animate class="init-width-animation" attributename="width" style="box-sizing: border-box;" fill="freeze" to="95.00%" from="95.00%" begin="0s" duration="0.01">
</animate>
<animate attributename="width" style="box-sizing: border-box;" fill="freeze" to="0" from="1" duration="0.01" begin="click + 0.1s">
</animate>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="box-sizing: border-box;">
<svg class="rect-content" width="100%" height="100%" style="box-sizing: border-box;">
<rect width="100%" height="100%" style="box-sizing: border-box;opacity: 1;fill: rgb(144, 238, 144);" x="0%">
</rect>
</svg>
<svg style="width: 100%;height: 100%;box-sizing: border-box;" version="1.1" xmlns="http://www.w3.org/2000/svg">
</svg>
</svg>
<animate attributename="opacity" style="box-sizing: border-box;" fill="freeze" dur="0.1" begin="click" from="1" to="0">
</animate>
</svg>
</section>
</section>
</section>
</section>
</section> <section style="margin-top: 10px;box-sizing: border-box;" powered-by="xiumi.us">
<section style="color: rgb(165, 165, 165);box-sizing: border-box;">
<p style="text-align: center;white-space: normal;box-sizing: border-box;">欢迎关注xx乒协！
<br style="box-sizing: border-box;" />▼
</p>
</section>
</section> </body> </html>
后记——
写这篇博客前，博主曾纠结于这份本应贡献给社团宣传部的内部资料是否应该公之于众，但最终认为开源有助于成长，况且源代码+技术资料本是公开的，应多多分享交流。博主作为前端小白（甚至可以说是外行人都不为过）前后利用约5-6个小时搜集整理了相关资料，希望努力没有白费，也但愿逐梦之路能够坚持，立此为证。
五一劳动节，要更加努力啊！
HTML入门——互动式推送初尝试的更多相关文章
- 李洪强iOS之集成极光推送一iOS SDK概述
李洪强iOS之集成极光推送一iOS SDK概述 JPush iOS 从上图可以看出,JPush iOS Push 包括 2 个部分,APNs 推送(代理),与 JPush 应用内消息. 红色部分是 A ...
- SignalR快速入门 ~ 仿QQ即时聊天，消息推送，单聊，群聊，多群公聊（基础=》提升）
SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=>提升,5个Demo贯彻全篇,感兴趣的玩才是真的学) 官方demo:http://www.asp.net/si ...
- DWR3.0框架入门（2） —— DWR的服务器推送
DWR3.0框架入门(2) —— DWR的服务器推送 DWR 在开始本节内容之前,先来了解一下什么是服务器推送技术和DWR的推送方式. 1.服务器推送技术和DWR的推送方式 传统模式的 Web ...
- Android推送 百度云推送 入门篇
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/27231237 现在app基本都有推送的功能,于是看了下百度云的推送,官方文档和D ...
- 脑残式网络编程入门(四)：快速理解HTTP/2的服务器推送(Server Push)
本文原作者阮一峰,作者博客:ruanyifeng.com. 1.前言 新一代HTTP/2 协议的主要目的是为了提高网页性能(有关HTTP/2的介绍,请见<从HTTP/0.9到HTTP/2:一文读 ...
- [入门到吐槽系列] 微信小程序 敏感违规图片检测 mediaCheckAsync，客服接口 消息推送 的各种坑分享！
前言: 最近需要做个用户上传图片,服务端校验图片问题的需求.需要使用小程序消息推送,异步接受腾讯的图片验证回调.实在太多坑了. 相信10分钟看完本文的朋友,可以非常顺利避坑. 前期准备: 首先需要一个 ...
- socket.io简单入门(一.实现简单的图表推送）
引子:随着nodejs蓬勃发展,虽然主要业务系统因为架构健壮性不会选择nodejs座位应用服务器.但是大量的内部系统却可以使用nodejs试水,大量的前端开发人员转入全堆开发也是一个因素. 研究本例主 ...
- 钉钉开发第三方H5微应用入门详细教程[ISV][免登流程][授权码][HTTP回调推送][识别用户身份][获取用户信息]
转载请注明原文地址:https://www.cnblogs.com/applerosa/p/11509512.html (by lnexin@aliyun.com 世间草木) 此教程注意点: 适用于第 ...
- web消息推送-goesay
原文:http://www.upwqy.com/details/22.html 1 GoEasy简介: GoEasy - Web实时消息推送服务专家 最简单的方式将消息从服务器端推送至客户端 最简单的 ...
随机推荐
- Golang入门（3）：一天学完GO的进阶语法
摘要 在上一篇文章中,我们聊了聊Golang中的一些基础的语法,如变量的定义.条件语句.循环语句等等.他们和其他语言很相似,我们只需要看一看它们之间的区别,就差不多可以掌握了,所以作者称它们为&quo ...
- Nordic nRF52820超低功耗蓝牙5.2 SoC芯片-低端无线连接方案首选
nRF52820是功耗超低的低功耗蓝牙 (Bluetooth Low Energy /Bluetooth LE).蓝牙mesh.Thread.Zigbee和2.4 GHz专有低端无线连接解决方案.nR ...
- binlog的作用及与redo log的区别
区别 二进制日志(bin log)会记录所有与MySQL数据库有关的日志记录,包括InnoDB.MyISAM.Heap等其他存储引擎的日志.而InnoDB存储引擎的重做日志只记录有关该存储引擎本身的事 ...
- 安卓动画（Animation使用）
安卓的Animation视图动画的使用非常简单,并且对象适用于一般控件. 具体使用步骤如下. Button/TextView/EditText/ImageView/Bitmap ..... obj ...
- Linux 文件管理篇（三 属性管理）
可读 r 可写 w 可执行 x 档案属性: 第一栏:执行list -al后第一栏的十个标志[1 - 10] 1: d 目录 - 档案 l 连 ...
- mysql> 12 simple but staple commands
Edit at: 2019-12-28 16:52:42 1.mysql -u+username -p+password --> connect mysql 2.use databasena ...
- Python操作rabbitmq系列（一）
从本文开始,接下来的内容,我们将讨论rabbitmq的相关功能.我的这些文章,最终是要实现一个项目(具体是什么暂不透露).前面每一篇,都是在为这个系统做准备.rabbitmq,是我们这个项目的关键部分 ...
- ffmpeg使用ss与t参数对视频进行剪辑
ffmpeg能够实现对视频进行剪辑操作,ss为指定视频剪切开头的起始时间,t制定视频的总长度,ss与t的单位均为:秒. ffmpeg -ss 7200 -i 1080p.mp4 -c copy -t ...
- ASP.NET Core中的Action的返回值类型
在Asp.net Core之前所有的Action返回值都是ActionResult,Json(),File()等方法返回的都是ActionResult的子类.并且Core把MVC跟WebApi合并之后 ...
- python基础：如何使用python pandas将DataFrame转换为dict
之前在知乎上看到有网友提问,如何将DataFrame转换为dict,专门研究了一下,pandas在0.21.0版本中是提供了这个方法的.下面一起学习一下,通过调用help方法,该方法只需传入一个参数, ...