構建移動網站與APP : ionic移動開發入門與實戰 pdf epub mobi txt 電子書下載 2025

簡體網頁||繁體網頁

☆☆☆☆☆

秦超著

圖書標籤:

Ionic
移動開發
APP開發
移動網站
前端開發
HTML5
JavaScript
CSS3
混閤開發
Angular

下載連結在頁面底部

facebook linkedin mastodon messenger pinterest reddit telegram twitter viber vkontakte whatsapp 複製連結

想要找書就要到靜思書屋

book.idnshop.cc

立刻按 ctrl+D收藏本頁

你會得到大驚喜!!

齣版社：清華大學齣版社

ISBN：9787302462019

版次：1

商品編碼：12149372

包裝：平裝

開本：16開

齣版時間：2017-03-01

用紙：膠版紙

頁數：471

字數：780000

正文語種：中文

具體描述

産品特色

編輯推薦

對於隻有一些網頁開發基礎知識的讀者來說，ionic目前也許是這個星球上*適閤你的跨平颱移動開發技術框架瞭。從新手入門學習便捷性、功能快速擴充迭代與重構支持、團隊模塊化分工協作支持、應用前颱性能優化、跨平颱支持、開源免費和社區生態成熟度各項指標來看，業界已基本公認ionic都在開發速度、插件功能、組件成熟度以及背後開發團隊的專業性上達到瞭比較完美的平衡。相比其他跨平颱方案，ionic優勢明顯，而且其背後的框架主力開發商有長遠的升級路綫圖。本書以實例驅動講解的方式，讓移動開發零基礎讀者也能輕鬆掌握移動應用開發的技術，跟上目前的萬眾創新、全麵移動化乃至工業4.0的熱潮。

內容簡介

Ionic是目前集流行與成熟兩個特點於一身的跨平颱移動開發框架。本書以實例驅動講解的方式，讓僅有簡單網頁製作基礎知識的讀者，也能輕鬆掌握Ionic下的移動應用開發。
本書分為5篇，第1篇是移動開發準備篇，介紹瞭Ionic、Phonegap、Cordova、HTML5和移動開發的一些基礎知識；第2篇是Ionic基礎知識準備與常用庫篇，介紹瞭配置開發Ionic環境所依賴的AngularJS、SASS、Gulp、lodash等業內主流庫和工具；第3篇是Ionic組件完全解析篇，對Ionic內置的CSS樣式類和JavaScript組件類進行完整解析；第4篇是APP項目實戰篇，介紹瞭如何按照業內通行實踐的策劃、設計、開發過程完成2個使用Ionic開發的完整APP。第5篇是發布和推廣應用篇，介紹瞭在開發完成之後，如何為Android和iOS兩大移動平颱發布和推廣更新自己的APP。
本書內容詳盡、實例豐富，是廣大HTML 5愛好者、移動互聯網創業者、移動開發人員必備的參考書，同時也非常適閤大中專院校師生學習閱讀，也可作為高等院校計算機及相關專業教材。

作者簡介

秦超，畢業於華東理工大學。從事IT行業20年，互聯網技術的項目開發10年。近年曾參與傳統企業應用與移動APP的結閤和互聯網金融等多個項目的開發工作。

內頁插圖

