摘要：移動(dòng)端活動(dòng)頁(yè)面常常需要能夠分享到各種社交中，常用的有微信等。微信二維碼問題同一個(gè)頁(yè)面里要是有兩個(gè)二維碼，長(zhǎng)按掃描總是只能掃出左側(cè)第一個(gè)二維碼。

首發(fā)于簡(jiǎn)書博客：http://www.jianshu.com/p/e958...

2017-11-25 更新：5. 使用 Gulp 拼合圖片

設(shè)計(jì)常用尺寸：750 x 1334 / 640 x 1134，包含了手機(jī)頂部信號(hào)欄的高度。

移動(dòng)端H5活動(dòng)頁(yè)面常常需要能夠分享到各種社交App中，常用的有 微信、QQ 等。

使用移動(dòng)設(shè)備查看頁(yè)面時(shí)會(huì)發(fā)現(xiàn)，在微信瀏覽器中有頂部導(dǎo)航欄，在qq內(nèi)置瀏覽器里不止有 頂部導(dǎo)航，底部也有 操作欄（safari瀏覽器也一樣），這些都會(huì)占用設(shè)計(jì)稿顯示區(qū)域，因此在 設(shè)計(jì)環(huán)節(jié) 就需要考慮內(nèi)容的多少，頁(yè)面底部要 預(yù)留一定的空白，這樣在微信或qq中才不會(huì)被遮住。

如下圖（QQ內(nèi)置瀏覽器）：頁(yè)面設(shè)計(jì)尺寸為 750 x 1334，頂部占用 150px，底部占用 110px，共占用了 260px，因此設(shè)計(jì)稿內(nèi)容應(yīng)控制在 1334-260=1074px 的高度內(nèi)。編寫代碼時(shí)，使用 Chrome 瀏覽器模擬設(shè)備大小，將該尺寸（750*1074）存下來，用于實(shí)時(shí)查看移動(dòng)端頁(yè)面效果。

如果頁(yè)面已經(jīng)寫好了，就只能按照上面的尺寸進(jìn)行內(nèi)容的調(diào)整了，縮小元素間距，縮放圖片大小等。

分享下我的失敗嘗試：

如果對(duì)整個(gè)頁(yè)面進(jìn)行縮放（使用 meta 標(biāo)簽），按照設(shè)計(jì)稿的比例，在高度滿足的情況下寬度會(huì)偏小，兩邊會(huì)有白底；

就算使用 rem 作為相關(guān)間距的單位，也沒有辦法找到一個(gè)合適的比例在兩種高度（微信/QQ）下切換，因此統(tǒng)一調(diào)成適配 QQ 的，這樣就算在微信下有多余的空白，固定底部的引導(dǎo)下滑箭頭也能使其不會(huì)過于突兀。

移動(dòng)端瀏覽器導(dǎo)航條寬度有限，簡(jiǎn)短的標(biāo)題可以使其展示完整。

二維碼圖片不要寫為元素背景，不然長(zhǎng)按沒有辦法觸發(fā)掃描功能。應(yīng)使用 img 標(biāo)簽引入，如下：

有時(shí)候掃描二維碼之后，會(huì)跳轉(zhuǎn)至某個(gè)地址，不幸的話QQ或者微信會(huì)對(duì)這個(gè)地址進(jìn)行溫馨提醒，如下圖所示：

這樣會(huì)阻止部分用戶繼續(xù)訪問，從而無法很好的將用戶引導(dǎo)到活動(dòng)想要推廣的產(chǎn)品/品牌頁(yè)面，如 App 的下載頁(yè)面等。因此二維碼的掃描測(cè)試不能少。

舉個(gè)例子，如果二維碼掃描結(jié)果是應(yīng)用的下載地址的話，可以使用應(yīng)用寶的微下載地址來生成二維碼，這是不會(huì)被“溫馨提醒”的。

如果打算先布局，后使用自動(dòng)化工具（如：gulp-sprite-generator2）將圖片拼起來（即通過 css 生成精靈圖），減少請(qǐng)求數(shù)，需要注意：在編寫 CSS 的時(shí)候，圖片寬高應(yīng)固定，圖片拼合后才能通過定位和顯示區(qū)域的寬高來展示圖片。

舉個(gè)例子，如果布局時(shí) width: 100%; background-position: center;，使用工具拼合圖片后，該元素區(qū)域（100% 的寬度）內(nèi)會(huì)將其他圖片顯示出來，這不是我們想要看到的。

建議先將圖片拼起來再布局，可以使用：gulp.spritesmith，一步獲取合并的精靈圖和對(duì)應(yīng)的 css 文件。

2017-11-25 更新：推薦一個(gè)自制的 Electron 客戶端工具 Splice（集合了常用的 gulp 插件，包括上述的兩種精靈圖生成插件）。

