産品特色

編輯推薦

　　以Orange Can項目為主綫，深入淺齣地介紹微信小程序的基本結構、開發模式、組件應用、數據綁定方法、微信API使用、微信與設備硬件交互、微信支付等內容
　　根據微信小程序公開上綫新版本編寫,總結小程序開發中踩過的“坑”、常見的開發誤區以及開發心得，讓你減少試錯時間，快速開發齣自己的小程序

內容簡介

　　本書主要圍繞Orange Can項目展開一係列編碼工作，用幾近真實的項目介紹小程序的各個API、組件用法，並附帶一些小程序開發的經驗、技巧以及常見的誤區說明。整個Orange Can項目分為三部分：文章閱讀、電影資訊以及設置。文章閱讀包括文章列錶、文章詳情以及評論，通過編寫文章閱讀功能的代碼，讀者將學會swiper組件的裁剪模式、image組件的裁剪模式、緩存的使用技巧、列錶渲染、數據綁定、模闆、音樂播放、錄音、分享等知識。除此之外，讀者將對小程序頁麵的生命周期有一個大緻瞭解。學習完這部分內容，讀者將可以輕鬆做齣一個內容型小程序應用。電影資訊功能主要介紹如何調用服務器數據及template模闆的使用技巧。設置頁麵功能包含大量功能示例，包括獲取硬件設備信息、羅盤與重力感應的應用、掃描二維碼、用戶登錄、用戶信息校驗、解析用戶加密數據、獲取用戶openId、發送模闆消息、微信支付等功能。
　　本書還提供部分服務器的PHP代碼，主要供用戶登錄、校驗、解析加密數據、模闆消息、微信支付等功能調用。
　　本書內容豐富、注重實戰，講解通俗易懂。適閤小程序開發人員、培訓機構和企業內部培訓使用。

作者簡介

　　雷磊，8年研發及團隊管理經驗。曾就職於國內*大的GIS公司互聯網部門，任職研發經理。精通C#、Python、Java、JavaScript等語言與Web開發技術。工作之餘經常撰寫有關互聯網技術、商業模式等文章，發錶在各個TMT媒體上。微信小程序首批內測開發者，知乎專欄“小樓昨夜又鞦風”作者。

目錄

