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: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, 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, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;">&nbsp;请看题：以下哪个是
        </span>
        <span style="font-size: 15px;text-align: left;font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, 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, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;">？
        </span>
    </span>
    <br  />
</p>

2.2 插入图片

以下的内容由多个section标签嵌套构成，我们只需要替换下面2.3节第二个代码框中第5行的background-image后面跟着的url即可。

需要注意的是，替换时只需要更改中间的图片链接，开始处的 (" 和结尾的 ") 都不需要动。

url(&quot;https://baike.so.com/gallery/listghid=first&pic_idx=1&eid=1395020&sid=1474879&quot;)

图片链接可以选择网络图片-右键-复制链接地址，也可以先从本地上传图片到网络（比如传到私人博客或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(&quot;https://baike.so.com/gallery/list?ghid=first&pic_idx=1&eid=1395020&sid=1474879&quot;);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: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, 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, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;">&nbsp;请看题：以下哪个是
        </span>
        <span style="font-size: 15px;text-align: left;font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, 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, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, 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(&quot;https://p1.ssl.qhimg.com/t010a1dd1ad2b57a3b0.jpg&quot;);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个小时搜集整理了相关资料，希望努力没有白费，也但愿逐梦之路能够坚持，立此为证。

　　五一劳动节，要更加努力啊！

posted on 2020-05-01 16:25 Mju_halcyon 阅读(740) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？