微信活动宣传页实践

最近大量时间参与到做一些宣传类的活动页，这里主要记录一些自己的心得。差不多一周会完成三个左右，还算比较紧凑。

选好模版

好的模板可以节省你非常多的时间，我理解的模版类似这样:

模版 = sass + es6 + webpack + server + html 

自己选用的 ykit 作为脚手架，可以很方便的进行前端工程化的配置；

其次还有比较重要的就是明确自己页面的功能类型，比如是动画效果为主，这需要选择合适的基础框架，由于自己是一页一页切换的，所以，自己选用了 swiper ,它可以很好将每个 slide 组合起来；

html 模板可以方便帮助你设置一些微信分享的 icon 和内容，这些你值需要根据自己的业务 填写响应字段或者数据就好；

微信分享

微信分享又两种链路，一种是基于 url 传递，还有一种是基于 图片的二维码形式，由于会存在被封的可能性，第二种的形式现在页比较多。很多时候大家都可以通过一个活动，计算初某种结果，然后生成一种图片，然后用户保存到自己手机。
当然第一种，也可以实现动态短链来防止被封的可能性。后面主要说第二种形式；

根据用户的动态生成的内容，比如选项或者输入，需要将 dom 结点转换成 base64 的图像，然后保存就好这里需要用到 html2canvas 的类库，它可以将某个 DOM 节点下的内容生成图像。这里有个小细节:

因为一般设计师的图像都是按照 750 * 1334 来的，这个时候，我们生成的时候最好按照 750 * 1334 输出，你可以设置 width 和 height 选项来实现，这样用户保存到手机的图像就不会出现拉升或者压缩的情况；

当然基于 cavnas 输出你就必须考虑跨域等一些问题，无论是转换成 base64 还是设置 CDN 服务器，这些都可以；

提前和设计师沟通特效

设计师在设计的时候大多都不会考虑页面重构的难易程度，因此设计出稿前的问题必须交流好，比如自己就遇见了为了一个文字特效需要到处外发光这样子 的问题，反而连设计都不好导出，我们需要衡量，这样的特效失去是否会影响整体效果。而且如果是一些需要经常变动的内容，学会 最小化 比如文字或者图像，相对而言如果你设计的文字效果特别复杂，这样只能通过切图来实现的话，我们如果直接文字是不是会更有利于开发和配置？

数据埋点

衡量一个活动是否成功？我们需要足够的数据支撑来体现，因此埋点是一件非常重要的事情，开发和产品都需要重视起来，整个活动的按钮设计，导向等，需要自己考虑是否引入埋点的链路。比如问题的每个选项，再依靠用户画像可以分析出一些规律。同意如果涉及友链的跳出，也需要进行辨别，这些数据都是需要后期复盘使用的。