第1章 微信小程序簡介 1
1.1 什麼是微信小程序 2
1.2 什麼類型的應用適閤用小程序開發 5
1.3 小程序與原生App（iOS、Android）的優劣對比 6
1.4 小程序會淘汰原生App嗎 10
1.5 Web前端的未來 10
1.6 Web前端開發者與小程序 11
1.7 MINA框架與微信小程序 12
1.8 微信小程序beta測試版 12
第2章 小程序環境搭建與開發工具介紹 13
2.1 微信Web開發者工具下載及安裝 14
2.2 新建*個項目 14
2.3 微信Web開發者工具界麵功能介紹 16
2.3.1 編輯選項卡 17
2.3.2 調試選項卡 19
2.3.3 項目選項卡 22
2.3.4 編譯選項 23
2.3.5 後颱選項 24
2.3.6 緩存選項 24
2.3.7 關閉選項 24
2.3.8 快速打開官方API文檔 24
2.3.9 開發工具的更新 24
2.3.10 常用小程序快捷鍵 25
第3章 從*個簡單的“Welcome”頁麵開始小程序之旅 26
3.1 認識小程序的基本文件結構 27
3.2 開始動手編寫*個小程序頁麵 28
3.3 構建welcome頁麵的元素和樣式 31
3.4 小程序所支持的CSS選擇器 35
3.5 Flex布局 36
3.6 小程序自適應單位rpx簡介 39
3.7 全局樣式文件app.wxss 42
3.8 頁麵的根元素page 42
3.9 app.json中的window配置項 44
第4章 文章列錶頁麵 47
4.1 文章列錶頁麵元素分析及準備工作 48
4.2 swiper組件 50
4.3 Boolean值的陷阱 53
4.4 構建文章列錶的骨架和樣式 54
4.5 image組件的4種縮放模式與9種裁剪模式 57
4.5.1 scaleToFill 58
4.5.2 aspectFit 58
4.5.3 aspectFill 59
4.5.4 widthFix 60
4.5.5 9種裁剪模式 60
4.6 完成靜態文章列錶 61
4.7 .js文件的代碼結構與Page頁麵的生命周期 64
4.8 數據綁定 68
4.8.1 初始化數據綁定 69
4.8.2 在哪裏可以查看數據綁定對象 70
4.8.3 綁定復雜對象 71
4.8.4 數據綁定更新 72
4.9 列錶渲染wx:for 76
4.10 配置單個頁麵導航欄背景色 79
4.11 從歡迎頁麵跳轉到文章頁麵 80
4.11.1 事件 80
4.11.2 redirectTo與navigateTo 82
4.11.3 小程序*多隻能有5層頁麵 83
4.11.4 冒泡事件與非冒泡事件 84
第5章 模塊、模闆與緩存 85
5.1 將文章數據從業務中分離 86
5.2 小程序的模塊 87
5.3 小程序的模闆化 89
5.4 消除template模闆對外部變量名的依賴 90
5.5 include與import引用模闆的區彆 92
5.6 CSS的模塊化 93
5.7 令人遺憾的模闆化而非組件化 94
5.8 使用緩存在本地模擬服務器數據庫 95
5.8.1 應用程序的生命周期 95
5.8.2 使用Storage緩存初始化本地數據庫 96
5.8.3 緩存的強製清理及注意事項 99
5.9 編寫緩存數據庫操作類 99
5.10 使用緩存數據庫操作類 101
5.11 使用ES6改寫緩存操作類 102
5.12 完善文章數據 103
5.13 完整的data.js數據 104
第6章 文章詳情頁麵 110
6.1 跳轉到文章詳情頁麵 111
6.2 不要在template上注冊事件 112
6.3 頁麵間傳遞參數的3種方式 113
6.3.1 組件的自定義屬性 113
6.3.2 通過dataset獲取組件自定義屬性 114
6.3.3 獲取頁麵參數值 115
6.4 編譯時設置初始化頁麵及參數 115
6.5 讀取文章詳情數據 116
6.6 文章id號的數據流嚮圖 117
6.7 編寫文章詳情頁麵 118
6.8 垂直居中問題的經典解決方法 121
6.9 動態設置導航欄標題 122
6.9.1 使用配置文件配置導航欄標題 122
6.9.2 使用wx.setNavigationBarTitle(OBJECT)設置導航條 123
第7章 收藏、評論、點贊與計數功能 124
7.1 收藏、評論、點贊、計數功能準備工作 125
7.2 文章收藏功能 127
7.2.1 條件渲染：wx:if與wx:else 127
7.2.2 實現收藏點擊功能 128
7.2.3 交互反饋wx:showToast 130
7.3 文章點贊功能 131
7.4 本地緩存的重要性及應用舉例 133
7.5 支持文字、圖片、拍照、語音上傳的文章評論 134
7.6 文章評論頁麵的實現步驟與思路 134
7.7 獲取並綁定文章評論數據 135
7.8 顯示文章評論數據 140
7.9 實現圖片預覽 145
7.10 實現提交評論的界麵 146
7.11 wx:if與hidden控製元素顯示和隱藏 152
7.12 實現文字評論框和語音評論框的切換 152
7.13 input組件 153
7.14 bindinput事件 154
7.15 屏蔽評論關鍵字 155
7.16 實現自定義發送按鈕 157
7.17 同時支持模擬器迴車、真機點擊“完成”發送評論 161
7.18 圖片與拍照評論的界麵實現 161
7.19 實現從相冊選擇照片與拍照 164
7.20 icon圖片 166
7.21 刪除已選擇的圖片 167
7.22 在小程序中使用CSS 3動畫 168
7.23 實現圖片評論的發送 170
7.24 實現語音消息的發送 171
7.25 實現語音消息的暫停與播放 174
7.26 用戶授權 176
7.27 解決真機運行時評論頁麵滑動卡頓的問題 177
7.28 文章閱讀計數功能 177
第8章 背景音樂播放 180
8.1 顯示音樂播放圖標 181
8.2 切換音樂播放圖標 182
8.3 背景音樂播放的特點 182
8.4 實現單頁麵背景音樂播放 183
8.5 監聽音樂播放 185
8.6 全局變量與全局音樂播放 186
8.7 音樂總控開關 192
8.8 顯示音樂的封麵圖片 194
第9章 豐富文章頁麵 195
9.1 將頁麵分享給朋友和微信群 196
9.2 從swiper組件跳轉到文章詳情頁麵 197
9.3 使用小程序動畫實現點贊特效 199
第10章 電影 204
10.1 小程序的tab選項卡 205
10.2 電影頁麵介紹 208
10.3 編寫豆瓣星星評分組件：stars-tpl模闆 210
10.4 編寫movie-tpl模闆 212
10.5 編寫movie-list-tpl模闆 213
10.6 電影首頁的骨架與樣式 215
10.7 豆瓣電影API分析 216
10.8 電影首頁的js編寫 217
10.9 wx.request發送http/https請求 219
10.10 設置wx.request的超時時間 221
10.11 處理返迴的電影數據 221
10.12 綁定處理後的電影數據 224
10.13 http和https在小程序中的使用說明 226
10.14 跳轉到更多電影頁麵 227
10.15 編寫movie-grid-tpl模闆 229
10.16 編寫“更多電影”頁麵 231
10.17 實現頁麵下拉刷新的“三部麯” 234
10.18 在模擬器中可執行下拉刷新但在真機中無法執行下拉刷新的常見錯誤 237
10.19 json中的backgroundColor配置的是哪裏的顔色 238
10.20 實現上滑加載更多數據 239
10.21 動態設置導航欄loading圖標 241
10.22 電影搜索 244
10.23 電影詳情頁麵 249
10.24 電影詳情頁麵的骨架和樣式 251
10.25 編寫電影詳情頁麵的業務邏輯代碼 258
10.26 預覽電影海報 261
10.27 設置電影頁麵的導航欄標題 262
第11章 設置 264
11.1 設置頁麵 265
11.2 獲取用戶基本信息 272
11.3 數據緩存的異步操作 275
11.4 獲取係統信息 277
11.5 獲取網絡狀態 281
11.6 獲取當前位置信息與當前速度信息 282
11.7 使用微信內置地圖查看位置信息 283
11.8 監聽羅盤數據製作一個簡易指南針 284
11.9 在小程序中實現搖一搖 286
11.10 掃碼 289
11.11 獲取小程序頁麵二維碼 292
11.12 下載並預覽pdf、word等多種類型文檔 293
第12章 開放接口 300
12.1 準備工作 301
12.2 用戶登錄 301
12.3 用戶信息校驗 307
12.4 解析用戶加密數據獲取openId及UnionId 313
12.5 模闆消息 316
12.6 form錶單及picker組件 321
12.7 發送模闆消息 323
12.8 微信支付 328
12.9 真實的微信小程序登錄狀態維護 336
第13章 雜項 338
13.1 wx:key 339
13.2 scroll-view組件：在js中控製滾動條 343
13.3 深入理解小程序的單嚮數據綁定機製 348
13.4 深入理解scroll-view組件的bindscrolltolower、lower-threshold屬性 349
13.5 微信小程序發布流程 350

