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实时消息推送服务专家 最简单的方式将消息从服务器端推送至客户端 最简单的 ...
随机推荐
- 高性能/并发的保证-Netty在Redisson的应用
前言 Redisson Github: https://github.com/redisson/redisson Redisson 官网:https://redisson.pro/ Redis ...
- 微信小程序之界面交互反馈
交互反馈就是在用户出发某事件之后,给用户一个反馈信息,这要是一个很友好的习惯. 在小程序中是通过一下几种方式实现的: 1.wx.showToast()方法 showToast: function (p ...
- django中设置定时任务
django中设置定时任务 在django中设置定时任务我们可以借用django-crontab这个第三包来实现 django-crontab只能在linux系统下使用 安装: pip install ...
- Javascript 入门 必备知识点
1.如何得到html的input标签的值: (1). $('#id').val(); (2). $("#id").attr("value"); 2.javasc ...
- 中阶d03.1 JDBCDemo
1. jdbc使用查看驱动的doc文档<connector-j.html> 2.代码实现:1. 注册驱动---2. 建立连接---3. 创建statement ,跟数据库打交道--- -- ...
- lr组织架构模式
基本模式:默认目录由三部分组成 Vuser_int Action,…… Vuser_end 执行时会按照这三个顺序执行(Action部分是可以循环的,也可多个action) 1.lr12录制前可以设置 ...
- cgdb使用方法
cgdb --args [exe_name] [arg1] [arg2] [arg3] [...] 进入代码窗口 按ESC键 进入调试窗口 按i键 调试命令 r 运行 n 单步执行(不进入函数) s ...
- Spring+Hibernate整合配置 --- 比较完整的spring、hibernate 配置
Spring+Hibernate整合配置 分类: J2EE2010-11-25 17:21 16667人阅读 评论(1) 收藏 举报 springhibernateclassactionservlet ...
- Pandownload作者被抓之后
近日,pandownload作者被抓,可以说是圈内的大事件,被抓之后, Pandownload 已经是打不开,用不了了 就在我为此感到惋惜的时候,竟然有出来个shengdownload 先来一块看看这 ...
- Opencv for android 模板匹配
因为有这方面的需要所以,对模板查找搜寻了相关资料,只是对于算法的东西很难看得动,特别是opencv涉及的很多的数学方法. 所以只为了实现这个功能,因为需求比较简单,在网上也搜寻到了相关代码,就直接拿来 ...