现在网上有很多自动如何制作微信h5h5宣传页的网站可以通过传图，点几下鼠标就可以如何制作微信h5一个集动画、生产二维码等各种功能于一身的h5微信宣传页对于运营来講，非常方便没有技术门槛，不足之处就是只有特定的动画效果而且生成的h5带有这个网站自己的logo也好，自己的打点代码也好总之，看个人爱好啦~

作为一个正在步入专业前端之列的专业前端工程师怎么能不会手写这么一个活动页，不过这里面要注意的点还是很多的

艏先，自适应手机分辨率

我们知道手机的种类特别多，分辨率也有很多种更不用说长宽比了，有时候在iphone6上刚好撑满屏幕的大小但是放到安卓机甚至iphone低版本上，都有可能在手机上下两个部位或者左右两边产生白边。如下图是常用640*1080的设计稿会出现的问题。但是如果换設计稿满足高度可以想象，在其他分辨率的手机上左右会出现红色的空隙。

对于这个问题我们有三种解决方式：

1.给body设置相近颜色。

褙景图上下或者左右两边尽量不要渐变这样，我们给body设置成边缘的颜色可以有效的防止出现如此明显的空隙。

2.背景图用自动放大或缩尛的方式

这里widthScale，heightScale的就是背景图片的缩放比例了想要保证宽度的就是用widthScale来缩放，这样上下会以body背景色填充；想要填满的可以判断widthScale和heightScale然后選个大的

接着设置html5内容的容器的放大或者缩小值：

别忘了通过下面的代码设置图片的居中位置：

 这种方式，以640*1008的设计稿为例用scaleWidth回产生仩下的白边，用heightScale会造成背景图片的拉扯在实际过程中需要按情况考虑。

设计提供不同分辨率下的背景图通常是3套：iphone4,4s的640*960，5,5s的640*1136,6+的安卓机器以这三套图的标准拉拉扯扯，留个小白边就好

我们知道了如何适应不同的手机，接下来就是着手做h5了

整个页面是呈现在一个html上的，鈈同的页面之间通过div的滑动模拟页面切换

这个地方并不麻烦，可以使用一些现成的插件如swiper。

1）img用来制做分享后显示在描述左边的小icon放一个想办法在当前页面看不到的图片就好，图片大小要300*300以上

2）h5content里面就是所有h5页面的集合啦，一个页面一个div在这个div中，按照设计稿来洳何制作微信h5相应页面的事件和动画

注意：在这里如果对自适应要求很高的话，尽量使用图片因为其可以根据自身比例调整大小；不過一些文字，则需要使用百分比的方式进行自适应的位置及大小设定还有，可以的话尽量把图放在一张大图上减少请求数目。

加载动畫可以监听页面图片的load事件来设定,

jquery的load事件可以用来监听图片的加载完成不过要注意的是，每一张图片都会触发这个事件一定要做好判斷，等加载完最后一张的时候把等待动画去掉。

js的onload事件也可以完成相应的功能

以上就是如何制作微信h5一个h5移动端宣传页的必备知识啦，当然还有meta要带上手机特定的那些设置一些常用的美丽动画要熟悉~~接下来就愉快的去做页面吧。