移動(dòng)設(shè)備Web App開發(fā)與調(diào)試的相關(guān)知識(shí)要點(diǎn)

時(shí)間：2022-05-24 13:06:01 | 來源：網(wǎng)絡(luò)營(yíng)銷

時(shí)間：2022-05-24 13:06:01 來源：網(wǎng)絡(luò)營(yíng)銷

移動(dòng)開發(fā)也稱為手機(jī)開發(fā)，或叫做移動(dòng)互聯(lián)網(wǎng)開發(fā)，是指以手機(jī)、PDA、UMPC等便攜終端為基礎(chǔ)，進(jìn)行相應(yīng)的開發(fā)工作，由于這些隨身設(shè)備基本都采用無線上網(wǎng)的方式，因此，業(yè)內(nèi)也稱作為無線開發(fā)。

移動(dòng)應(yīng)用開發(fā)是為小型、無線計(jì)算設(shè)備編寫軟件的流程和程序的集合，像智能手機(jī)或者平板電腦，移動(dòng)應(yīng)用開發(fā)類似于Web應(yīng)用開發(fā)，起源于更為傳統(tǒng)的軟件開發(fā)，但關(guān)鍵的不同在于移動(dòng)應(yīng)用通常利用一個(gè)具體移動(dòng)設(shè)備提供的獨(dú)特性能編寫軟件。

由于整個(gè)市場(chǎng)還處于發(fā)軔階段，目前大眾對(duì)于手機(jī)應(yīng)用了解并不很多，但其實(shí)在這個(gè)市場(chǎng)早已是暗流涌動(dòng)，春潮泛濫，各種各樣有趣的應(yīng)用層出不窮，新奇創(chuàng)意不斷，大量原來PC和互聯(lián)網(wǎng)上的信息化應(yīng)用、互聯(lián)網(wǎng)應(yīng)用均已出現(xiàn)在手機(jī)平臺(tái)上，一些前所未見的新奇應(yīng)用也開始出現(xiàn)，并日漸增多。

如今，移動(dòng)設(shè)備的用戶越來越多，每天android手機(jī)的激活量都已經(jīng)超過130萬臺(tái)，所以我們面向移動(dòng)終端的WebAPP也開始跟進(jìn)了，本文主要介紹webapp的開發(fā)與調(diào)試的相關(guān)知識(shí)和經(jīng)驗(yàn)，以及給出幾種可選的解決方案。

一、基本概念

隨著移動(dòng)應(yīng)用市場(chǎng)的不斷擴(kuò)大，移動(dòng)開發(fā)的市場(chǎng)得到長(zhǎng)足的發(fā)展，大家期待各種常見的或是重要的信息化系統(tǒng)、互聯(lián)網(wǎng)應(yīng)用可以被移植到手機(jī)上同步使用，使用戶無論在何時(shí)何地，都可以連線精彩的網(wǎng)絡(luò)世界，登錄信息系統(tǒng)。

1、CSS pixels與device pixels

CSS pixels：瀏覽器使用的抽象單位，主要用來在網(wǎng)頁(yè)上繪制內(nèi)容。

device pixels：顯示屏幕的的最小物理單位，每個(gè)dp包含自己的顏色、亮度。

等值的CSS pixels在手機(jī)屏幕上占多大的位置，這不是固定的，這取決于很多屬性，經(jīng)過分析和總結(jié)，我們可以得出這么一條公式：

1 CSS pixels = （devicePixelRatio）^2 device pixels

^2是平方的意思，至于devicePixelRatio是什么東西，后面會(huì)講解。

2、PPI/DPI

PPI，有時(shí)也叫DPI，所表示的是每英寸所擁有的像素（pixel）數(shù)目，數(shù)值越高，即代表顯示屏能夠以越高的密度顯示圖像（注：這里的像素，指的是device pixels）。

搞清楚了PPI是什么意思，我們就能很容易理解PPI的計(jì)算方式了，我們需要首先算出手機(jī)屏幕的對(duì)角線等效像素，然后處以對(duì)角線（我們平常所說的手機(jī)屏幕尺寸就是說的手機(jī)屏幕對(duì)角線的長(zhǎng)度），就可以得到PPI了，準(zhǔn)確的計(jì)算公式大家可以參照下圖：

