移动端微信应用开发总结（function ajax meta）

关键字：document function ajax jquery html5 meta

微信应用开发时，特意把各个容易混淆的知识点和要点，梳理后记录下来，也分享给各位。有问题还请多指正。

一 文档载入完成后执行的函数 $(document).ready(function() 简写后是$(function(){...})

$(document).ready(function() {
// do stuff when DOM is ready//当文档载入后从此处开始执行代码
});

定义和用法
当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。
由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。
ready() 函数规定当 ready 事件发生时执行的代码。ready() 函数仅能用于当前文档，因此无需选择器。

允许使用以下三种语法：
语法 1 $(document).ready(function)
语法 2 $().ready(function)
语法 3 $(function)

参数 描述
function 必需。规定当文档加载后要运行的函数。

说明：$(function(){…}); jQuery(function($) {…}); $(document).ready(function(){…}) 这三个的作用是一样的，本人比较需要用第一种、书写简单。
另外注意区别(function($) {…})(jQuery);
这实际上是匿名函数，如下：function(arg){…} 这种写法的最大好处是形成闭包。在(function($) {…})(jQuery)在内部定义的函数和变量只能在此范围内有效。
形成是否函数函数、私有变量的概念。比如：
var i=3;
function init(){
alert("外层init："+i);
}
(function($) {
var i=2;
function init(){
alert("内层init："+i);
}

init();
})(jQuery);
init();
执行结果：
内层init：2
外层init：3

选择器
　　　$(“a”)是一个jquery的选择器（selector）
　　　$("")其中的字段就是元素的标记。比如$("div")就是<div></div>
　　　click是函数对象的一个方法。方法为点击鼠标事件！
例：
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});

　　　$("div").click $("div")就是页面中所有的div标签这句话就是给所有的标签为div的元素绑定了一个click事件 即当所有div被鼠标单击的时候 执行 alert("Hello World!");

$(document).ready(function()更全面的用法见：http://www.cnblogs.com/king-sheng/archive/2012/01/06/2313980.html

二 ajax 总结,最底层的jQuery AJAX函数

语法：$.ajax([options])　　其中[options]为可选参数，对应的意思参见下表。

　　参数名　　　　　　　　类型　　　　　　　　　　　描述　　　　

　　url　　　　　　　　 String　　　　　 　　 发送请求的地址

　 type　　　　　　　　 String　　　　　　 　　数据请求方式(post或get),默认为get

　　data　　　　　　　　 String　　　　　　 　 发送到服务器上的数据，如果不是字符串格式则自动转为i字符串格式，get方法则附在html请求地址后面。

　　dataType　　　　　　String　　　　　　　 服务器返回的数据类型，如果不指定，jQuery自动根据HTTP包判断。可为:html、script、text、xml、json。

　　beforeSend　　　　 Function　　　　　　 该函数用于发送请求前修改XMLHttpRequest对象。其中参数就是XMLHttpRequest对象，由于该函数本身是jQuery事件，因此，如果函数返回false，则表示取消本次事件。

　　complete　　　　　　Function　　　　　　 请求完成后调用的回调函数，该函数无论数据发送成功或失败都会调用，该函数有两个参数，一个是XMLHttpRequest对象，另一个是strStatus，用于描述成功请求类型的字符串。

　　success　　　　　　 Function　　　　　　 请求成功后调用的回调函数，该函数有三个参数。第一个是XMLHttpRequest对象，第二个是strError，第三个是捕捉到的错误对象strObject、

　　error　　　　　　　　Function　　　　　　 　请求失败后调用的回调函数，该函数有三个参数，第一个是XMLHttpRequest对象，第二个是出错信息strError，第三个是捕捉到的错误对象strObject。

　　timeout　　　　　　 Number　　　　　　 请求超时的时间(毫秒)，该设置将覆盖$.ajaxSetup()方法中同样的设置。

　　global　　　　　　　 Boolean　　　　　　　 是否相应全局事件，默认是true,表示响应，如果设置成false,表示不响应，那么全局事件$.ajaxStart等将不响应。例如:全局时间设定了清除缓存 $.ajaxSetup({ cache:false; });但启动了global:false;将忽略全局中的设置,继续使用缓存，同　　　　　　　　　　　　　　　　　　　　　　　　　时不触发全局事件。

　　async　　　　　　　 Boolean　　　　　　　 是否为异步请求，默认是true,表示是异步，如果设置成false，表示是同步请求。

　　cache　　　　　　　 Boolean　　　　　　　 是否进行页面缓存，true表示进行缓存，false表示不进行页面缓存。　　

　　traditional　　　　　 Boolean　　　　　　　 是否使用传统的方式传递参数。目前知道的默认传递数组，后面会加[]。

ajax的demo示例：
$(".submit").bind('click',function(){
var username = $("input[name='username']").val();
$.ajax({
url:"post",
type:"post",
dataType:"json",
data: { "aid": '<?=$aid?>',"ucode": '<?=$ucode?>'},
//data:{"username="+username+"&password="+password},
timeout:5000,
error:function(){
alert(1)
},
success:function(){
var jn=jQuery.parseJSON(data);
$.each(jn.list, function(i, item) {
$("#datalist").append(
"<div class='a153'>"+
"<div class='a1531 fl'><img src='"+item.upic+"' /><div class='a1531a'></div></div>"+
"<div class='a1532 fl str'><span>"+item.unick+"</span>"+item.ctime+"</div>"+
"<div class='a1533 fr str'>"+item.num+"元</div>"+
"<div class='cls'></div>"+
"</div>"
);
});
}
});
}
})
});

