微信H5手機網頁開發—快速入門

阿新 • • 發佈：2018-12-29

序言

　　隨著微信(WeChat)的盛行，一個流行的開發工作也隨之誕生——微信公眾號開發，而其中最主要的部分，當屬微信H5網頁開發。
　　雖然網頁開發大家並不陌生，但層出不窮的手機型號，導致了微信網頁開發中遇到的最難的問題——手機解析度適應。
　　實際上，針對手機解析度的問題，也有相應的設定來解決，下面由我帶領大家來揭祕這讓人頭疼的微信H5網頁開發。希望各位能夠享受這段文字旅程並有所收穫。

前言

為什麼寫本文
　　本人在微信開發這條路也已經走了將近3年了，在H5網頁製作方面也曾希望有高人能指點一番，然而並沒有遇到。很多問題雖然網上有各種資料可以查詢，但是都不夠系統，因工作問題，沒有時間系統的去學習一番，故而一致都是在摸索中前進，經點滴積累，現在我希望把我的經驗分享給大家，希望大家閱讀愉快。
本文的主要內容和特色

　　本文將以介紹為基本開篇，逐步引出在微信瀏覽器下開發我們的H5網頁，以一個微信商城案例，循序漸進，一步步為大家剖析在微信瀏覽器下的H5網頁設計原理和方法。
本文面向的讀者
　　本書希望面向的讀者可以是已經從事web開發的各類開發人員和對web開發感興趣的初學者。

第一章瞭解HTML5

1.1 什麼是HTML5

HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標準。
HTML 的上一個版本誕生於 1999 年。自從那以後，Web 世界已經經歷了鉅變。
HTML5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 HTML5 支援。

1.2 HTML5是如何起步的

HTML5 是 W3C 與 WHATWG 合作的結果。
編者注：W3C 指 World Wide Web Consortium，全球資訊網聯盟。
編者注：WHATWG 指 Web Hypertext Application Technology Working Group。
WHATWG 致力於 web 表單和應用程式，而 W3C 專注於 XHTML 2.0。在 2006 年，雙方決定進行合作，來建立一個新版本的 HTML。
為 HTML5 建立的一些規則：

新特性應該基於 HTML、CSS、DOM 以及 JavaScript。
減少對外部外掛的需求（比如 Flash）
更優秀的錯誤處理

更多取代指令碼的標記
HTML5 應該獨立於裝置
開發程序應對公眾透明

1.3 新特性

HTML5 中的一些有趣的新特性：

用於繪畫的 canvas 元素
用於媒介回放的 video 和 audio 元素
對本地離線儲存的更好的支援
新的特殊內容元素，比如 article、footer、header、nav、section
新的表單控制元件，比如 calendar、date、time、email、url、search

1.4 HTML5的一個例項

<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag。
</video>
</body>
</html>

1.5 本章小結

　　本章先帶領大家瞭解html5的基本來歷，接下來以案例“微信商城”分模組，一步一步揭開HTML開發的神祕面紗。

2.1 HTML head 元素

　　head 元素是所有頭部元素的容器。head 內的元素可包含指令碼，指示瀏覽器在何處可以找到樣式表，提供元資訊，等等。
以下標籤都可以新增到 head 部分：title、base、link、meta、script 以及 style。

2.2 HTML title 元素

title 標籤定義文件的標題。
title 元素在所有 HTML/XHTML 文件中都是必需的。
title 元素能夠：

定義瀏覽器工具欄中的標題
提供頁面被新增到收藏夾時顯示的標題
顯示在搜尋引擎結果中的頁面標題

2.3 HTML base 元素

base 標籤為頁面上的所有連結規定預設地址或預設目標（target）：

<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>

2.4 HTML link 元素

link 標籤定義文件與外部資源之間的關係。
link 標籤最常用於連線樣式表：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

2.5 HTML style 元素

style 標籤用於為 HTML 文件定義樣式資訊。
您可以在 style 元素內規定 HTML 元素在瀏覽器中呈現的樣式：

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

2.6 HTML meta 元素

　　元資料（metadata）是關於資料的資訊。
　　meta 標籤提供關於 HTML 文件的元資料。元資料不會顯示在頁面上，但是對於機器是可讀的。
　　典型的情況是，meta 元素被用於規定頁面的描述、關鍵詞、文件的作者、最後修改時間以及其他元資料。
meta 標籤始終位於 head 元素中。
　　元資料可用於瀏覽器（如何顯示內容或重新載入頁面），搜尋引擎（關鍵詞），或其他 web 服務。

2.7 本章小結

　　本章為大家簡單的羅列了在網頁開發中head部分常見的標籤，在下一章節中，我們將詳細為大家解釋meta標籤的奧祕。

第三章 HTML Meta 常用的元素

3.1 meta 語法

3.2 meta之keywords元素

說明：為搜尋引擎提供的關鍵字列表
用法：<meta name="keywords" content="關鍵詞1,關鍵詞2，關鍵詞3,關鍵詞4,……">

3.3 meta之description元素

說明：用來告訴搜尋引擎你的網站主要內容
用法：<meta name="description" content="你網頁的簡述">

說明：標註網頁的作者或製作組
用法：<meta name="author" content="K神，K神工作室">
注意：content可以是：你或你的製作組的名字,或Email

3.6 meta之generator元素

說明：編輯器的說明
用法：<meta name="generator" content="PCDATA|FrontPage|">

3.7 meta之revisit-after

說明：用來控制搜尋引擎抓取網站的頻率，告訴搜尋引擎多長時間來網站抓取一次
用法：<meta name="revisit-after" content="7 days">

3.8 本章小結

　　本章詳細給出了常用的HTML種meta標籤和用法。這些都是web開發中的基本知識，為手機網頁開發做準備，下面我們先直接進入手機網頁開發，看看需要對head進行哪些特殊的定義呢？