比較有意思的是，根據(jù)公式計(jì)算出來的iPhone 4的PPI為330，要比蘋果官方公布的326要高一點(diǎn)點(diǎn)。

同理，以HTC G7為例，480*800的分辨率，3.7英寸，算出來就是252的PPI。

3、密度決定比例

我們計(jì)算PPI就是為了知道一部手機(jī)設(shè)備是屬于哪個(gè)密度區(qū)間的，因?yàn)椴煌拿芏葏^(qū)間，對(duì)應(yīng)著不同的默認(rèn)縮放比例，這是一個(gè)很重要的概念。

由上圖可知，PPI在120-160之間的手機(jī)被歸為低密度手機(jī)，160-240被歸為中密度，240-320被歸為高密度，320以上被歸為超高密度（Apple給了它一個(gè)上流的名字——retina）。

這些密度對(duì)應(yīng)著一個(gè)特定的縮放比例值，拿我們最熟悉的iphone4或4s來說，它們的PPI是326，屬于超高密度的手機(jī)，當(dāng)我們書寫一個(gè)寬度為320px的頁(yè)面放到iphone中顯示，你會(huì)發(fā)現(xiàn)，它竟然是滿寬的，這是因?yàn)?，?yè)面被默認(rèn)放大了兩倍，也就是640px，而iphone4或4s的寬，正是640px。

圖中把高密度的一類圈起來，是因?yàn)檫@是android手機(jī)的統(tǒng)計(jì)數(shù)據(jù)，在國(guó)內(nèi)安卓手機(jī)市場(chǎng)中，高密度的設(shè)備占了絕大多數(shù)的市場(chǎng)份額，這是很重要的一點(diǎn)，也是我們做安卓端webapp要注意的關(guān)鍵點(diǎn)（具體可查看億企邦《APP在IOS與Android系統(tǒng)界面設(shè)計(jì)規(guī)范》的相關(guān)介紹）。

4、viewport的使用

viewport總共有5個(gè)屬性，分別如下：

<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] " />

在這些屬性里面，我們重點(diǎn)關(guān)注target-densitydpi，這個(gè)屬性可以改變?cè)O(shè)備的默認(rèn)縮放。medium-dpi是target-densitydpi的默認(rèn)值，如果我們顯式定義target-densitydpi=device-dpi，那么設(shè)備就會(huì)按照真實(shí)的dpi來渲染頁(yè)面，打個(gè)比方說，一張320*480的圖片，放在iphone4里面，默認(rèn)是占滿屏幕的，但如果定義了target-densitydpi=device-dpi，那么圖片只占屏幕的四分之一（二分之一的平方），因?yàn)閕phone4的分辨率是640*960（具體可查看億企邦《關(guān)于移動(dòng)設(shè)備頁(yè)面尺寸參數(shù)和viewport的理解》的相關(guān)介紹）。

二、解決方案

使用W3C標(biāo)準(zhǔn)的HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）語言開發(fā)，能夠輕松實(shí)現(xiàn)跨平臺(tái)，移動(dòng)應(yīng)用開發(fā)者不再需要考慮復(fù)雜的底層適配和跨平臺(tái)開發(fā)語言的問題，與此同時(shí)，使用HTML來開發(fā)的Web App在投入上會(huì)大大的低于傳統(tǒng)的Native App。

1、簡(jiǎn)單粗暴

如果我們按照320px寬的設(shè)計(jì)稿去制作頁(yè)面，并且不做任何的設(shè)置，頁(yè)面會(huì)默認(rèn)自動(dòng)縮放到跟手機(jī)屏幕相等的寬度（這是由于medium-dpi是target-densitydpi的默認(rèn)值，和不同密度對(duì)應(yīng)不同縮放比例所決定的，這一切都是移動(dòng)設(shè)備自動(dòng)完成的），所以這種解決方案，簡(jiǎn)單、粗暴、有效，但有一個(gè)致命的缺點(diǎn)，對(duì)于高密度和超高密度的手機(jī)設(shè)備，頁(yè)面（特別是圖片）會(huì)失真，而且密度越多，失真越厲害。

2、極致完美