補(bǔ)充兩個(gè)關(guān)于使用精靈圖的問題： 
1.將多張圖片通過工具生成精靈圖和 css 文件：
如果你生成精靈圖時(shí)不小心使用了重復(fù)的圖片（文件夾里存在重復(fù)的圖片不同的名字），在手機(jī)上會(huì)出現(xiàn)圖片大小位置都出錯(cuò)的情況，雖然電腦瀏覽器（Chrome）里正常。
解決：去掉那張重復(fù)的圖片重新生成一次精靈圖和 css 就好了。
2.直接通過 css 文件生成精靈圖：
制作手機(jī)端的活動(dòng)頁(yè)面時(shí)，經(jīng)常需要翻頁(yè)的效果，可以的話最好每個(gè)頁(yè)面的圖片拼成一張精靈圖（工具提供正則篩選圖片路徑的功能）。盡量不要將所有頁(yè)面的圖片統(tǒng)一拼成一張，如果你拼完沒問題也就算了，但是我這邊遇到過同上面第一點(diǎn)一樣的問題，手機(jī)上頁(yè)面效果出錯(cuò)。
解決：最后排查不出問題，通過將多個(gè)頁(yè)面的圖片分成三張精靈圖才勉強(qiáng)度過難關(guān)。

如果將頁(yè)面鏈接直接復(fù)制分享給其他人，在手機(jī)上接收鏈接消息的用戶可能會(huì)看到鏈接的相關(guān)信息，如頁(yè)面標(biāo)題、描述和圖片。相關(guān)信息設(shè)置方式如下：

可參考 手機(jī)QQ接口文檔：setShareInfo。

問題：即使使用了如上的 image 設(shè)置方法，還是沒能顯示預(yù)期圖片？
解決：確定下你發(fā)送的鏈接格式，會(huì)不會(huì)有所省略，如：somedomain/ 或者 somedomain/index，正確的應(yīng)為 somedomain/index.html，才能正確解析到圖片。

如果是打開鏈接后，在QQ內(nèi)置瀏覽器里選擇將頁(yè)面分享出去，那一般不會(huì)出錯(cuò)。

使用自動(dòng)化工具 gulp-imagemin（教程） 來壓縮圖片，效果舉例：101 KB => 80.7 KB。后來我使用了在線工具 Tinypng 又進(jìn)行了一次壓縮，效果舉例：（上面使用 gulp-imagemin 壓縮過的圖片）80.7 KB => 38.1 KB，可見光使用自動(dòng)化工具來壓縮是不夠的，大部分圖片仍存在較大的壓縮空間，可以再扔到 Tinypng 里壓縮一下看看。

在線的 Tinypng 可以無限次使用，如果想要使用其 API 來進(jìn)行壓縮自動(dòng)化的話，可以使用 gulp-tinypng 等插件，但是有每月壓縮圖片數(shù)量限制，每月前500張圖片免費(fèi)，其他收費(fèi)情況參考官網(wǎng)說明。使用其 API 還需要獲取 API Key，這里可以獲取。
個(gè)人覺得想要免費(fèi)的話使用 API 會(huì)有數(shù)量限制，時(shí)刻惦記著數(shù)量有點(diǎn)心累，不如直接使用在線工具，也不麻煩~

首屏 Loading，代碼段分享，拿走即用~

function loading(){

    function Load(){}

    Load.prototype.loadImgs = function(urls,callback) {
        this.urls = urls;
        this.imgNumbers = urls.length;
        this.loadImgNumbers = 0;
        var that =this;
        for(var i=0;i
9. CSS 動(dòng)畫屬性前綴 webkit
使用 CSS3 來制作動(dòng)畫效果的話，webkit 前綴一定記得加，要不然在某些手機(jī)下動(dòng)畫效果是沒有的。
如下：
-webkit-animation: f .8s 2s forwards ease-in-out;
animation: f .8s 2s forwards ease-in-out;

@-webkit-keyframes f {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(750px,0,0);
        transform: translate3d(750px,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes f {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(750px,0,0);
        transform: translate3d(750px,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
推薦使用自動(dòng)化工具來處理未加前綴的 CSS 文件，如 gulp-autoprefixer。
10. Swiper.js & Animate.css
你只需要 Swiper.js 和 Animate.css 即可打造（簡(jiǎn)單的）移動(dòng)端 H5 活動(dòng)頁(yè)面~
Swiper 是純 javascript 打造的滑動(dòng)特效插件，面向手機(jī)、平板電腦等移動(dòng)終端。
Animate.css 是純 CSS 編寫而成的動(dòng)畫庫(kù)，包含多種常見的 CSS 動(dòng)畫。
引用 Swiper.js，同時(shí)在 Animate.css 中尋找需要的動(dòng)畫效果復(fù)制粘貼進(jìn) css 文件即可，完全不必引用 Animate.css。
11. 使用 Meta 標(biāo)簽進(jìn)行頁(yè)面縮放




利用 meta 標(biāo)簽對(duì)頁(yè)面進(jìn)行縮放，使得我們可以直接根據(jù)設(shè)計(jì)稿來進(jìn)行頁(yè)面的編寫，不用再進(jìn)行單位的換算等等，省卻了很多麻煩。
12. 微信二維碼問題
01：同一個(gè)頁(yè)面里要是有兩個(gè)二維碼，長(zhǎng)按掃描總是只能掃出 左側(cè)/第一個(gè) 二維碼。
解決：可視區(qū)域內(nèi)只能出現(xiàn)一個(gè)二維碼。
02：使用 meta 標(biāo)簽縮放頁(yè)面后長(zhǎng)按二維碼圖片無反應(yīng)。
解決：使用了以下代碼之后，就能長(zhǎng)按識(shí)別二維碼了~


< img style="right:0; top:0; height: auto;width: 100%;opacity: 0;position: absolute;" src="二維碼圖片地址">

< img src="二維碼圖片地址" title="qrcode" alt="qrcode">

參考
途牛Q2財(cái)報(bào)
2017年輕人花花花錢大報(bào)告