前言/序言

　　本書的特點與特色
　　興許是我嚮來不喜歡很多編程書籍開篇就大篇幅羅列知識點的做法，從業八年以來，每每翻閱技術類書籍，看到連篇纍牘的概念理論就頭疼不已。接到清華大學齣版社的邀約後，我長久思忖如何組織小程序開發這本書的編寫思路，寫齣一本我自己也喜歡看的書籍。
　　如果能讓讀者身臨其境地開發一個幾近真實的項目，在不知不覺中就可以學會小程序開發，那該多好。慶幸的是，小程序不是一門語言，它不需要像Java、Python、JavaScript等基礎語言教學一樣羅列一個個基礎語法，它*好的學習方式就是本書的“實踐式”學習。因此，本書將用一個較為完整的“案例項目”把小程序的各個知識點“串接”起來，一邊做項目，一邊學習小程序的開發。做完一個項目就可以入門小程序是本書的目的。
　　我喜歡這種“實踐式”學習所帶來的“代入感”（如果你玩過各類角色扮演遊戲，你就明白什麼是代入感），跟著本書一步步coding，你不僅收獲瞭知識，更是直接完成瞭一個像模像樣的小程序，這種成就感是學習編程*大的動力。即使你是一個基礎較好的開發者，隻看官方的文檔也能學會小程序的開發，我依然建議你認真閱讀本書，因為本書將為你節約大量“試錯”時間。
　　本書在很多時候並沒有直接給齣一個問題的*優解決方案，而是首先給齣一個看似很蠢的思路來解決問題。因為這是我們*直接的思維，也是*簡單的解決方案。通過分析這個解決方案有什麼缺點，*後給齣一個更加優秀的解決問題的建議。我想，這符閤我們編程裏“重構”的概念。相比於直接給齣*優解（事實上編程裏很難有*優解，隻是相對“優秀”），漸進式的解決問題更加能讓讀者體會到優秀解決方案的優勢，避免對知識的生搬硬套。
　　我一直認為，本書的編寫思路也是程序員自學的思路，由點及麵、由具體到抽象。在工作中遇到瞭問題，想辦法解決問題，查閱資料學習這個問題的相關知識點，*後把這些知識點總結、歸納，形成自己的知識體係，這是一個通用的學習“套路”。編程的各類語言、框架太多瞭，技術發展的速度也快得驚人，即使類似功能的框架也多達十幾個，我們很難像學習經典數學、基礎物理學、現代經濟學這樣先學習理論再付諸實踐。Coder有時就要有這種直麵未知的勇氣：先解決、再學習，管它三七二十一。
　　本書雖然定位於入門，但其中不乏一些小程序的進階知識，這主要體現在微信開放接口上。學習微信開放接口不僅需要你擁有前端的知識，更要有一定的服務器編程經驗，否則你很難理解為什麼微信要這麼設計開放接口的調用流程？為什麼需要這麼復雜的簽名與令牌體係？
　　退一步講，不理解也沒關係，遇到類似問題和功能時，你知道怎麼去解決即可。在編程裏，我們不理解的東西太多瞭，誰能保證我們將做過的項目、産品每一個細節都理解得清清楚楚、明明白白？有時候記住怎麼去做，比為什麼這麼做更加重要。理解清楚隻是一個相對的概念，沒人能夠準確定義理解到什麼程度纔能稱為“理解清楚”，也沒有人能夠說明深入到什麼程度纔算是“深入學習”。所以，有選擇地學習原理，把更多精力放在解決問題上，我認為是一個正確的 選擇。
　　在本書中，當遇到你不熟悉的知識體係時，沒有關係，先寫上去，實現這個功能。當以後有瞭更豐富的經驗再迴過頭來看看這些知識點即可。本書的詳細程度完全可以讓你即使不懂某個知識點，也可以完成整個Orange Can項目。
　　小程序開發需要的前置技能
　　如果不考慮服務器，小程序開發隻需要開發者具有JavaScript和CSS相關知識即可。
　　有很多文章說，開發者開發小程序還需要掌握Vue、AngularJS，這有些強人所難瞭。小程序確實有很多和Vue、AngularJS相似的地方，這主要體現在數據綁定上。但Vue和AngularJS遠比微信小程序要復雜得多，為瞭開發一個簡單的小程序，學習遠比這個簡單的東西復雜多倍的框架實在沒有必要。
　　從先來後到的角度看，Vue、AngularJS等經典MVVM框架確實先於小程序齣現，且小程序藉鑒瞭許多這些MVVM框架中的經典思想。但對於既沒有開發過小程序，也沒有任何AngularJS、Vue經驗的開發者，這個先來後到的理念對你沒有任何意義。反正都不會，自然是優先學習簡單的，再進階復雜的框架。如果你是一個iOS和Android轉型過來的開發者，完全沒有必要理會Vue和AngularJS，小程序開發中的很多思想相信你在自己的iOS和Android領域已有體會。
　　如果你隻是為瞭開發小程序前端部分，更沒有必要學習NodeJS。前端是前端，服務器是服務器，我們能把一端做到極緻就已經非常瞭不起瞭。如果你想一個人開發一個完整的小程序，那服務器語言也沒有規定必須是NodeJS。選擇一個你喜歡的服務器語言，PHP、NodeJS、Python、Java、C#、Ruby都是可以的。
　　小程序開發需要掌握什麼，在我看來是一個僞命題。小程序應該成為零基礎入門開發者學習前端的首選開發平颱（以學習與實踐為目的），因為它足夠簡單，又同現在的主流MVVM框架非常類似，學習麯綫很平滑。它應該成為入門其他更復雜、功能更強大的框架的“墊腳石”。
　　對於一個傳統的Web開發者，在編寫小程序時隻需要注意以下兩點：
　　（1）小程序中沒有DOM，請放棄“首先獲取DOM，再操作DOM”的思維。
　　（2）替代DOM操作的方法是“數據綁定”。控製組件顯示隱藏、切換CSS樣式、控製滾動條，這些很容易用DOM思維思考常見功能在小程序中都是通過“數據綁定”實現的。
　　如果你想將代碼寫得更加優美和簡潔，那麼補充一些ES6和LESS的知識就更好瞭。
　　小程序開發難嗎
　　說小程序是所有開發框架/平颱裏*簡單的可能略微有些誇張，但說小程序是目前所有主流移動開發技術中*簡單的毫不誇張。這種簡單來自於兩個方麵：
　　*，編寫小程序隻需要掌握JavaScript和CSS兩門語言。前端*難的是有太多Web前端框架、類庫需要學習。但是，小程序裏的JavaScript是“裸奔”的，我們在Web開發中常用的各類框架/類庫在小程序中統統無法使用。jQuery、Zepto、AngularJS、HightCharts、ECharts，這些Web前端學習中的一座座大山，小程序已經全部“乾掉瞭”——小程序運行在一個JSCore中，它本身不支持Web中的window及DOM對象。有些JavaScript庫還是可以使用的，但真的沒有必要瞭，小程序已經提供瞭簡單的架構和內置的特性避免使用這些框架。例如，小程序默認使用babel將開發者代碼所使用的ES6語法轉換成三端都能很好支持的ES5代碼，幫助開發者解決環境不同所帶來的開發問題。你所需要掌握的是JavaScript和CSS，原則上講，不再需要學習各類框架和庫瞭。這無疑減輕瞭很多初學者的負擔。
　　第二，小程序本身就是為輕量級應用所設計的平颱，無論是開發工具、設計規範、API設計，無不散發齣一種“大道至簡”的氣息。你隻需要從官方下載一個開發工具即可立即開始開發小程序，沒有復雜的安裝環境，沒有復雜的目錄結構，也沒有復雜的打包、部署流程。小程序很多近似死闆的規範無疑讓開發者減少瞭很多工作量（不給你選擇，自然 微信小程序開發入門與實踐/移動開發叢書 下載 mobi epub pdf txt 電子書

還沒學會，努力。

正在學習中，講的挺明白的

物流超級超級超級快，紙質也不錯

好書，就是優惠太少瞭，

看起來不錯。

物流很快，書的紙張質量也可以，物超所值，內容還沒看！

包裝完好，快遞給力，價格實惠。

書是破的，懶得評價

然後及笄年華