在這種方案中，我們采用target-densitydpi=device-dpi，這樣一來，手機(jī)設(shè)備就會(huì)按照真實(shí)的像素?cái)?shù)目來渲染，用專業(yè)的話來說，就是1 CSS pixels = 1 device pixels。

比如對(duì)于640*960的iphone，我們就可以做出640*960的頁(yè)面，在iphone上顯示也不會(huì)有滾動(dòng)條。

當(dāng)然，對(duì)于其他設(shè)備，也需制作不同尺寸的頁(yè)面，所以這種方案往往是使用媒體查詢來做成響應(yīng)式的頁(yè)面，這種方案可以在特定的分辨率下完美呈現(xiàn)，但是隨著要兼容的不同分辨率越多，成本就越高，因?yàn)樾枰獮槊恳环N分辨率書寫單獨(dú)的代碼，下面舉個(gè)簡(jiǎn)單的例子：

<meta name="viewport"content="target- densitydpi =device-dpi, width=device-width " />
#header {
background:url (medium-density-image.png);
}
@media screen and (- webkit -device-pixel-ratio:1.5) {
/* CSS for high-density screens */
#header { background:url (high-density-image.png);}
}
@media screen and (- webkit -device-pixel-ratio:0.75) {
/* CSS for low-density screens */
#header { background:url (low-density-image.png);}
}

3、合理折中

針對(duì)安卓設(shè)備絕大多數(shù)是高密度，部分是中密度的特點(diǎn)，我們可以采用一個(gè)折中的方案：我們對(duì)480px寬的設(shè)計(jì)稿進(jìn)行還原，但是頁(yè)面制卻做成320px寬（使用background-size來對(duì)圖片進(jìn)行縮?。?，然后，讓頁(yè)面自動(dòng)按照比例縮放。

這樣一來，低密度的手機(jī)有滾動(dòng)條（這種手機(jī)基本上已經(jīng)沒有人在用了），中密度的手機(jī)會(huì)浪費(fèi)一點(diǎn)點(diǎn)流量，高密度的手機(jī)完美呈現(xiàn)，超高密度的手機(jī)輕微失真（超高密度的安卓手機(jī)很少），這種方案的優(yōu)點(diǎn)非常明顯：只需要一套設(shè)計(jì)稿，一套代碼（這里只是討論安卓手機(jī)的情況）。

三、開發(fā)調(diào)試

其實(shí)Web APP說白了就是一個(gè)針對(duì)Iphone、Android優(yōu)化后的web站點(diǎn)，它使用的技術(shù)無非就是HTML或HTML5、CSS3、JavaScript，服務(wù)端技術(shù)JAVA、PHP、ASP。

需要注意的是web app開發(fā)還是比較有限的，因?yàn)閃eb APP開發(fā)不能整合設(shè)備的核心功能，比如發(fā)文本信息，也不能充分使用APP Store進(jìn)行銷售和更新，但是Web APP開發(fā)也有其優(yōu)勢(shì)所在。

1、weinre遠(yuǎn)程實(shí)時(shí)調(diào)試

Web開發(fā)者經(jīng)常使用Firefox的firebug或者Chrome的開發(fā)人員工具進(jìn)行Web調(diào)試，包括針對(duì)JavaScript，DOM元素和CSS樣式的調(diào)試，但是，當(dāng)我們期望為移動(dòng)Web站點(diǎn)或應(yīng)用進(jìn)行調(diào)試時(shí)，這些工具就很難派上用場(chǎng)。

weinre就是一個(gè)幫助我們?cè)谧烂鎭磉h(yuǎn)程調(diào)試運(yùn)行在移動(dòng)設(shè)備瀏覽器內(nèi)的Web頁(yè)面或應(yīng)用的調(diào)試工具，weinre是WEb INspector REmote的簡(jiǎn)寫，現(xiàn)在是Apache的一個(gè)開源項(xiàng)目，托管在github，下面億企邦將介紹如何在日常工作使用它：

首先，我們要下載weinre的jar包——項(xiàng)目官方已經(jīng)找不到該jar文件，網(wǎng)上能夠找到，這里億企邦建議搭建個(gè)獨(dú)立的web服務(wù)器，jar運(yùn)行后是一個(gè)本地的服務(wù)器，和web服務(wù)器差不多。

