微信H5手机网页开发—快速入门

序言

随着微信(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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

1.5 本章小结

本章先带领大家了解html5的基本来历,接下来以案例“微信商城”分模块,一步一步揭开HTML开发的神秘面纱。

第二章 header里标签的奥秘

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>
  • 1
  • 2
  • 3
  • 4
  • 5

link 标签定义文档与外部资源之间的关系。
link 标签最常用于连接样式表:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
  • 1
  • 2
  • 3
  • 4

2.5 HTML style 元素

style 标签用于为 HTML 文档定义样式信息。
您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

2.6 HTML meta 元素

元数据(metadata)是关于数据的信息。
meta 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。
典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
meta 标签始终位于 head 元素中。
元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

2.7 本章小结

本章为大家简单的罗列了在网页开发中head部分常见的标签,在下一章节中,我们将详细为大家解释meta标签的奥秘。

第三章 HTML Meta 常用的元素

3.1 meta 语法

定义和用法:name 属性把 content 属性连接到 name。
语法:name=author|description|keywords|generator|revised|others

3.2 meta之keywords元素

说明:为搜索引擎提供的关键字列表
用法:<meta name="keywords" content="关键词1,关键词2,关键词3,关键词4,……">

3.3 meta之description元素

说明:用来告诉搜索引擎你的网站主要内容
用法:<meta name="description" content="你网页的简述">

3.4 meta之author元素

说明:标注网页的作者或制作组
用法:<meta name="author" content="K神,K神工作室">
注意:content可以是:你或你的制作组的名字,或Email

3.5 meta之copyright元素

说明:标注版权
用法:<Meta name="copyright" content="本页版权归K神工作室所有。All Rights Reserved">

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英寸,480×320(HVGA),165PPI
  • 3.5英寸,800×480(WVGA),267PPI
  • 3.5英寸,854×480(WVGA),280PPI
  • 3.5英寸,960×640(DVGA),326PPI(苹果iphone4)
  • 3.7英寸,800×480(WVGA),252PPI
  • 3.7英寸,800×480(WVGA),252PPI
  • 3.7英寸,960×540(qHD),298PPI
  • 4.0英寸,800×480(WVGA),233PPI
  • 4.0英寸,854×480(WVGA),245PPI
  • 4.0英寸,960×540(qHD),275PPI
  • 4.0英寸,1136×640(HD),330PPI(苹果iphone5)
  • 4.2英寸,960×540(qHD),262PPI
  • 4.3英寸,800×480(WVGA) ,217PPI
  • 4.3英寸,960×640(qHD),268PPI
  • 4.3英寸,960×540(qHD),256PPI
  • 4.3英寸,1280×720(HD),342PPI
  • 4.5英寸,960*540(qHD),245PPI
  • 4.5英寸,1280×720(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]
"/>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

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属性

4.4 未完待续

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注