移動端--web開發(fā)

發(fā)表時間：2014-7-16

發(fā)布人：葵宇科技

瀏覽次數(shù)：47

最近看到群里對關(guān)于移動端 web開發(fā)很是感興趣，決定寫一個關(guān)于移動端的web開發(fā) 概念或框架（寶慶對此很是糾結(jié)）。也是因為自己一直從事pc 瀏覽器 web一直對移動端的不是很重視，所以趁此機會也讓自己對移動端的開發(fā) 有個清晰的認識。

環(huán)境：

1. 移動端的內(nèi)核：手機瀏覽器的內(nèi)核是什么在文章中 Android 手機采用 Webkit。其他的QQ，UC，飛豚瀏覽器都基于此開發(fā)的。而在iOS以及WP7平臺上，由于系統(tǒng)封閉，不允許除系統(tǒng)自帶瀏覽器內(nèi)核以外的瀏覽器內(nèi)核進入，因此各家瀏覽器的開發(fā)均為在Safari或者IE內(nèi)核的基礎(chǔ)上進行二次開發(fā)，優(yōu)化功能和自制UI。根據(jù)
“   各瀏覽器對HTML5的測試都有了較大提升，但是穩(wěn)定性依然不足。知名獨立IT博客月關(guān)博客表示，瀏覽器對于HTML5的提升并不是一蹴而就的，在這種跑分競爭持續(xù)一定時間之后，大多數(shù)瀏覽器廠商還都是會支持全部的新特性?！?/code>
可以看出 Android，IOS， WP7對html5都是支持的，可能具體某個瀏覽器的程度不一樣。 tips：說到html5，就要提一下css3。在網(wǎng)上搜索了一下，只有一篇文章~ Android平臺瀏覽器CSS3兼容性測試。雖然文章比較老，但是在看一些框架源碼的時候，也確實看到針對一些 css3 的js代碼。所以對css3的使用還是要小心一點。（特別是QQ瀏覽器）針對上面的情況，我希望大家用一些比較流行和可靠的css 框架。比如：PRUE （這里的框架沒有寶慶同學理解的那么高深和復雜，更多的像樣式庫和樣式編寫的理念~）

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 開發(fā)： 
 
  1. 關(guān)于 移動端 web 的開發(fā)：webkit webApp 開發(fā)技術(shù)要點總結(jié) 
  
  
 
  
  
  這篇文章把概念和基礎(chǔ)都說全了~ 請注意文章中的鏈接（
  指尖下的js
  ）。
  
  
  
 
  
  
  通過這篇文章，我想  click，mouse這類的事件 就不要出現(xiàn)在 
  移動端 web 的開發(fā)中了；
  
  
                                    :hover偽類 這樣的樣式       就不要
  出現(xiàn)在 
  移動端 web 的開發(fā)中了；
  
  
                                    知道css對于js開發(fā)是很重要的，特別是一些組件的開發(fā)。
  
  
  
 
  
  
  雖然文章寫的很好，但是還要注意兼容性問題。之前談過，特別是css3 的一些問題，還是多測試一下為好。
  
 
 
 
 
 
 框架： 
 
  
  1. 針對“自適應頁面”，之前看那過一些關(guān)于這方面的博客，感覺并不是很難，但是自己寫的時候，就不是那么回事了~
  
  
  
 
  
  
           原因：1.    可能是自己的能力和概念理解不夠。2    讓人無奈的設(shè)計。
  所以只能用現(xiàn)有的框架來解決問題了~
  
  
                    
  
  
           好處：1.    統(tǒng)一的框架，能為多人使用，不用看別人寫的代碼了~ 
  
  
                      2.    看看別人寫的代碼和自己寫的做比較，也能提高一下自己。
  
  
                      3.    不用糾結(jié)一些框架能夠解決的問題了~~~ 
  
  
  
 
  
  
  2.針對“有復雜交互，一般代碼不好解決的頁面“，可以使用一些js框架。
  
  
  
 
  
  
          這里推薦 一個 app framework 相對簡單和方面點~但這個框架本身也會有些問題。
  
  
                     
  
  
          對了，針對 移動端 web開發(fā)，jquery庫的引用~建議使用 app 
  framework
   里面"閹割"后jquery庫。
  
  
  
 
  
  
                     要學習 app framework的話：  
  http://bbs.phonegap100.com/thread-361-1-1.html
  
 
 
 
 
 

  
 圖片： 
 
 
  
  
   1. mobile web開發(fā)中，經(jīng)常會遇到圖片的加載的問題。
   
  
  
  
   主要原因是：1. 為了防止圖片失真，圖片必須原來的兩倍大。
   
  
 
 
  
   
    
    
      2. 因為原因1，所以圖片無法合并。
     
    
   
  
 
 
  
  
   
 
   
  
  
  
    由于以上的原因：mobile中頁面，圖片 會加載的慢。
   
  
  
  
   解決方法： 將圖片 轉(zhuǎn)化為 BASE64 格式。轉(zhuǎn)化工具地址：
   http://tool.oschina.net/encrypt?type=4
   
  
  
          注意點：轉(zhuǎn)化后的 BASE64 格式，會是一個很長的字符串，不可以將字符串 換行。
  
 

  
兼容性 : 
 
 1. 為實現(xiàn)對winphone的支持，引用 微軟的hand.js 文件。以前寫的touchstart和touchend要改為pointerdown,pointerup。 
 
 
 
  
  
 
  
  
 
 
 
 
 

 開發(fā)工具：
 
 
 
  移動調(diào)試-android
  
  
   
    對于androi手機我們也可以像電腦上chrome下的開發(fā)工具一樣看到源碼然后調(diào)試 
   
  
  
   
    看chrome給的官方文檔 
   
  
  
   
    就是有幾個過程 
   
  
  
   
    (1) 手機啟用usb調(diào)試（系統(tǒng)設(shè)置 - 開發(fā)者選項 - usb調(diào)試）// 
   
  
  
   
    (2 ) 電腦上的chrome允許usb debug(工具-檢查設(shè)備-勾選(允許usb debug)) 
   
  
  
   
    (3) 用數(shù)據(jù)線連接手機和電腦，在手機上勾選“ Always allow from this computer” 
   
  
  
   
    (4) 用手機上的 chrome打開要調(diào)試的頁面 
   
  
  
   
    (5) 在電腦上打開chrome://inspect/#devices 然后點擊"inspect"就會出現(xiàn)類似于chrome的開發(fā)工具的頁面之后就可以調(diào)試你手機上打開的頁面 
   
  
  
   
    
  
   
  
  
   
    tips: 國內(nèi)打開如果打不開~記得第一次 要鏈接 vpn