第1章歡迎進入移動開發的世界 1
1.1 移動互聯網行業的浪潮 1
1.2 跨平颱移動開發框架 2
1.2.1 什麼是跨平颱移動開發框架 2
1.2.2 為什麼選擇跨平颱移動開發框架 3
1.2.3 可選的跨平颱移動開發框架簡介 4
1.2.4 什麼是PhoneGap / Cordova / Ionic 8
1.3 初識Ionic v1.x 8
1.3.1 為什麼選擇Ionic 9
1.3.2 基於Web技術HTML 5/CSS 3/JavaScript 10
1.3.3 基於AngularJS框架 11
1.3.4 接近原生APP應用的炫麗界麵組件 11
1.3.5 自適應（Responsive）布局 12
1.3.6 支持個（任）性定製 13
1.3.7 Ionic的缺點 13
1.3.8 Ionic的商業案例 14
1.3.9 Ionic的開源案例 15
1.3.10 Ionic的未來——Ionic v2.0 & AngularJS v2.0 16
1.4 學習完本書找工作與創業 17
1.4.1 從本書的項目實戰開始準備技術作品 17
1.4.2 Ionic 助力實現你的創業夢想 18
1.5 小結 18
第2章 Ionic 的開發調試環境安裝 19
2.1 Ionic 快速上手環境安裝 19
2.1.1 安裝Node.js和NPM 19
2.1.2 安裝Git 21
2.1.3 安裝Gulp和Bower 23
2.1.4 安裝Ionic CLI與Cordova 24
2.1.5 安裝設置Chrome瀏覽器（推薦） 25
2.1.6 Hello Ionic項目 27
2.1.7 使用瀏覽器驗證開發環境自動重載特性 28
2.2 Windows下安裝Android開發平颱 29
2.2.1 安裝Android開發環境 29
2.2.2 為測試項目增加Android平颱支持 34
2.2.3 連接Android實體機設備測試APP 34
2.2.4 不使用Android模擬器的說明 36
2.3 Apple OS X下安裝iOS與Android 開發平颱 36
2.3.1 安裝Xcode 37
2.3.2 為測試項目增加iOS平颱支持 37
2.3.3 連接iOS模擬器測試APP 37
2.3.4 低成本連接iOS實體機設備測試APP 38
2.3.5 安裝Android開發環境 40
2.3.6 為測試項目增加Android平颱支持 45
2.3.7 連接Android實體機設備測試APP 45
2.4 安裝開發工具Sublime Text 3（推薦） 47
2.4.1 安裝開發工具Sublime Text 3 47
2.4.2 安裝Ionic輔助編碼插件 48
2.5 小結 49
第3章 AngularJS v1.x入門初步 50
3.1 AngularJS整體結構概述 50
3.1.1 AngularJS實現瞭M.V.VM模式 51
3.1.2 AngularJS為JavaScript實現瞭模塊化 52
3.1.3 AngularJS實現瞭聲明式界麵 52
3.1.4 AngularJS實現瞭雙嚮數據綁定 52
3.2 代碼模塊與依賴注入 54
3.2.1 定義模塊與組件 54
3.2.2 使用模塊與組件依賴注入 55
3.2.3 AngularJS模塊與JavaScript文件 56
3.3 數據作用域與控製器 56
3.3.1 在控製器內初始化作用域對象 56
3.3.2 使用作用域對象 57
3.3.3 控製器與作用域的反模式 59
3.4 指令和過濾器 59
3.4.1 指令Directive是什麼 60
3.4.2 自定義指令及使用 60
3.4.3 使用過濾器Filter 62
3.5 服務類組件 63
3.5.1 Provider服務組件詳解 64
3.5.2 Factory服務組件詳解 65
3.5.3 Service服務組件簡介 66
3.5.4 服務類組件特性總結 67
3.6 一個簡單的AngularJS項目：實時自選股行情頁 67
3.7 小結 76
第4章其他基礎知識與Ionic項目結構 77
4.1 SASS 入門 77
4.1.1 變量與計算 78
4.1.2 樣式嵌套 79
4.1.3 單行注釋 // 81
4.1.4 繼承@extend 82
4.1.5 混入@mixin與@include 83
4.1.6 顔色計算 85
4.1.7 引入文件@import 86
4.1.8 條件語句@if和@else 87
4.2 lodash（可選學） 87
4.2.1 使用場景 87
4.2.2 引入到項目 88
4.2.3 進一步學習指南 88
4.3 Gulp使用簡介（可選學） 89
4.3.1 Gulp主文件gulpfile.js的執行原理 89
4.3.2 獲取流函數src 90
4.3.3 寫文件函數dest 91
4.3.4 監視文件變化函數watch 92
4.3.5 定義任務函數task 93
4.3.6 解析Ionic項目Gulp主文件 94
4.4 Ionic項目模闆目錄結構簡介 95
4.4.1 常用工作目錄 www 96
4.4.2 常用工作目錄scss 96
4.4.3 常用工作目錄 resources 97
4.4.4 重要文件package.json 97
4.4.5 重要文件config.xml 97
4.4.6 其他目錄與文件簡介 98
4.5 小結 98
第5章 Ionic內置CSS樣式 99
5.1 柵格布局解析 100
5.1.1 基本行與列CSS類 101
5.1.2 指定列寬比例與自定義 102
5.1.3 指定列相對偏移比例 105
5.1.4 縱軸對齊方式 107
5.1.5 響應式柵格 109
5.1.6 示例：錶情包圖片庫瀏覽頁 111
5.2 固定標題欄 113
5.2.1 固定標題條 114
5.2.2 固定頂欄 114
5.2.3 固定底欄 115
5.3 按鈕 116
5.3.1 普通按鈕與配色結閤 116
5.3.2 按鈕尺寸、寬度樣式 118
5.3.3 無填充色按鈕與文本型按鈕 119
5.3.4 圖標按鈕 120
5.3.5 標題欄按鈕 121
5.3.6 按鈕條 123
5.4 列錶容器 124
5.4.1 分割條式列錶項 125
5.4.2 列錶項內圖標 126
5.4.3 列錶項內按鈕 127
5.4.4 列錶項內頭像 128
5.4.5 列錶項內縮略預覽圖 129
5.4.6 有邊距的列錶 130
5.5 展示卡 131
5.5.1 普通卡 132
5.5.2 增加標題欄裝飾效果 133
5.5.3 卡列錶 134
5.5.4 卡內圖片 134
5.5.5 Facebook型展示卡 135
5.6 錶單控件樣式 137
5.6.1 輸入字段名提示 137
5.6.2 輸入控件圖標 140
5.6.3 有邊距的輸入錶單 141
5.6.4 輸入控件單獨設置邊距 141
5.6.5 標題欄上放置文本輸入控件 142
5.7 開關類組件 142
5.8 範圍選擇組件 144
5.9 選擇框組件 145
5.10 選項卡欄 146
5.10.1 普通文本型選項卡 147
5.10.2 圖標型選項卡 148
5.10.3 圖標置頂或置左型選項卡 149
5.10.4 選項卡指示條 151
5.11 自定義主題顔色 152
5.12 可用圖標集 154
5.13 內邊距微調 155
5.14 小結 155
第6章 Ionic內置JS組件概述 156
6.1 Ionic內置JS組件 156
6.1.1 組件分類與前後綴說明 156
6.1.2 Ionic內置JS組件與CSS樣式類集成 157
6.1.3 Ionic內置JS組件與AngularJS 集成 157
6.2 使用JS組件的常見問題解決辦法 158
6.2.1 交互調試部署到Android設備上的Ionic應用 158
6.2.2 設備上顯示白屏幕錯誤問題調試 159
6.2.3 使用Batarang進行性能分析 160
6.3 小結 161
第7章 Ionic內置布局類組件 162
7.1 固定標題欄 162
7.2 內容顯示相關組件 164
7.2.1 內容展示容器 164
7.2.2 內容滾動容器 167
7.2.3 內容容器對象滾動服務 169
7.2.4 加載新內容滾動觸發器 169
7.2.5 下拉刷新組件 171
7.3 小結 173
第8章 Ionic內置導航類組件 174
8.1 導航框架相關組件 175
8.1.1 導航視圖容器與視圖 175
8.1.2 定製頂部導航欄 179
8.1.3 瀏覽曆史服務 182
8.2 選項卡相關組件 183
8.2.1 選項卡欄與選項卡 183
8.2.2 選項卡服務 188
8.3 側欄菜單相關組件 189
8.3.1 側欄菜單框架 189
8.3.2 側欄菜單顯示設置 194
8.3.3 側欄菜單服務 194
8.4 導航應用綜閤實戰：個人電子簡曆APP框架 195
8.5 小結 201
第9章 Ionic內置數據展示與操作組件 202
9.1 列錶相關組件 202
9.1.1 列錶容器與列錶項定製 202
9.1.2 列錶服務 205
9.1.3 列錶高性能顯示優化 206
9.2 錶單輸入相關組件 208
9.3 對話框類相關組件 209
9.3.1 模態框 209
9.3.2 浮動框 211
9.3.3 彈齣框 213
9.3.4 上拉菜單 216
9.3.5 背景幕布 218
9.3.6 對話框類組件綜閤示例 218
9.4 加載中提示相關組件 226
9.4.1 加載中指示器 226
9.4.2 加載中指示服務 227
9.5 輪播組件 229
9.6 手勢事件與服務組件 232
9.6.1 Ionic手勢事件類型 232
9.6.2 手勢事件 232
9.7 鍵盤組件 233
9.7.1 鍵盤插件 233
9.7.2 懸浮底欄指令 234
9.8 小結 234
第10章 Ionic內置基礎服務組件與設備平颱客製化 235
10.1 平颱服務組件 235
10.2 其他工具 237
10.2.1 應用基礎配置 237
10.2.2 設備信息與基本操作 238
10.2.3 DOM信息與基本操作 240
10.2.4 DOM元素位置信息 240
10.2.5 事件管理 241
10.3 設備平颱客製化 242
10.3.1 設備平颱CSS樣式類 242
10.3.2 使用AngularJS客製化平颱風格示例 244
10.4 小結 246
第11章藉助插件接近無限可能 247
11.1 Cordova插件 247
11.1.1 搜索可用的插件 247
11.1.2 插件管理（安裝、刪除、顯示已裝插件） 248
11.1.3 cordova-plugin-battery-status插件使用示例 249
11.1.4 cordova-plugin-whitelist插件說明 251
11.2 ngCordova插件集 253
11.2.1 安裝ngCordova插件集 253
11.2.2 ngCordova插件使用步驟概要 254
11.2.3 插件$cordovaDevice使用示例 257
11.2.4 插件$cordovaToast使用示例 258
11.2.5 插件$cordovaContacts使用示例 259
11.2.6 插件$cordovaLocalNotification使用示例 260
11.2.7 插件$cordovaGeolocation使用示例 260
11.2.8 插件$cordovaVibration使用示例 262
11.2.9 插件$cordovaCamera使用示例 262
11.2.10 插件$cordovaSocialSharing使用示例 264
11.2.11 插件$cordovaNetwork使用示例 265
11.2.12 插件$cordovaSQLite使用示例 266
11.3 小結 267
第12章後端服務器模擬環境搭建準備 268
12.1 MongoDB安裝與測試 268
12.2 Postman安裝與使用示例 271
12.3 使用Express初始化創建API示例 274
12.4 使用Mongoose完善數據持久化示例 282
12.5 使用Passport加入用戶驗證示例 287
12.6 小結 296
第13章項目實戰：逍遙遊APP v0.1(UGC+B2C應用) 297
13.1 項目和代碼說明 297
13.1.1 項目說明 297
13.1.2 隨書代碼運行說明 298
13.2 功能設計 298
13.2.1 界麵與功能概述 300
13.2.2 服務端API接口概述 303
13.3 功能實現 303
13.3.1 準備工作：部署服務器端環境 304
13.3.2 初始化項目設置與目錄結構 305
13.3.3 實現總體界麵導航與路由 306
13.3.4 實現側欄菜單功能集 312
13.3.5 實現旅友行蹤功能集 321
13.3.6 實現我的足跡功能集 332
13.3.7 實現預約旅遊産品功能集 351
13.3.8 實現設置功能集 363
13.3.9 定製啓動屏與APP圖標 371
13.4 小結與作業練習 371
第14章項目實戰：銷售掌中寶v0.1 （企業應用） 373
14.1 項目和代碼說明 373
14.1.1 項目說明 374
14.1.2 隨書代碼運行說明 374
14.2 功能設計 375
14.2.1 界麵與業務功能概述 375
14.2.2 服務端API接口概述 378
14.3 功能實現 379
14.3.1 準備工作：部署服務器端環境 379
14.3.2 初始化項目設置與目錄結構 381
14.3.3 完成總體界麵導航與路由 382
14.3.4 實現側欄菜單與登錄/退齣功能 387
14.3.5 實現商機業務功能集 391
14.3.6 實現拜訪業務功能集 404
14.3.7 實現客戶業務功能集 420
14.3.8 實現訂單業務功能集 434
14.3.9 實現報錶顯示與初步配置 446
14.4 小結與作業練習 455
第15章應用的生成與發布更新 456
15.1 生成發布Android平颱的應用包 456
15.1.1 生成發布版的apk文件 456
15.1.2 生成用於簽名的私鑰 457
15.1.3 對apk文件簽名 457
15.1.4 優化apk文件並改名 458
15.1.5 發布Android應用 459
15.2 生成發布iOS平颱的應用 459
15.2.1 使用開發者賬戶連接Xcode 460
15.2.2 簽名 460
15.2.3 設置應用的標識名 461
15.2.4 開始應用上架登記 462
15.2.5 嘗試編譯生成正式發布版的應用 465
15.2.6 使用Xcode打包APP應用 465
15.2.7 創建應用的發布檔 466
15.2.8 完成應用上架登記 467
15.3 更新應用 470
15.4 小結 471

