移动端微信应用开发总结（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、手机网站前端设计
