30天App開發從0到1 APICloud移動開發實戰 30天App开发从0到1 APICloud移动开发实战

鄒達APICloud聯合創始人兼CTO 

APICloud雲端一體平台的技術架構設計者及核心引擎的實現者，對大規模、高並發的雲端服務開發有著豐富的經驗。傑出的JavaScript全棧工程師，有十多年瀏覽器引擎及移動應用引擎開發經驗，先後參與過國內外多款瀏覽器引擎、JavaScript引擎和移動應用引擎的開發工作。同時也是混合模式開發技術的倡導者，是國內較早一批將Web與Native技術融合的實踐者。

李德興APICloud技術負責人

一直從事瀏覽器、JavaScript引擎及相關中間件技術的工作，參與過多個基於瀏覽器的移動中間件引擎的開發工作。精通Android操作系統，有豐富的App架構及開發經驗。熱愛新技術，熟悉HTML5和W3C規範，對HTML5和瀏覽器技術的實際應用有深入研究並付諸過大量實踐。

第一部分基礎教程：如何從零起步開發一款App 

第1章APICloud App開發流程3 
1.1 APICloud平台介紹4 
1.1.1查看APICloud平台能力4 
1.1.2開發模式、技術語言和平台定位6 
1.1.3技術、產品、生態、案例和商業模式10 
1.1.4開發者服務體系10 
1.1.5新手入門APICloud應用開發14 
1.2體驗完整項目的開發流程15 
1.2.1註冊APICloud賬號15 
1.2.2創建一個App項目15 
1.2.3編輯項目18 
1.2.4調試項目18 
1.2.5編譯項目21 
1.3小結22 

第2章搭建App整體框架，完成App靜態頁面開發23 
2.1啟動25 
2.1.1 APICloud App執行流程25 
2.1.2 Widget和Window 26 
2.1.3 App config.xml配置文件使用26 
2.1.4 APICloud引擎的兩個重要事件27 
2.2 APICloud應用設計思想27 
2.3界面和導航28 
2.3.1 APICloud應用的UI組成結構28
2.3.2 APICloud界面佈局5大組件29 
2.3.3 APICloud混合渲染模式30 
2.3.4查看APICloud引擎api對像功能32 
2.3.5屏幕適配33 
2.3.6前端框架33 
2.3.7狀態欄處理34 
2.3. 8 iPhone X的狀態欄處理35 
2.3.9優化點擊事件和tapmode 37 
2.3.10靜態頁面中建議遵循的佈局方法37 
2.4搭建App整體框架，完成App靜態頁面開發38 
2.4.1創建首頁的標題欄和Tab標籤組38 
2.4.2製作Tab頁面並添加點擊事件和動畫效果43 
2.4.3製作懸浮購物車信息欄48 
2.4.4跳轉到登錄頁面51 
2.4.5城市選擇菜單和事件通信52 
2.5小結55 

第3章聯調前後端數據接口，實現App數據從服務端動態獲取56 
3.1 APICloud提供的數據通信能力和相關API 57 
3.1.1 APICloud支持的通信協議57 
3.1.2用於HTTP通信的主要API 57 
3.2 APICloud數據云58 
3.2.1 APICloud數據云的用途58 
3.2.2 APICloud數據云的特點58 
3.3聯調前後端數據接口，實現App數據從服務端動態獲取59
3.3.1實現用戶註冊功能59 
3.3.2實現用戶登錄功能60 
3.3.3獲取商品列表數據62 
3.3.4顯示商品列表63 
3.4小結64 

第4章加載更新服務端數據，實現本地的數據存儲65 
4.1使用doT模板引擎66 
4.2本地存儲和圖片緩存67 
4.2.1 uzStorage 67 
4.2.2偏好設置67 
4.2.3文件68 
4.2.4 database 69 
4.2.5存儲容量69 
4.2.6沙箱機制70 
4.2.7資源訪問協議70 
4.2.8圖片緩存71 
4.3下拉刷新、上拉加載的實現71 
4.3.1下拉刷新72 
4.3.2上拉加載72 
4.4事件機制72 
4.4.1統一事件管理72 
4.4.2事件管理API 73 
4.4.3平台事件類型74 
4.5常用對話框窗口75 
4.6在指定的窗口中執行腳本76 
4.7加載更新服務端數據，實現本地的數據存儲77 
4.7.1使用doT模板引擎顯示商品列表77 
4.7.2實現圖片緩存78 
4.7.3實現下拉刷新79
4.7.4實現上拉加載更多81 
4.7.5實現保存登錄信息82 
4.7.6實現清除緩存84 
4.8小結85 

第5章使用擴展模塊API，完成App所需功能實現86 
5.1 APICloud擴展模塊87 
5.1. 1 APICloud端引擎架構87 
5.1.2 APICloud模塊調用過程88 
5.2自定義模塊88 
5.3使用UIScrollPicture 89 
5.4使用UIInput 91 
5.5使用UIActionSelector 92 
5.6多媒體相關模塊使用96 
5.7使用擴展模塊API，實現App所需功能96 
5.7 .1實現商品詳情頁輪播圖96 
5.7.2使用UIInput實現原生輸入框100 
5.7.3實現三級聯動的城市選擇器101 
5.7.4實現頭像上傳103 
5.8小結105 