精彩書摘

第 4 章
其他基礎知識與Ionic項目結構
本書第3章介紹的AngularJS技術是一個結構復雜龐大、組件配閤緊密的框架，熟練掌握瞭AngularJS就已經基本上跨過瞭Ionic開發的門檻。不過除瞭提供AngularJS功能組件外，Ionic還為前端組件定製瞭美觀的樣式，並使用業內流行的前端工具整閤瞭自動化的項目開發工具鏈。
因此在全麵介紹Ionic的組件和開發前，安排瞭本章介紹掌握Ionic開發需要瞭解的SASS樣式開發和構建工具Gulp。*後將Ionic項目的整體目錄文件結構做一個說明，這樣讀者未來在需要開發或是閱讀調試代碼時，就知道該到什麼位置去查看瞭，而不是漫無目的地憑直覺瞎找。
本章的主要知識點包括：
? SASS基礎知識
? lodash庫簡單說明
? Gulp原理與常用模塊介紹
? Ionic項目模闆目錄結構解析
4.1 SASS 入門
SASS是一種對CSS進行瞭擴充的開發工具，它提供瞭許多便利的寫法，使得CSS的開發變得簡單和可維護，大大節省瞭樣式設計者尤其是有編程背景的樣式設計者的時間。符閤SASS語法的文件就是普通的文本文件，裏麵可以直接使用CSS語法。SASS文件後綴名是.scss，意思為Sassy CSS。因此有時候SASS和SCSS兩個詞是可以混用的。
Ionic提供的樣式文件就是基於SASS開發的。考慮到部分讀者從未接觸過SASS，本書將重點介紹Ionic涉及的SASS語法，並不打算變成一個完整的SASS說明文檔。有通讀需要的讀者可以到SASS的官方網站學習SASS的更多特性和樣例：http://sass-lang.com/documentation/file.SASS_REFERENCE.html。
編寫完成的SASS文件需要經過編譯處理轉換成瀏覽器可以識彆的CSS代碼，在Ionic裏有本章4.3節介紹的Gulp調用相關模塊完成編譯。在開發者日常編寫調試時，可以使用一個在綫SASS服務網站（http://www.sassmeister.com/）的即時編譯轉換功能獲得CSS代碼，如圖4.1所示。

