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实时消息推送服务专家 最简单的方式将消息从服务器端推送至客户端 最简单的 ...
随机推荐
- F - F HDU - 1173(二维化一维-思维)
F - F HDU - 1173 一个邮递员每次只能从邮局拿走一封信送信.在一个二维的直角坐标系中,邮递员只能朝四个方向移动,正北.正东.正南.正西. 有n个需要收信的地址,现在需要你帮助找到一个地方 ...
- 牛客寒假基础集训营 | Day1 E-rin和快速迭代（暴力 + 优化）
E-rin和快速迭代 题目描述 rin最近喜欢上了数论. 然而数论实在太复杂了,她只能研究一些简单的问题. 这天,她在研究正整数因子个数的时候,想到了一个"快速迭代"算法.设 f( ...
- IO 流
------------恢复内容开始------------ 一.流的简介 输入流:把硬盘中的数据读取到内存中 输出流:把内存中的数据读取到硬盘中 1字符=2字节 1字节=8位 1.2顶级父类 二. ...
- scratch中如何实现面向鼠标指针的相反方向？
你可以试试设置面向鼠标指针,然后再角色进行翻转,而且要是面向反方向的话,鼠标指针是自己可以调节的,面向指针也可以的 scratch学习视频 链接:https://pan.baidu.com/s/1qX ...
- golang--安装golang并安装grpc-grpcgateway环境
安装goland环境 下载golang安装包,国内环境打开https://studygolang.com/dl,国外环境打开https://golang.google.cn/dl/下载对应系统的安装包 ...
- uni-app商城项目(01)
1.项目准备: 1.新建项目,清理项目结构 2.完成项目初始化配置. 2.项目开始阶段: 1.完成tabBar配置,新建需要的页面 2.在 '/utis'封装需要的发送请求api,有利于功能的实现. ...
- 7.4 private 成员变量的私有
/* * 学生类(age不能为负数.将age参数私有,创建方法判断age不为负.被private修饰的成员只能在本类中被访问,若想访问可以使用get.set方法) * * 通过对象直接访问成员变量,会 ...
- Spring+Hibernate整合配置 --- 比较完整的spring、hibernate 配置
Spring+Hibernate整合配置 分类: J2EE2010-11-25 17:21 16667人阅读 评论(1) 收藏 举报 springhibernateclassactionservlet ...
- Hibernate框架 jar包介绍
一直使用my eclipse集成的Hibernate来学习.最近在写hibernate的日记,写到搭建hibernate框架的时候才发现自己对hibernate的内容还是不了解,决定自己手动搭建一下. ...
- AJ学IOS 之CoreLocation指南针小应用
AJ分享,必须精品 一:效果图示 简单的用到CoreLocation获取方位做的指南针小应用 二:制作思路 具体用到了CoreLocation相关的知识,请看上一篇博客有写 然后获取方向不需要进行授权 ...