第四章手機網頁開發之head必修課

4.1 你知道手機的解析度嗎？

　　在手機引數中，往往會看到，手機螢幕解析度這一個引數，這個引數是一個怎麼樣的意思呢，關於解析度你又瞭解多少呢？
螢幕物理尺寸：螢幕對角線的實際尺寸，如2.4寸,3.5寸等等。
螢幕解析度：螢幕所能顯示的畫素的多少，如320*480等。
螢幕密度(pix per inch)：以每英寸的畫素數。每英寸的解析度數。如160dpi。
　　物理尺寸決定了螢幕的實際尺寸，而解析度可以表示螢幕上可以呈現的畫素點數，螢幕密度決定了螢幕的精細程度。
　　相同的螢幕大小如果解析度高，則螢幕元素更精細，一個介面元素在螢幕裡的實際尺寸，在密度較小的屏上，介面元素的實際尺寸就會更大一些，反之亦然。
　　所以在手機介面佈局中，除了元素的畫素值外，考慮元素的實際尺寸也非常重要，因為人眼看到的是實際尺寸。
下面列出了常用的手機解析度：

3.5英寸，480x320(HVGA)，165PPI
3.5英寸，800x480(WVGA)，267PPI
3.5英寸，854x480(WVGA)，280PPI
3.5英寸，960x640(DVGA)，326PPI(蘋果iphone4)
3.7英寸，800x480(WVGA)，252PPI
3.7英寸，800x480(WVGA)，252PPI
3.7英寸，960x540(qHD)，298PPI
4.0英寸，800x480(WVGA)，233PPI
4.0英寸，854x480(WVGA)，245PPI
4.0英寸，960x540(qHD)，275PPI
4.0英寸，1136x640(HD)，330PPI(蘋果iphone5)
4.2英寸，960x540(qHD)，262PPI
4.3英寸，800x480(WVGA) ，217PPI
4.3英寸，960x640(qHD)，268PPI
4.3英寸，960x540(qHD)，256PPI
4.3英寸，1280x720(HD)，342PPI
4.5英寸，960*540(qHD)，245PPI
4.5英寸，1280x720(HD)，326PPI

4.2 如何編寫自適應各種手機解析度的網頁呢？

　　案例一：2010年，Ethan Marcotte提出了“自適應網頁設計”(responsive web design)，指可以自動識別螢幕寬度、並做出相應調整的網頁設計。
　　案例二：利用@media screen實現網頁佈局的自適應，就是針對不同的解析度呼叫不同的樣式檔案。
　　案例三：使用body的zoom屬性，對網頁進行縮放。
　　案例四：使用viewport的initial-scale值，對網頁進行縮放。
我想對以上的做法表示無奈，真的什麼招都用盡了，下面我來給大家詳細分析一下網頁開發中遇到的坑吧！

4.3 手機網頁必學標籤meta之viewport

viewport 語法介紹

<meta name="viewport"
content="
    height = [pixel_value | device-height] ,
    width = [pixel_value | device-width ] ,
    initial-scale = float_value ,
    minimum-scale = float_value ,
    maximum-scale = float_value ,
    user-scalable = [yes | no] ,
    target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
"/>

width
控制 viewport 的大小，可以指定的一個值或者特殊的值，如 device-width 為裝置的寬度（單位為縮放為 100% 時的 CSS 的畫素）。
height
和 width 相對應，指定高度。
initial-scale
初始縮放。即頁面初始縮放程度。這是一個浮點值，是頁面大小的一個乘數。例如，如果你設定初始縮放為“1.0”，那麼，web頁面在展現的時候就會以target density解析度的1:1來展現。如果你設定為“2.0”，那麼這個頁面就會放大為2倍。
maximum-scale
最大縮放。即允許的最大縮放程度。這也是一個浮點值，用以指出頁面大小與螢幕大小相比的最大乘數。例如，如果你將這個值設定為“2.0”，那麼這個頁面與target size相比，最多能放大2倍。
user-scalable
使用者調整縮放。即使用者是否能改變頁面縮放程度。如果設定為yes則是允許使用者對其進行改變，反之為no。預設值是yes。如果你將其設定為no，那麼minimum-scale 和 maximum-scale都將被忽略，因為根本不可能縮放。
所有的縮放值都必須在0.01–10的範圍之內。
示例1：設定螢幕寬度為裝置寬度，禁止使用者手動調整縮放
<meta name="viewport" content="width=device-width,user-scalable=no" />
示例2：設定螢幕密度為高頻，中頻，低頻自動縮放，禁止使用者手動調整縮放
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

target-densitydpi
一個螢幕畫素密度是由螢幕解析度決定的，通常定義為每英寸點的數量（dpi）。Android支援三種螢幕畫素密度：低畫素密度，中畫素密度，高畫素密度。一個低畫素密度的螢幕每英寸上的畫素點更少，而一個高畫素密度的螢幕每英寸上的畫素點更多。Android Browser和WebView預設螢幕為中畫素密度。

device-dpi –使用裝置原本的 dpi 作為目標 dp。不會發生預設縮放。
high-dpi – 使用hdpi 作為目標 dpi。中等畫素密度和低畫素密度裝置相應縮小。
medium-dpi – 使用mdpi作為目標 dpi。高畫素密度裝置相應放大，畫素密度裝置相應縮小。這是預設的target density.
low-dpi -使用mdpi作為目標 dpi。中等畫素密度和高畫素密度裝置相應放大。
dpi-value - 指定一個具體的dpi 值作為target dpi. 這個值的範圍必須在70–400之間
編者注：可惜的是目前手機瀏覽器已經放棄了target-densitydpi屬性