Ajax事件参数：beforeSend ，success ，complete ，error 如果要用jQuery来进行Ajax开发，那么这些参数你都必需熟知的。
我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下，这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。
$.ajax({
type: "get",
url: "http://www.cnblogs.com/rss",
beforeSend: function(XMLHttpRequest){
//ShowLoading();
},
success: function(data, textStatus){
$(".ajax.ajaxResult").html("");
$("item",data).each(function(i, domEle){
$(".ajax.ajaxResult").append("<li>"+$(domEle).children("title").text()+"</li>");
});
},
complete: function(XMLHttpRequest, textStatus){
//HideLoading();
},
error: function(){
//请求出错处理
}
});
这篇博文总结的ajax比较全面
http://www.cnblogs.com/kissdodog/archive/2012/12/09/2810545.html

三 jQuery发送ajax请求，页面有缓存，数据不更新问题

在IE下用Ajax请求某一页面，通常会因为缓存的原因而返回上一次的结果，造成混乱，[即get方式时，获取数据，因发送参数和地址都一致，故IE浏览器会从缓存中取，而不会去请求服务器端，而post方式因为参数的不同，不会产生这个问题]而FF下不会出现这种情况。
为了不受缓存影响，可以这样做：

1: 在AJAX请求的页面后加个随机函数,我们可以使用随机时间函数

在javascript发送的URL后加上t=Math.random()
例如这样:URL+"&"+"t="+Math.random();或者new Date();
在 URL 参数后加上 "?timestamp=" + new Date().getTime();
比如：
var url = 'http://www.cnblogs.com/';
url += '?temp=' + new Date().getTime();
url += '?temp=' + Math.random();

2.最好的方法：

$.ajaxSetup({cache:false})
注：在传送ajax的时候传入参数 cache：false

$.ajax不缓存版:
$.ajax({
type:"GET"
url:'test.html',
cache:false,
dataType:"html",
success:function(msg){
alert(msg);
}
});

3.http页面中加上去除缓存代码

HTTP:
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
<meta http-equiv="expires" content="Thu, 01 Jan 1970 00:00:01 GMT" />
<meta http-equiv="expires" content="0" />
PHP：
header("Expires: Thu, 01 Jan 1970 00:00:01 GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");

4. 在XMLHttpRequest发送请求之前加上：

XMLHttpRequest.setRequestHeader("If-Modified-Since","0");
XMLHttpRequest.send(null);

四、清空元素的区别

1、错误做法一：
$("#test").html("");//该做法会导致内存泄露

2、错误做法二：
$("#test")[0].innerHTML=""; ;//该做法会导致内存泄露

3、正确做法：
$("#test").empty();

五、微信开发或手机wap 屏幕适配

移动互联应用开发很重要，用html5开发移动应用是最好的选择。然而，每一款手机有不同的分辨率，不同屏幕大小，如何使我们开发出来的应用或页面大小能完美适配各种手机使用呢？要注意几点

1 分屏幕尺寸设置 css像素

.viewport { position:relative; width:100%; height:100%; min-width:800px; max-width:800px; }
.vpbg { background-repeat:no-repeat; background-position:center top; background-size:100%; }
//屏幕小于600px
@media screen and (max-width:599px) {
.viewport { width:100%; height:100%; min-width:320px; max-width:320px; }

/* 复用 */
.abot { height:23px; }
.abottxt { height:23px; line-height:23px; font-size:12px; }
.atop { height:24px; }
.atoptxt { height:24px; }
.atoptxt1 { height:24px; line-height:24px; }
.atoptxt11 { width:13px; height:12px; }
.atoptxt12 { height:24px; font-size:11px; }
}
//屏幕600-800px
@media screen and (min-width:600px) and (max-width:799px) {
.viewport { width:100%; height:100%; min-width:600px; max-width:600px; }

/* 复用 */
.abot { height:42px; }
.abottxt { height:42px; line-height:42px; font-size:23px; }
.atop { height:44px; }
.atoptxt { height:44px; }
.atoptxt1 { height:44px; line-height:44px; }
.atoptxt11 { width:23px; height:22px; }
.atoptxt12 { height:44px; font-size:18px; }
}

2 img 等设置成100%，并禁止用户缩放

(设置屏幕宽度为设备宽度，禁止用户手动调整缩放)
<meta name="viewport" content="width=device-width,user-scalable=no" />

(设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放)
<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"/>

3 手机端html的相关meta设置

手机端特有的meta如下：
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> //强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
<meta content="yes" name="apple-mobile-web-app-capable"> //表示：允许全屏模式浏览
<meta content="black" name="apple-mobile-web-app-status-bar-style"> //iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
<meta content="telephone=no" name="format-detection"> //告诉设备忽略将页面中的数字识别为电话号码

在 iPhone 上默认值是：
<meta name="format-detection" content="telephone=yes"/>
如果你不希望手机自动将网页中的电话号码显示为拨号的超链接，那么可以这样写：
<meta name="format-detection" content="telephone=no"/>

format-detection翻译成中文的意思是“格式检测”，顾名思义，它是用来检测html里的一些格式的，那关于meta的format-detection属性主要是有以下几个设置：
meta name="format-detection" content="telephone=no"
meta name="format-detection" content="email=no"
meta name="format-detection" content="adress=no"
也可以连写：meta name="format-detection" content="telephone=no,email=no,adress=no"

参考：关于meta知多少

1、百度百科meta

2、手机网站前端设计

3、手机网页制作的认识（有关meta标签）

4、HTML <meta> 标签