圖4.1 使用在綫網站（http://www.sassmeister.com/）的即時編譯轉換功能獲得CSS代碼
4.1.1 變量與計算
SASS允許定義變量，變量需要冠以$前綴，如：
$period : 1s;
$effect : ease-in;
$trans_property : all;
a {
-moz-transition: $trans_property $period $effect;
-webkit-transition: $trans_property $period $effect;
-o-transition: $trans_property $period $effect;
transition: $trans_property $period $effect;
}
經轉換後的CSS代碼為：
a {
-moz-transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in;
}
【代碼解析】從代碼上看似乎使用SASS變量的源代碼更長，但是有瞭變量遇到以後的調整變化時，就隻需要在變量定義的地方變更值，而不用通過全文搜索去替換。相信有過網站維護經驗的讀者能夠體會SASS變量的好處。這也是Ionic在定義CSS樣式類使用的*常見模式。
如果變量需要鑲嵌在字符串之中，就必須需要寫在#{}之中，如：
$side : left;
$default_radius : 5px;
.rounded {
border-#{$side}-radius: $default_radius;
}
經轉換後的CSS代碼為：
.rounded {
border-left-radius: 5px;
}
【代碼解析】這種字符串替換經常被使用在組閤型的CSS屬性名上。
SASS允許在代碼中使用計算錶達式，如：
$var : 2;
$more_px : 10px;
body {
margin: (16px/2);
top: 100px + 5 * $more_px;
right: $var * 10%;
}
經轉換後的CSS代碼為：
body {
margin: 8px;
top: 150px;
right: 20%;
}
【代碼解析】變量也可以齣現在計算錶達式中，這樣就更靈活瞭。
4.1.2 樣式嵌套
標準的CSS隻能支持單層的選擇器{}塊結構，對於習慣瞭JavaScript開發的人來說無疑是值得改進的一個地方。而經SASS擴展，可以允許無限層的選擇器嵌套，如：
$default_font_size: 100%;
.container {
h1 {
color:red;
font-size: $default_font_size * 2;
}
h2 {
color:blue;
font-size: $default_font_size * 1.5;
}
}
經轉換後的CSS代碼為：
.container h1 {
color: red;
font-size: 200%;
}
.container h2 {
color: blue;
font-size: 150%;
}
【代碼解析】從代碼可以看到，生成後的CSS代碼是鬆散的平麵結構，而SASS的代碼明顯更有邏輯性。
CSS屬性名也可以嵌套生成，如：
div.container {
border: {
color: green;
}
border-left: {
color: red;
}
}
經轉換後的CSS代碼為：
div.container {
border-color: green;
border-left-color: red;
}
【代碼解析】從代碼可以看到，在border和border-left後分彆加上冒號後，生成的CSS會使用-號來連接生成*終的屬性名。
在嵌套的代碼塊內，可以使用&占位符錶示引用父元素。如：
a {
&:link { color: blue; }
&:visited { color: green; }
&:active { color: blue; }
&:hover {
color: red;
font-weight: bold;
}
}
經轉換後的CSS代碼為：
a:link {
color: blue;
}
a:visited {
color: green;
}
a:active {
color: blue;
}
a:hover {
color: red;
font-weight: bold;
}
【代碼解析】從本示例代碼的裏可以看齣使用SASS的深層嵌套在屬性較多時有可能可以減少編寫的代碼量，代碼結構也更具有可讀性。
4.1.3 單行注釋 //
SASS是CSS的超集，因此標準的CSS注釋 /* comment */ ，會保留到編譯後生成的文件。而為瞭方便開發人員的調試，SASS支持瞭類似JavaScript的單行注釋符//，如：
/*
這是單行注釋，將被保留
*/
p{
color: red; // 單行注釋示例
font-size: 10px; /* CSS原生注釋風格示例 */
}
經轉換後的CSS代碼為：
/*
這是單行注釋，將被保留
*/
p {
color: red;
font-size: 10px;
/* CSS原生注釋風格示例 */
}
【代碼解析】*終在生成的CSS代碼裏，標準的CSS注釋被保留，單行注釋符//被忽略省去，齣於保護目的不願把內部注釋發布到網上的開發者也可以考慮使用這個方法。
4.1.4 繼承@extend
SASS允許一個選擇器繼承另一個選擇器，如：
.classParent1{
border: 1px solid #ddd;
}
.classParent2{
color: red;
text-align: center;
}
.classChild {
@extend .classParent1;
@extend .classParent2;
font-size:120%;
}
p {
@extend .classParent1;
@extend .classParent2;
font-size:120%;
}
經轉換後的CSS代碼為：
.classParent1, .classChild, p {
border: 1px solid #ddd;
}
.classParent2, .classChild, p {
color: red;
text-align: center;
}
.classChild {
font-size: 120%;
}
p {
font-size: 120%;
}
【代碼解析】這裏可以看到SASS跟CSS代碼相比的好處是既通過@extend繼承瞭父CSS類的樣式屬性，又把相關的聲明都放在子CSS類或子元素聲明裏，這樣的代碼結構可閱讀可維護性明顯更佳。
此處的通過@extend隻能繼承CSS類，即父類隻能是CSS類，而不能是元素。
4.1.5 混入@mixin與@include
*早的SASS是用Ruby開發的，因此該語言的作者引入瞭一些類似Ruby的語言結構，其中就有用於實現多重繼承的混入（Mixin）。混入有點像C語言的宏，是可以定義以後在被引入的地方展開而達到重用的代碼塊。
首先需要使用@mixin命令，定義一個代碼塊，隨後再使用@include命令，調用這個混入代碼塊使之原地展開，如：
$border-width : 1px;
@mixin left-setting {
float: left;
margin-left: 10px;
padding-left: 2px;
border-left: $border-width;
}
div {
@include left-setting;
}
經轉換後的CSS代碼為：
div {
float: left;
margin-left: 10px;
padding-left: 2px;
border-left: 1px;
}
【代碼解析】如代碼所示，混入定義本身並不生成CSS代碼，它類似於靜態庫被嵌入，當一個元素或者CSS類引入瞭多個混入代碼塊，則就相當於實現瞭多重繼承的概念瞭。
此處變量$border-width的定義位置需要在名為left-setting的混入之前，否則將無法獲取該變量的值。這種要求是SASS編譯器本身的限製導緻的。
混入還可以指定參數和默認值，既像C語言的宏又強於它，如：
@mixin left-setting($border-width: 3px) {
float: left;
margin-left: 10px;
padding-left: 2px;
border-left: $border-width;
}
div {
@include left-setting;
}
div.special{
@include left-setting(5px);
}
經轉換後的CSS代碼為：
div {
float: left;
margin-left: 10px;
padding-left: 2px;
border-left: 3px;
……

前言/序言

Ionic是一個開源免費、技術先進，並獲得業內廣泛認可的跨平颱的移動開發框架。它是基於主流技術HTML 5和AngularJS的快速開發工具，在極大地解放開發創業者的時間和學習成本的同時又融閤瞭成熟的前端工程技術實踐的成果。遺憾的是，由於Ionic涉及瞭前端技術界各種先進技術並不斷演進，目前網絡上為初學者采納的Ionic的中文資料不僅散亂不成體係，而且很多內容與Ionic的官方資料有較大的齣入，也沒有較好的開源項目可以藉鑒。國內的初學者想要短時間完全掌握並成功上手開發齣一個可用的APP需要走很多彎路。因此作者結閤自己的學習與開發經驗，在本書以學習Ionic開發的前置基礎知識如AngularJS框架、SASS、Gulp等技術麵為起點，闡述瞭Ionic框架的所有組件使用方法之後，輔以兩個涵蓋前後端實現的Ionic項目完整解析來引導學習者*終掌握Ionic框架及其周邊技術。本書的目的是力求通過官方*資料，理論與實戰項目相結閤使讀者在練習與模仿中熟練掌握利用Ionic快速開發跨平颱移動APP的方法，並能夠真實地將技術轉化為經濟利益和創業成果。本書的定位就是為想在移動應用領域找工作或創業的人士提供加速器。
本書是一本與眾不同的書
1．以練帶學
本書采用實例驅動的方式介紹Ionic框架下的APP開發。在介紹書中重要的知識點如AngularJS、應用的頁麵導航、調用移動設備的硬件功能等後，緊接著就有實例來驗證與解釋如何應用，*後還通過兩個中型項目來復習和鞏固所學知識點。
2．跨平颱
本書開發的項目是跨平颱應用，因此書中對Windows和Mac兩種開發環境下如何配置、生成與發布Android和iOS移動APP應用都做瞭解析。
3．案例涵括Internet和企業應用
本書的項目案例從其業務領域到功能點設置都參考瞭目前市麵上流行的Internet與企業移動應用，同時也提供瞭讀者進一步優化和打造自己産品的建議與外部參考資源。
4．低門檻、淺閱讀，輕輕鬆鬆就能學會
為使本書更加詳盡易懂，每寫完一章，筆者邀請瞭想要跨專業入門移動開發的大學在校生閱讀並提齣意見，通過它們快速分析齣被遺漏的知識點和講解不清的技術點，使本書更方便初學者入門。
本書的知識結構
本書共5篇15章，主要章節規劃如下。
*篇（第1~2章）移動開發準備
跨平颱的框架有很多， Ionic的獨特優勢在哪裏導緻它的風行？決定選擇它後，又如何為它搭建開發與測試環境，並開發*個Hello World應用？一個Ionic的應用如何使用瀏覽器、模擬器和實體機測試？如何打包應用到實體機上？使用何種開發工具加速開發進程？這些都是本篇要介紹的內容。
第二篇（第3~4章）Ionic基礎知識準備與常用庫
Ionic構建於目前先進的前端技術框架與工具集之上，不瞭解這些背景知識點是無法正確理解和應用Ionic框架的強大功能的。因此本篇介紹瞭配置開發Ionic環境所依賴的AngularJS、SASS、Gulp、lodash等這些業內主流的庫和工具，以及Ionic CLI。*後以一個完整的Ionic項目模闆的目錄文件結構解析幫助讀者瞭解一個Ionic應用的構成元素與結構。
第三篇（第5~11章）完整解析Ionic框架的官方組件
本篇基於Ionic官方文檔和筆者在實際項目中的經驗，對Ionic內置的CSS樣式類和JavaScript組件類進行完整解析，並通過豐富的代碼與效果案例介紹其使用場景與定製途徑。此外本篇也說明瞭常用的Cordova插件和安裝使用方法，使APP應用能夠使用手機硬件設備專有功能如照相、地理定位、震動，分享到其他社交應用等。
第四篇（第12~14章）APP項目前後端實戰篇
本篇是關鍵的綜閤實戰篇，詳細介紹瞭如何依照業內通行的敏捷過程來進行設計、開發，從而完成2個使用Ionic開發的APP應用。除瞭綜閤使用瞭前文介紹的Ionic組件外，還詳述瞭如何配置與測試後端服務的API、集成高德地圖、百度ECharts圖錶等技術，這都是在實際的APP項目中常常會遇到的需求功能點。
第五篇（第15章）發布和推廣更新APP應用
內容不多，卻是一個APP走嚮市場和客戶的*終一步。本篇講述瞭將使用Ionic框架開發的跨平颱應用為Android和iOS兩大平颱打包的完整過程。此外還介紹瞭發布和更新應用的方法，使讀者能真正將開發的應用轉化為經濟效益。
本書麵嚮的讀者
? HTM 5入門者與HTML 5愛好者
? 移動互聯網創業者
? 基於HTML 5的開發人員
? 各種平颱下的移動開發人員
? 從其他開發語言轉行做移動開發的人員
? 前端開發人員和前端設計人員
? Ionic入門學習者
? 大中專院校的學生
? 可作為各種移動應用培訓學校的入門教程
代碼下載
本書由秦超主筆，其他參與創作的人員還有宋士偉、張倩、周敏、魏星、鄒瑛、王鐵民、殷龍、李春城、張興瑜、鬍鬆濤、李柯泉、林龍、趙殿華、牛曉雲。
編者
2017年1月

書名：構建響應式Web應用：前端技術棧解析與實踐內容簡介：在數字化浪潮洶湧而來的今天，如何構建既能適應不同設備尺寸，又能提供流暢用戶體驗的Web應用，已成為前端開發的核心命題。本書將帶領您深入探索構建現代響應式Web應用的方方麵麵，從基礎概念到高級實踐，全麵解析驅動這一過程的關鍵技術棧。第一部分：響應式設計的基石——HTML5與CSS3深度解析本部分將迴歸Web應用開發的根本，深入剖析HTML5和CSS3這兩個構成網頁骨架與樣式的核心技術。我們將不僅僅停留在語法層麵，而是著重於如何利用它們構建靈活、可伸縮的布局。 HTML5：語義化與新特性語義化HTML的重要性：學習如何使用`header`, `nav`, `main`, `article`, `section`, `aside`, `footer`等語義化標簽，不僅能提升網頁的可訪問性和SEO錶現，更能使代碼結構更清晰，易於維護。我們將通過實際案例演示，如何擺脫陳舊的`div`嵌套，擁抱更具錶達力的HTML5結構。多媒體與交互新元素：深入講解`audio`, `video`標簽的靈活應用，以及`canvas`和`SVG`在動態圖形和可視化方麵的潛力。探討`form`元素的增強，如新的輸入類型（`email`, `number`, `date`等）和屬性（`required`, `pattern`等），以及它們如何簡化用戶輸入和前端驗證。 Web Components初探：介紹Web Components的概念，包括Custom Elements, Shadow DOM, HTML Imports（盡管部分已被棄用，但理解其思想有助於理解組件化），以及它們如何在不依賴框架的情況下實現組件化開發。 CSS3：響應式布局的魔法 Flexbox布局（彈性盒子模型）：詳細講解Flexbox的核心概念：容器（flex container）與項目（flex item），主軸（main axis）與交叉軸（cross axis），以及`justify-content`, `align-items`, `flex-grow`, `flex-shrink`, `flex-basis`等屬性。通過豐富的實戰示例，演示如何利用Flexbox輕鬆實現單行或多行布局的對齊、分布和伸縮，解決傳統float布局的痛點。 CSS Grid布局：深入理解CSS Grid的強大之處，包括定義網格容器、網格項、行（rows）和列（columns），以及`grid-template-rows`, `grid-template-columns`, `grid-gap`, `grid-area`等屬性。本書將重點展示Grid如何在二維空間上創建復雜且靈活的頁麵布局，輕鬆實現響應式導航、卡片式布局、主內容區域與側邊欄的劃分等，甚至可以實現“所見即所得”的布局方式。媒體查詢（Media Queries）：詳細介紹媒體查詢的語法和應用場景。講解如何基於屏幕寬度、設備方嚮、分辨率等媒體特性，為不同設備尺寸應用不同的CSS樣式，從而實現真正的響應式設計。我們將展示如何構建“Mobile First”或“Desktop First”的策略，以及如何使用斷點（breakpoints）進行精細化控製。響應式排版與圖片：探討如何使用相對單位（`em`, `rem`, `%`, `vw`, `vh`）創建隨屏幕尺寸縮放的字體大小和元素尺寸。講解`max-width`, `object-fit`等屬性如何優化圖片在不同容器中的顯示效果，以及`

用戶評價

評分☆☆☆☆☆

我一直以來都對跨平颱移動開發抱有濃厚的興趣，尤其是那種能夠用一套代碼同時運行在 iOS 和 Android 上的技術。Ionic 作為一個基於 Web 技術的框架，自然引起瞭我的注意。這本書的內容安排非常巧妙，它並沒有僅僅停留在理論層麵，而是非常注重實操。從最基礎的項目搭建、組件的使用，到更高級的路由管理、狀態管理，再到如何調用原生設備功能（比如相機、地理位置），每一個環節都剖析得淋灕盡緻。我尤其欣賞書中對於不同組件的講解，不僅僅是羅列 API，更是通過實際的案例，展示瞭這些組件在真實應用中的用法和最佳實踐。比如，在講到錶單處理時，書中提供瞭多種不同的錶單驗證方式，並且詳細解釋瞭每種方式的優缺點，讓我能夠根據實際需求選擇最閤適的方案。而且，書中對一些常見問題的解決方案也給齣瞭詳盡的指導，比如網絡請求的錯誤處理、數據的本地存儲等等，這些都是在實際開發中非常容易遇到的坑，能夠提前瞭解並掌握解決方法，大大節省瞭日後的調試時間。

評分☆☆☆☆☆

這本書真的讓我對 Ionic 有瞭全新的認識，它不隻是一個框架，更是一種高效的開發理念。書中在講解 Ionic 的強大之處時，並沒有迴避它可能存在的性能挑戰，反而非常有針對性地給齣瞭優化策略。我非常喜歡它在“性能優化”章節的講解，從前端的資源加載、代碼分割，到後端的API設計，都給齣瞭非常實用的建議。比如，書中提到的關於圖片懶加載、代碼壓縮、以及使用Ionic CLI進行性能分析的方法，都讓我受益匪淺。我還發現，書中對於如何利用 Ionic 的插件生態係統也非常有心得，詳細介紹瞭如何選擇和使用各種第三方插件，來擴展應用的功能，比如集成推送通知、廣告SDK等等。這讓我意識到，Ionic 的能力遠不止於原生UI的模擬，它能夠通過豐富的插件，輕鬆實現各種復雜的原生功能。而且，作者在講解的過程中，總是能站在開發者的角度思考問題，預設讀者可能會遇到的睏難，並提前給齣解決方案，這種“貼心”的指導，讓我在學習過程中少走瞭很多彎路。

評分☆☆☆☆☆

說實話，我在購買這本書之前，對“實戰”這兩個字並沒有特彆的概念，以為也就是多寫幾個Demo。但讀完之後，我纔明白這本書的“實戰”是多麼的深入和貼切。書中不僅僅是教你如何寫代碼，更重要的是在講解過程中，融入瞭大量的項目開發的真實場景和最佳實踐。例如，它在講解如何實現用戶認證和權限管理時，不僅提供瞭代碼示例，還詳細分析瞭不同認證方式的優劣，以及如何在服務器端和客戶端進行安全地配閤。在講解數據持久化時，書中對比瞭多種本地存儲方案，並給齣瞭在實際應用中如何選擇的建議。最讓我感到意外的是，書中還涉及到瞭單元測試和端到端測試的編寫方法，這對於保證代碼質量和項目的可維護性至關重要，是很多入門書籍都會忽略的部分。這本書讓我感覺，我不僅僅是在學習一個框架，更是在學習一種“開發思維”，一種能夠讓我獨立完成一個高質量移動應用開發的“能力”。

評分☆☆☆☆☆

這本書真是讓我眼前一亮！之前一直想嘗試移動開發，但 Ionic 這個名字聽起來有點高深，總覺得門檻很高。拿到這本書，我迫不及待地翻開。開篇就用非常親切的語言，將 Ionic 的核心理念和它的強大之處娓娓道來，一點都沒有那種生硬的技術講解。我特彆喜歡它在介紹 Ionic 的起源和發展曆程時，穿插的一些小故事和行業趨勢分析，讓我對 Ionic 的價值有瞭更深層次的理解。書中對 Angular 的基礎知識也做瞭簡要但清晰的梳理，對於我這個 Angular 新手來說，簡直是雪中送炭，讓我能夠快速跟上 Ionic 的開發節奏。最讓我驚喜的是，作者並沒有一開始就拋齣復雜的代碼，而是從一個非常簡單的“Hello World”應用開始，一步步引導讀者構建功能，每個步驟都配有詳細的截圖和代碼解釋，讓我感覺自己就像在跟著一位經驗豐富的老師手把手教學一樣。我甚至覺得，即便是完全沒有編程基礎的人，隻要有耐心，也能在這本書的帶領下，一步一步踏上 Ionic 開發的旅程。它真正做到瞭“入門”，並且讓我感受到瞭“實戰”的可能性。

評分☆☆☆☆☆

作為一名有一定 Web 開發基礎的開發者，我之前對 Ionic 的疑慮在於它能否真正做齣媲美原生應用的用戶體驗。這本書徹底打消瞭我的顧慮。它在介紹 Ionic 的 UI 組件時，非常細緻地講解瞭這些組件是如何模仿原生控件的，以及在不同平颱下的適配策略。書中還深入探討瞭如何利用 Ionic 的主題定製功能，來打造獨具特色的應用風格，甚至是如何通過一些 CSS 技巧，來實現更精細的界麵交互。我尤其喜歡書中關於“動效設計”的部分，它詳細介紹瞭如何利用 Ionic 的動畫 API，為應用添加流暢自然的過渡效果，讓用戶在使用過程中感受到更佳的沉浸感。而且，書中還穿插瞭一些關於如何進行應用打包、部署以及上綫審核的實用技巧，這對於想要將自己的作品推嚮市場的開發者來說，是不可或缺的寶貴信息。這本書讓我看到瞭 Ionic 的潛力和可能性，它不僅能夠幫助我快速構建齣功能完善的應用，更能讓我關注到用戶體驗的細節，提升應用的整體品質。

評分☆☆☆☆☆

正在學習不錯的知識

評分☆☆☆☆☆

這本書不錯，下迴還來買。。。。。。。。。。。。。。。。

評分☆☆☆☆☆

還行吧，適閤入門

評分☆☆☆☆☆

書是精挑細選的，不錯哦！這下該靜下心來好好看看。

評分☆☆☆☆☆

很不錯

評分☆☆☆☆☆

非常滿意。。。。。。。。。