微信公众号实现点击显示答案效果

利用svg的图像文件格式来实现点击之后展示文字或者图片效果。

一.打开微信公众号新建图文（或是编辑已有图文）

①右键 → 检查（编辑区域右键功能被覆盖了，找个空白的地方右键或者直接按F12进入开发者模式）

②鼠标点击右边的代码区域，随便找个地方点，再按Crtl+F，输入文字（文字可能会被分割）

如果操作区域在左边，Ctrl+F的效果是查找左边的内容，现在要做的是找到对应的代码区域，所以在右边操作
如果是顺着标签找非常麻烦，太多层级关系，直接全局搜索跟方便快捷
如图，文字可能会被分割，所以输入的内容尽量不要太多，如果没有搜索到可以换个词汇搜索

二.插入代码

如何插入代码？
右键 → 点击Edit as HTML
可以替代编辑框内所有代码或者是在代码下方加入新的代码
插入或者是替代的具体代码块
具体代码需要根据需求微调参数。插入代码之后点击其它地方，让编辑失焦，图文会自动根据修改的代码刷新，此时便大功告成，可以测试效果了~

<!-- 此处height控制显示区域高度 -->
<section style="height: 230px;overflow-x: hidden;overflow-y: auto;text-align: center;box-sizing: border-box;padding: 10px;border-width: 1px;border-style: solid;border-color: rgb(238, 238, 238);">
 <mpchecktext contenteditable="false" id="1603559997900_0.2463386146901354"></mpchecktext>
 <section style="border-width: 0px;border-style: none;border-color: initial;box-sizing: border-box;">
  <mpchecktext contenteditable="false" id="1603559997901_0.7806160681602305"></mpchecktext>
  <p style="text-align:center;margin-bottom: 10px;white-space: normal;">
   <!-- 这里的font-size可以设置文字的大小 -->
   <strong style="font-size: 14px;caret-color: red;">
    <span style="font-size: 14px;">
     <span style="line-height: 22.4px;">
      <!-- 这里是点击之后需要显示的文字或者是图片，显示图片需要http地址(需要先上传到微信) -->
      <p>答案</p>
      <img border="0" src="https://picsum.photos/100/50">
      <mpchecktext contenteditable="false" id="1603559997902_0.2770796707640486"></mpchecktext>
     </span>
    </span>
   </strong>
  </p>
  <strong style="font-size: 14px;caret-color: red;">
   <mpchecktext contenteditable="false" id="1603559997903_0.5044436455277546"></mpchecktext>
  </strong>
 </section><strong style="font-size: 14px;caret-color: red;"></strong>
</section>
<center style="box-sizing: border-box;text-align: center;">
 <strong style="font-size: 14px;caret-color: red;">
  <!-- 设置蒙板大小 -->
  <svg width="100%" height="250" xmlns="http://www.w3.org/2000/svg" style="margin-top: -350px;box-sizing: border-box;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);">
   <rect width="100%" height="250" style="fill: #fefefe;box-sizing: border-box;">
    <animate attributeName="opacity" begin="click" dur="1s" style="box-sizing: border-box;" from="1" to="0" fill="freeze"></animate>
   </rect>
   <mpchecktext contenteditable="false" id="1603559997904_0.23689150596511355"></mpchecktext>
  </svg>
 </strong>
</center>

三.关于显示图片

微信公众号显示的图片必须是素材库中的内容，所以显示图片需要将图片先上传到素材库，然后再获取图片url，将获取的url填入<img src="" /> 的src标签中即可。

获取已上传图片的url

①右键 → 检查

②复制style属性中url括号内的地址

微信公众号实现点击显示答案效果

一.打开微信公众号新建图文（或是编辑已有图文）

二.插入代码

如何插入代码？

插入或者是替代的具体代码块

三.关于显示图片

获取已上传图片的url