第6章使用第三方開放服務模塊，完善App功能和業務邏輯106 
6.1集成第三方服務107 
6.2目前APICloud已經集成的第三方服務模塊107 
6.3自定義AppLoader 108 
6.3.1自定義AppLoader與官方AppLoader的區別108 
6.3.2為什麼要使用自定義AppLoader 109
6.3.3編譯生成自定義AppLoader 109 
6.4第三方服務模塊使用流程110 
6.5百度地圖模塊的接入和使用110 
6.5.1申請應用ID和Key 110 
6.5.2配置ID和Key 112 
6.5.3百度地圖的常用API 112 
6.6微信分享與登錄的接入和使用114 
6.6.1申請ID和Key 114 
6.6.2配置ID和Key 114 
6.6.3微信分享模塊的常用API 114 
6.7個推推送的接入和使用117 
6.7.1申請ID和Key 117 
6.7.2配置ID和Key 117 
6.7.3個推模塊的常用方法117 
6.8支付寶支付模塊的接入和使用118 
6.8.1申請應用ID和Key 118 
6.8.2配置應用ID和Key 118 
6.8.3支付寶模塊的常用API 119 
6.9使用第三方開放服務模塊，完善App功能和業務邏輯119 
6.9.1獲取當前城市119 
6.9.2根據輸入內容檢索地址列表121 
6.9.3使用個推進行消息推送123 
6.10小結124 

第7章使用APICloud應用管理服務，實現App發布和運營125 
7.1編譯生成App安裝包126
7.1.1雲編譯126 
7.1.2代碼全包加密127 
7.1.3擴展API調用安全配置127 
7.2版本管理128 
7.2.1在APICloud控制台管理版本128 
7.2.2 Config文件相關配置129 
7.2.3 mam模塊129 
7.3雲修復130 
7.3.1 Config文件相關配置和mam模塊130 
7.3.2製作並發布雲修復包130 
7.3.3相關API使用131 
7.4閃屏廣告131 
7.4.1在APICloud控制台使用閃屏廣告132 
7.4.2相關API使用132 
7.5優化策略133 
7.5.1了解HTML5特性133 
7.5.2窗口結構133 
7.5.3頁面加載速度134 
7.5.4不用重型框架134 
7.5.5屏幕適配134 
7.5.6數據加載134 
7.5.7圖片處理135 
7.5.8交互響應速度135 
7.5.9尊重系統特性135 
7.6編碼規範135 
7.7 Widget管理136 
7.7.1多Widget架構136 
7.7.2主Widget 137
7.7.3子Widget 137 
7.7.4 Widget管理相關API使用137 
7.8 SuperWebView 138 
7.8.1 SuperWebView介紹138 
7.8.2 SuperWebView特點138 
7.9使用APICloud應用管理服務，實現App的發布和運營管理138 
7.9.1編譯App 139 
7.9.2版本發布139 
7.9.3使用雲修復139 
7.9.4閃屏廣告140 
7.10小結140 

第二部分實戰技巧：如何開發一款優質的App 

第8章如何與眾不同143 
8.1自定義樣式的日期選擇器144 
8.1.1使用模塊UICustomPicker 144 
8.1.2開發流程及要點概述145 
8.2自動義樣式的三級聯動城市選擇器149 
8.2.1使用模塊：UILinkedPicker 150 
8.2.2開發流程及要點概述150 
8.3實現固定不動的下拉篩選菜單152 
8.4滑動頁面動態改變導航條顏色155 
8.4.1實現思路155 
8.4.2知識點說明155 
8.4.3核心部分代碼155 
8.5實現高斯模糊的背景圖片156 
8.6精緻0.5 px細線的實現158
8.7小結159 

第9章挖掘API潛力160 
9.1深入挖掘Frame的各種應用場景161 
9.1.1模擬頁面按鈕161 
9.1.2模擬窗口組件161 
9.1.3模擬側滑窗口163 
9.2使用UIScrollPicture模塊開發引導頁164 
9.2.1概述165 
9.2.2實現思路165 
9.3使用photoBrowser模塊實現自定義樣式的圖片瀏覽功能167 
9.3.1概述167 
9.3.2自定義樣式圖片瀏覽器功能實現步驟168 
9.4使用UIInput模塊實現自定義搜索界面170 
9.4.1概述170 
9.4.2自定義搜索界面實現步驟170 
9.5使用UIChatBox模塊實現聊天界面172 
9.5.1概述172 
9.5.2 UIChatBox模塊實現聊天界面實現步驟173 
9.6使用api.ajax進行網絡請求176 
9.7小結179 

