手动制做微信h5分享活动页面

如今网上有不少自动制做h5宣传页的网站，能够经过传图，点几下鼠标就能够制做一个集动画、生产二维码等各类功能于一身的h5微信宣传页。对于运营来说，很是方便，没有技术门槛，不足之处就是只有特定的动画效果，并且生成的h5带有这个网站本身的logo也好，本身的打点代码也好，总之，看我的爱好啦~

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

 

首先，自适应手机分辨率。

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

  

 

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

1.给body设置相近颜色。

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

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

在加载页面的时候，先用js判断屏幕的长和宽，window.innerWidth，window.innerHeight能够得出窗口的文档显示区，再量出设计稿的文档大小如psdWidth，psdHeight；

var widthScale = window.innerWidth / psdWidth;
var heightScale = window.innerHeight/psdHeight;

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

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

#h5content{
webkittransform:scale(0.7261904761904762);//scale即为计算出来的widthScale或者heightScale
transform:scale(0.7261904761904762); 
-webkit-transform-origin:0 0;
transform-origin:0 0;
top:0px;
left:-26.38095238095238px;
}

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

top: (window.innerHeight - uiHeight*scale)/2 + 'px';
left: (window.innerWidth - uiWidth*scale)/2 + 'px';

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

3.多套图。

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

 

其次，总体布局。

咱们知道了如何适应不一样的手机，接下来就是着手作h5了。

整个页面是呈如今一个html上的，不一样的页面之间经过div的滑动模拟页面切换。

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

 

上图的body包括两部分，img和div#h5content:

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

2）h5content里面就是全部h5页面的集合啦，一个页面一个div，在这个div中，按照设计稿来制做相应页面的事件和动画。

注意：在这里若是对自适应要求很高的话，尽可能使用图片，由于其能够根据自身比例调整大小；不过一些文字，则须要使用百分比的方式进行自适应的位置及大小设定。还有，能够的话尽可能把图放在一张大图上，减小请求数目。

 

加载页面动画

加载动画能够监听页面图片的load事件来设定,

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

如：

var num = $('.bg img').length;
 
$('.bg img').load(function(){
  num--;
  if (num > 0) {
    return;
  }
  console.log('load compeleted');
}

 

js的onload事件也能够完成相应的功能。

 

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