移動端微信應用開發總結（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);

 

4、清空元素的區別

一、錯誤作法一：
$("#test").html("");//該作法會致使內存泄露

二、錯誤作法二：
$("#test")[0].innerHTML=""; ;//該作法會致使內存泄露

三、正確作法：
$("#test").empty();

5、微信開發或手機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知多少 

一、百度百科meta

二、手機網站前端設計

三、手機網頁製做的認識（有關meta標籤）

四、HTML <meta> 標籤