【技术创作101训练营】微信无缝推文是这样炼成的
原创
演讲PPT
演讲稿
开篇
大家好，现在由我来为大家做一期技术分享，分享的主题是《微信无缝推文是这样炼成的》。
自我介绍
我的介绍很简单，我的名字是舒欣，是一名前端开发、微信开发者、腾讯云开发者。
我的名字很好记，舒服的舒，欣欣向荣的欣，希望你们待会儿听完我的分享后，会感到很舒心。
进入正题
我的日常工作，大多是在微信平台上，做H5和小程序的开发。除此之外，我偶尔会协助运营团队，做一些微信推文互动效果。
像这样的效果，几乎不需要编程基础，只需要会点 HTML 和 CSS 就能轻松实现。可对没有完全编程基础、不懂技术的运营同学来说，自己动手实现效果，是十分困难的。在大多数情况下，她们只要看到一大段代码，会感到无从下手，于是会选择向技术同学求助。而前端开发工程师，实现各式各样的页面效果，本来就属于自身的一项工作。因此微信推文样式效果的实现，由前端开发来实现是再合适不过了。
也许在场的听众朋友会问，为何不教她们写点代码呢？就算是给个模板也可以呀。不然的话，以后每次有这样的需求，岂不是每次都要帮她们做呢？
你们说的没错，其实一开始我也是这样想的。虽说授人以鱼不如授人以渔，但专业的事情还是交给专业的人士来处理会合适一些，这样也不容易出现纰漏和差错。
下面我会根据先前遇到的实际业务需求，分享一下我的问题解决思路，以及效果具体实现方式。
一个需求
某天，我收到策划小姐姐的请求，她需要在微信公众号里面做一篇推文。这个推文和以往不同，需要有两张图片无缝拼接，并且下方图片可以滚动的效果。这个效果目前用微信自带的编辑器是无法实现的，毕竟功能有限，而这个需求也相对要小众一些。即便是第三方微信编辑器有类似模板，但实际修改起来比较麻烦，效果也不尽如人意。
虽然长图滚动拼接效果，编辑起来比常规的图文混排要复杂一些，但这个效果是很不错的，在微信推文中以滑动的方式查看，具有一定趣味性，通过滑动可以看到隐藏内容，可以让人眼前一亮。
从该页PPT右侧效果图我们可以看到，图片的上面区域是固定的，下面区域是可以用手指滑动的，下面右侧也给出了“向上滑动
”的提示。通过滑动操作，我们可以看到下面隐藏的图片内容。
像这样的效果的图片有多个，需要插入到文章的多个段落间隙中。但实现原理都是一样的，只要做好了一个模板，后面只要保证图片尺寸一致，批量换图就可以直接套用了。
技术原理
实现原理很简单，主要分为两部分：
一是无缝衔接，二是固定区域滚动。
无缝衔接简单说是要让上下两张图能够拼接起来，而且拼接后不能有明显的间隙，从视觉上看起来上下是一体的。
而固定区域滚动，是在下方设置一个固定区域，这个区域的宽高是固定的，里面嵌入一张等宽长图，长图的高度是大于固定区域的，我们需要在这个固定区域中，通过向上滑动操作，来看到更多的长图内容。
下面我会把实现关键技术点进行拆分，进行详细的讲解。
技术点1：无缝衔接实现
我们的最外层盒子，是通过<section>标签来实现的，每个大的<section>中，包含上下两个小的 <section>。
上下两个 <section> 中，分别包含了上面固定图片，以及下面可滑动的长图。
由于微信公众号后台编辑器不能像以往的 html 文件那样，单独引入 css 文件实现各种样式，也不能在<head>标签中，写入 css 样式，因此我们只能使用行内 CSS 样式，来控制图片盒子的样式。
无缝衔接的核心技巧在于，使用 HTML 的section标签包裹img标签。要想让图片居中，则需要给section设置左右的 margin 为 auto，宽度为要显示的图片宽度。
在本案例中，我设置的宽度是311.5px。这样即便是在大屏手机上，也能让图片主题能够尽可能占用更大的区域，视觉效果更佳。
需要注意的是，图片的 src 路径需要提前在微信后台编辑器中上传图片，上传成功后点击图片取消勾选后，再右键复制图片链接，粘贴到src位置即可。
然而实际效果可能会和我们预想的有所出入，往往会出现两张图片依旧存在白边缝隙的问题，这时候只需要在section标签上加上margin-top:-1px即可。
如果还是有白边，继续手动调节，负值越小，两张图片的上下间距也就越小。
技术点2：固定区域图片滚动实现
固定区域滚动实现起来也并不复杂，这里使用的是一个固定的外层盒子，设置overflow-y:auto，同时设置height: 196px;，这样既能保证可视区域固定，也能使得这个区域可以进行滚动操作。
注意这里的 height 需要手动调节，多次在微信编辑器保存发送到手机预览，不断的尝试获得最合适的高度值。浏览器的效果和手机实测会有些许出入，需要耐心慢慢调节。
从上面的代码中可以看到，图片路径1表示的是上面固定大小海报，图片路径2是可以滚动的长图。
在这个环节我遇到了一个坑，那就是下面长图按照同事之前给的背景图片加图片透明的方案，会使得 iPhone 手机可视区域高度变小，导致图片显示的内容不完整，而安卓手机是正常的。
当时我经过探索后发现，这个 bug 和微信 iOS 版的页面渲染机制有关，刚发现的时候会让人有些摸不着头脑。为了修复这个 bug，我后面采用了设置section标签定高的方法，也就是和实际图片显示高度一致，精确到小数点后两位，这样无论是什么系统的手机都能完美显示了！
section背景图+img透明的方案虽然有 bug，不过有个好处，就是你不用设置section的高度了，同时你可以在审查元素中可以看到section被撑开的高度，以便于获取到合适的section高度采用后面的改进方案。因此我在固定海报的图片上用的还是之前的方案，只是滚动图片不适用而已。
最后一步
当完成了上述代码模板的制作后，就可以应用到微信公众号后台编辑器中了。
最后的代码替换，算是一个浏览器的Hack，我们可以预先准备一小段文字，那么这段文字会在编辑框中生成一个<p>标签。接着只需要按下 F12 审查元素，双击编辑这个<p>标签，把之前准备好的代码模板粘贴进去替换即可。
总结
通过上述操作，可以顺利的完成微信推文无缝滚动的效果。
这里我给大家做下总结：
- 推文滚动效果由【无缝拼接】和【固定区域滚动】两部分构成；
- 推文滚动效果实现起来并不复杂，需要进行多次微调；
- 该方案在旧机型（如iPhone5s）上会出现大约1px白边；
- <section>外层标签宽度固定为311.5px，可以适配大部分机型；
- 推文效果需要在兼容性和效果做平衡，最好提前跟设计师多沟通。
致谢
我的分享到这里就结束了，如果有朋友想继续与我交流，可以扫码加我微信，我们可以私下继续探讨。
感谢各位今天抽出宝贵时间来听我的分享，我们下次再会。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。