第10章超級實用技巧180 
10.1如何讓頁面動態適配有虛擬按鍵欄的Android手機181 
10.2獲取手機驗證碼功能的實現182 
10.3打開一個外部鏈接作為新的頁面，並設置樣式以及事件監聽184 
10.4實現更換皮膚功能186
10.5實現多語言切換功能187 
10.6調用任意App 189 
10.6.1 URL Scheme應用場景189 
10.6.2 URL Scheme在APICloud中的應用189 
10.7數據表格的快速開發191 
10.7.1使用APICloud模塊實現數據表格的開發192 
10.7.2使用第三方JavaScript框架實現數據表格的開發193 
10.8 apiready與window.onload的平衡使用194 
10.8.1 apiready與window.onload區別194 
10.8.2 apiready與window.onload的使用時機194 
10.8.3應用實例195 
10.9地圖模塊的實用擴展：在地圖上添加自定義按鈕196 
10.10地圖搜索的高級應用：如何獲取城市地鐵線路列表198 
10.10.1需求分解198 
10.10.2功能實現198 
10.11極光推送的快速實現200 
10.11.1獲取App包名200 
10.11.2獲取極光推送AppKey 201 
10.11.3配置極光推送模塊202 
10.11.4在代碼中監聽推送消息202 
10.11.5開始推送203 
10.12小結204 

第11章性能優化探索205
11.1用imageCache緩存圖片206 
11.2數據不要從DOM上獲取208 
11.3流暢的用戶登錄體驗210 
11.3.1程序員的思維習慣210 
11.3.2正確的做法211 
11.3.3關鍵代碼實現211 
11.4合理使用同步/異步接口212 
11.4.1 JavaScript的同步/異步機制212 
11.4.2異步的優勢213 
11.4.3應用實例214 
11.5小結215 

第12章調試技巧216 
12.1調試技巧：使用Charles查看網絡請求217 
12.1.1查看HTTP請求217 
12.1.2查看HTTPS請求219 
12.2調試技巧：使用Charles模擬網絡請求222 
12.2.1請求示例代碼222 
12.2.2構建模擬數據223 
12.2.3使用本地文件作為接口返回值224 
12.3調試技巧：使用Safari斷點調試iOS應用226 
12.3.1從APICloud官網編譯安裝自定義AppLoader 226 
12.3.2顯示桌面Safari瀏覽器的“開發”菜單226 
12.3.3開啟iOS設備的Web檢查器功能226 
12.3.4把待調試代碼同步到AppLoader 227
12.3.5 Safari斷點調試iOS應用228 
12.4調試技巧：使用Chrome斷點調試Android應用229 
12.4.1從APICloud官網安裝AppLoader 230 
12.4.2在Android手機上開啟USB調試231 
12.4.3把待調試代碼同步到AppLoader 231 
12.4.4在Chrome中斷點調試232 
12.5小結235 

第三部分行業應用：如何快速開發主流行業App 

第13章如何快速開發一款IoT App 239 
13.1 IoT App的分類和功能240 
13.1.1 IoT App的分類240 
13.1.2 IoT App的主要功能240 
13.2 IoT App的技術架構241 
13.2.1兩方通信架構241 
13.2.2三方通信架構241 
13.2.3四方通信架構242 
13.3 IoT App中高頻使用的API 243 
13.3.1界面組件類模塊243 
13.3.2功能擴展類模塊244 
13.3.3開放服務類模塊245 
13.4如何使用APICloud開發一款IoT App 246 
13.5小結246 

第14章如何快速開發一款教育App 247 
14.1教育App的分類和功能248
14.1.1教育App的分類248 
14.1.2教育App的主要功能248 
14.2教育App的產品架構249 
14.2.1產品功能架構249 
14.2.2學習計劃架構250 
14.3教育App中高頻使用的API 250 
14.3.1 UI組件類模塊250 
14.3.2功能擴展類模塊251 
14.3.3開放服務類模塊252 
14.4如何使用APICloud開發一款教育App 253 
14.5小結253 

第15章如何快速開發一款直播App 254 
15.1直播App的分類和功能255 
15.1.1直播App的分類255 
15.1.2直播App的主要功能255 
15.2直播App技術架構256 
15.3直播App中高頻使用的API 256 
15.3.1 UI組件類模塊257 
15.3.2功能擴展類模塊258 
15.3.3開放服務類模塊258 
15.4如何使用APICloud開發一款直播App 259 
15.5小結260 

第16章如何快速開發一款電商App 261 
16.1電商App的分類和功能262 
16.1.1電商App的分類262 
16.1.2電商App的主要功能263
16.2電商App的產品結構263 
16.2.1前端產品結構263 
16.2.2後台產品結構264 
16.3電商App中高頻使用的API 265 
16.3.1 UI組件類模塊265 
16.3.2功能擴展類模塊266 
16.3. 3開放服務類模塊267 
16.4如何使用APICloud開發一款電商App 267 
16.5小結268 

附錄A APICloud App客戶端開發規範（Version 1.0） 269 
附錄B開發工具APICloud Studio 2使用詳解282