手動製做微信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要帶上手機特定的那些設置，一些經常使用的美麗動畫要熟悉~~接下來就愉快的去作頁面吧。