- 構建跨平臺APP：jQuery Mobile移動應用實戰（第2版） （跨平臺移動開發叢書）
- 李柯泉
- 3353字
- 2020-11-28 23:45:45
3.1 開發環境的選擇
jQuery Mobile能夠成功的一個原因是它能夠最大限度地簡化開發者所遇到的困難，因此自然不能為它配上太復雜的開發環境。對于新手來說，還是使用一些比較簡單的網頁開發工具輕松一些。本節將介紹幾款主流的編輯器——Sublime、Notepad++和WebStorm編輯器的使用方法及優缺點。
3.1.1 Sublime Text編輯器
Sublime Text是一個代碼編輯器（Sublime Text2是收費軟件，但可以無限期試用），也是HTML和先進的文本編輯器，如圖3-1所示。Sublime Text是由程序員Jon Skinner于2008年1月開發出來，它最初被設計為一個具有豐富擴展功能的Vim。
圖3-1 Sublime Text
使用Sublime Text的理由如下：
● 主流前端開發編輯器
● 體積較小，運行速度快
● 文本功能強大
● 支持編譯功能且可在控制臺看到輸出
● 內嵌python解釋器支持插件開發以達到可擴展目的
● ST支持的大量插件可通過Package Control進行管理
● Sublime Text是一個跨平臺的編輯器，同時支持Windows、Linux、Mac OS X等操作系統。
因此建議讀者一定要熟練掌握Sublime Text。
3.1.2 Notepad++編輯器
這是一款非常強大的編輯器，甚至有許多執拗的C++程序員，即使有Visual Studio這樣的開發環境也仍然堅持要在Notepad中編輯代碼，然后復制到Visual Studio中使用。可見他們對這款編輯器有著多么偏執的熱愛，這也從側面說明這款編輯器是不可取代的。
筆者剛開始并不喜歡這款編輯器，認為它之所以受到推崇不過是因為人云亦云的結果，直到真正面對海量的代碼時才發現使用它是多么的便捷。
首先，在安裝了Notepad之后，當右擊某一文件時會自動加載Notepad打開的快捷方式，如圖3-2所示，并且啟動非常迅速。
圖3-2 方便的快捷方式
這里先用它打開一個在后面章節會用到的例子，以便解釋Notepad的另一個優秀的特性：便捷的代碼折疊功能。再觀察圖3-3左側表示代碼行數的數字，好像不對，為什么13行后面會接著是31行呢？難道是bug？再看圖3-4與圖3-3有什么不同。
圖3-3 將13行至31行之間的代碼進行折疊
圖3-4 展開代碼
第13～31行之間的部分在圖3-4中顯示出來，而在圖3-3中該處則是多出了一條橫線，左側也多出了一個被包含在方塊中的“+”。這正是Notepad的一個優點，即可以方便地對部分代碼進行隱藏而不影響代碼的整體結構。
在HTML中，經常使用div標簽來包含一些內容，而且常常會出現多個div相互嵌套的情況，這樣即使有縮進也很難分清代碼的層次，更別說布局了。但是有了Notepad++后，這一切就不再是問題了。
接下來再介紹Notepad的另一個出眾的優點，即優秀的查找功能。它支持在多個文件中查找同一內容，圖3-5是在多個范例中同時查找帶有html字符串時給出的結果。當然它支持的不僅僅是簡單的查找替換功能，是它還可以支持正則表達式的模糊查找，如圖3-6所示。
圖3-5 對多個文件進行查找
圖3-6 Notepad具有強大的字符串查找功能
最后，Notepad++也是有代碼提示功能的。在Notepad++中執行“設置”|“首選項”|“備份與自動完成”|“所有輸入均使用自動完成”，即可打開Notepad++的代碼提示功能，還可以自行對其中的內容進行擴展。
提示
在目錄%windir%\Program Files\Notepad++\plugins\APIs\下存放的是代碼提示的配置文件，打開后可以看到諸多形如<KeyWord name="! DOCTYPE" />的標簽，其中name屬性的值就是可以提示的內容，可以根據需要自行添加。
3.1.3 WebStorm編輯器
WebStorm（圖3-7）是jetbrains公司旗下一款JavaScript開發工具。被廣大中國JS開發者譽為“Web前端開發神器”“最強大的HTML 5編輯器”“最智能的JavaScript IDE”等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。
圖3-7 WebStorm
WebStorm主要功能有：
（1）智能的代碼補全。支持不同瀏覽器的提示，還包括所有用戶自定義的函數（項目中）代碼補全包含了所有流行的庫，比如：JQuery、YUI、Dojo、Prototype、Mootools and Bindows。
（2）代碼格式化。代碼不僅可以格式化，而且所有規則都可以自己來定義。
（3）HTML提示。大家經常在JS代碼中編寫HTML代碼，這十分痛苦，不過有了智能提示，就爽多了。而且HTML里面還能有JS提示。
（4）聯想查詢。只需要按著Ctrl鍵點擊函數或者變量等，就能直接跳轉到定義。
（5）代碼重構。這個操作有些像Resharper，熟悉Resharper的用戶應該上手很快，支持重命名、提取變量/函數、內聯變量/函數、移動/復制、安全刪除等。
（6）代碼檢查和快速修復，可以快速找到代碼中的錯誤或者需要優化的地方，并給出修改意見，快速修復。
（7）代碼調試。支持代碼調試，界面和IDEA相似，非常方便。
（8）代碼結構瀏覽。可以快速瀏覽和定位。
（9）代碼折疊。功能雖小，不過勝在方便高效。
（10）包裹或者去掉外圍代碼。自動提示包裹或者去掉外圍代碼，一鍵搞定。
提示
WebStorm相對Sublime Text來說，比較耗內存。
3.1.4 在設備上測試應用
1．利用jQuery測試
開發移動應用自然要專注于測試在Opera、Safari、Chrome等瀏覽器下的效果，像IE 8和IE 6這樣的瀏覽器就可以不考慮，所以我們選擇jQuery2.1.4版本（在本書寫作時，jQuery Moblie也只支持到這個jQuery版本）。為了有針對性地測試應用的顯示效果，現在來介紹一種方法。
【范例3-1 利用jQuery獲取屏幕的高度和寬度】
01 <! DOCTYPE HTML> <! --聲明HTML 5-->
02
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <title>測試設備的分辨率</title>
06 <! --引用jQuery庫文件-->
07 <script src="jquery-2.1.4.min.js"></script>
08 <script type="text/javascript">
09 function show()
10 {
11 $width=$(window).width(); //獲取屏幕寬度
12 $height=$(window).height(); //獲取屏幕高度
13 $out="頁面的寬度是："+$width+"頁面的高度是："+$height;
14 alert($out); //使用對話框輸出屏幕的高度和寬度
15 }
16 </script>
17 </head>
18 <body>
19 <! --調用方法show()顯示頁面尺寸-->
20 <div style="width:100%; height:100%; margin:0px; " onclick="show(); ">
21 <h1>單擊屏幕即可顯示設備的分辨率！</h1>
22 </div>
23 </body>
24 </html>
保存后，可以將瀏覽器拖成一個手機屏幕的形狀，點擊屏幕的空白區域將會彈出對話框告訴開發者屏幕所占有的分辨率。如圖3-8是使用Firefox查看瀏覽器窗口的分辨率。
圖3-8 查看瀏覽器中的分辨率
然后可以按Ctrl+“加號鍵”或“減號鍵”配合鼠標拖動窗口形狀的方式，使瀏覽器的顯示區域恰好為所要適配的機型的分辨率，如圖3-9中將屏幕分辨率調成了800×400像素。
圖3-9 調整后的分辨率
注意
本書中大多數范例都是以這樣的方式來展示結果的。
提示
要調整得與期望的完全一致是一件極其需要耐心的工作，筆者為了把寬度調成400而不是399就花了十幾分鐘，其實完全沒有必要太在意這樣小小的誤差。幾個像素的差距剛好可以用來保證更好的屏幕適應效果。
2．在微信Web開發者工具上測試
微信公眾平臺為開發者提供Web開發者工具，用于幫助開發基于微信的網頁或者webapp。它是一個桌面應用，通過模擬微信客戶端的表現使得開發者可以使用這個工具方便地在PC或者Mac上進行開發和調試工作。使用基于weinre的移動調試功能，支持X5 Blink內核的遠程調試。利用集成的Chrome DevTools協助開發，如圖3-10所示。
圖3-10 微信web開發者工具上測試
3．利用Opera Mobile Emulator來測試
當然，利用jQuery來測試應用還有一定的缺陷，那么再來介紹一種更好的方法，就是利用Opera Mobile Emulator（Opera手機模擬器）來測試應用。它可以讓用戶在PC桌面上以手機的方式瀏覽網頁，重現手機瀏覽器的絕大多數細節。由于大多數移動設備均采用了Opera的內核，因此幾乎與真機沒有任何差別。
下面給出一個下載鏈接，讀者可以根據鏈接進行下載，也可以百度搜索這款軟件的名稱：
http://www.cngr.cn/dir/207/218/2011052672877.html
下載完之后經過簡單的幾步就可以運行了，不過運行之前還需要在本機架設一臺服務器，方便對Web頁面進行瀏覽，這里推薦一款軟件XAMPP，它可以方便地在Windows中架設WAMP（Windows、Apache、MySQL、PHP）環境，具體的方法會在本書的實戰環節介紹，當然讀者也可以先行嘗試。
安裝完Opera Mobile Emulator后，可以雙擊它的圖標開始運行，運行后的效果如圖3-11所示。
圖3-11 Opera Mobile Emulator的開始界面
可以直接在對話框的左側選擇以何種型號的手機顯示，目前數據還不是非常完整，但是也足夠使用。單擊Launch按鈕就可以打開瀏覽器了，這里選用了HTC Hero，如圖3-12所示。
圖3-12 在模擬器中打開百度主頁
提示
這里建議要使用分辨率高一些的屏幕（指的是電腦屏幕）。筆者現在用的筆記本是1366 ×768的分辨率，在模擬Samsung Galaxy S時面積就不夠用。
3.1.5 打包應用的方法
利用jQuery Mobile開發的應用主要有3種形式。
● 最常用的一種是與傳統Web一樣以網頁的形式展示出來。尤其是最近一段時間以來，一部分PC端的網頁也開始使用這種方式開發，都得到了不錯的效果。
● 第二種形式是利用工具把程序打包成APP。筆者的初衷是有一種方法能夠快速生成apk文件。而jQuery Mobile僅僅是一套輕量級的開源框架，要將它打包成apk文件就不得不依賴其他工具的幫助，如PhoneGap/Cordova。
● 第三種形式就是前面介紹的APICloud工具，第2章已經詳細介紹過，這里不贅述。
PhoneGap/Cordova在2.9.0以后，不提供直接下載了，都需要用node.js來安裝。Phonegap/Cordova的安裝較復雜些，需要安裝JDK、Apache ant、Android SDK、node js、Android Studio并且需要配置路徑，然后在node js里面運行。我們這里簡單介紹下，如果讀者安裝不上也可以參考完整的http://blog.csdn.net/wuyt2008/article/details/46341949文章介紹。當然如果感覺很復雜，還是使用前面介紹的APICloud，至少學習時可以簡單操作。
（1）安裝好node.js后，在命令行輸入
npm install -g phonegap
如圖3-13所示。
圖3-13 安裝PhoneGap/Cordova
（2）建立PhoneGap/Cordova項目，在node js里面輸入：
phonegap create my-app
cordova platform add -save android
（3）輸入之后在所選的目錄里邊會生成一些文件夾，如圖3-14所示。
圖3-14 目錄文件
（4）利用Android Studio（此工具需要單獨安裝）打開新創建的項目my-app，如圖3-15所示。運行這個項目的效果如圖3-16所示。
圖3-15 Android Studio打開項目
圖3-16 在安卓設備上的測試結果
- 物聯網射頻識別（RFID）技術與應用
- GitLab CI/CD 從入門到實戰
- 深度學習訓練營 21天實戰TensorFlow+Keras+scikit-learn
- Java高手真經·編程基礎卷：Java核心編程技術
- Android插件化開發指南
- 每天5分鐘玩轉OpenStack
- 計算機網絡系統集成技術基礎與解決方案
- 軟件開發大講堂·從入門到精通-第一輯（套裝共5冊）
- Spring in Action（第二版）中文版
- MATLAB函數速查手冊（修訂版）
- Google Android開發入門與實戰
- DDD工程實戰：從零構建企業級DDD應用
- 云原生Kubernetes全棧架構師實戰
- Spring 3.0就這么簡單
- Unity 4 3D開發實戰詳解