然后通過運(yùn)行dos命令來啟動(dòng)它（請(qǐng)注意在你的電腦上已經(jīng)安裝有JDK），運(yùn)行命令如下，需要把路徑改成你的實(shí)際文件位置：java -jar d:toolsweinre-jarweinre.jar –httpPort 8081 –boundHost -all- （httpPort是指定服務(wù)端口，boundHost參數(shù)說明可以使用IP訪問，all參數(shù)代表支持所有的host）。

訪問localhost:8081，如果看到如下的頁(yè)面，說明weinre已經(jīng)啟動(dòng)成功：

輸入debug client user interface地址（調(diào)試客戶端UI地址），本例中即：http://localhost:8081/client/#anonymous，其中#anonymous是默認(rèn)的調(diào)試id（debug id），如果這個(gè)weinre調(diào)試服務(wù)器只是由你一個(gè)人使用，那么你可以使用默認(rèn)的debug id：anonymous， 啟動(dòng)的weinre調(diào)試客戶端ui如下圖：

在需要調(diào)試的頁(yè)面加入中以下腳本：<script type=”text/javascript” src=”http://localhost:8081/target/target-script-min.js#anonymous”></script>，注意把localhost換成手機(jī)能夠訪問的真實(shí)IP地址，當(dāng)手機(jī)訪問這個(gè)頁(yè)面時(shí)，weinre客戶端就會(huì)檢測(cè)到目標(biāo)設(shè)備，然后就可以對(duì)它進(jìn)行調(diào)試了。

因?yàn)槭謾C(jī)上不方便截圖，我這里就用兩個(gè)瀏覽器窗口來展示效果，其實(shí)手機(jī)上的效果跟右邊是一樣的。

2、AVD模擬器調(diào)試

靜態(tài)頁(yè)面并不能滿足我們的需求，很多實(shí)際效果比如touch事件，滾動(dòng)事件，鍵盤輸入事件等，都需要在真實(shí)的環(huán)境下測(cè)試，這時(shí)就需要用到模擬器，就像我們測(cè)試ie6一樣，AVD模擬器可以類比于PC上的虛擬機(jī)，當(dāng)我們需要測(cè)試某一特定的機(jī)型時(shí)，我們可以新建一個(gè)AVD，進(jìn)行一系列的測(cè)試。

不過使用AVD的前提是已經(jīng)部署好android的開發(fā)環(huán)境，這個(gè)需要JDK + android SDK + Eclipse + ADT，還是稍微有點(diǎn)繁瑣。

3、手機(jī)抓包與配host

在PC上，我們可以很方便地配host，但是手機(jī)上如何配host，這是一個(gè)問題。

這里主要使用fiddler和遠(yuǎn)程代理，實(shí)現(xiàn)手機(jī)配host的操作，具體操作如下：

首先，保證PC和移動(dòng)設(shè)備在同一個(gè)局域網(wǎng)下；

PC上開啟fiddler，并在設(shè)置中勾選“allow remote computers to connect”

手機(jī)上設(shè)置代理，代理IP為PC的IP地址，端口為8888（這是fiddler的默認(rèn)端口），通常手機(jī)上可以直接設(shè)置代理，如果沒有，可以去下載一個(gè)叫ProxyDroid的APP來實(shí)現(xiàn)代理的設(shè)置。

此時(shí)你會(huì)發(fā)現(xiàn)，用手機(jī)上網(wǎng)，走的其實(shí)是PC上的fiddler，所有的請(qǐng)求包都會(huì)在fiddler中列出來，配合willow使用，即可實(shí)現(xiàn)配host，甚至是反向代理的操作。

億企邦點(diǎn)評(píng)：

Web App有App的特性，更有Web的特性，每一個(gè)Native App在當(dāng)前的用戶使用場(chǎng)景下是相對(duì)孤立的，而Web App則可以像傳統(tǒng)互聯(lián)網(wǎng)網(wǎng)頁(yè)那樣相互鏈接，從一個(gè)Web App直接跳轉(zhuǎn)到另外一個(gè)Web App，這無論是從用戶的使用體驗(yàn)層面還是從應(yīng)用之間的數(shù)據(jù)傳輸來看都是非常不錯(cuò)的選擇。