微信小程式開發入門與實踐

微信小程式開發入門與實踐，是由清華大學出版社出版，雷磊所作的書籍，書中主要講述微信小程式由來，環境搭建，開發工具，文章列表等基礎知識，幫助你入門以及實踐的書籍。

基本介紹

• 書名：微信小程式開發入門與實踐
• 作者：雷磊
• 類別：書籍
• 定價：69元
• 出版社：清華大學出版社 
• 出版時間：2017.04.01

基本信息

作者：雷磊
定價：69元
印次：1-1
ISBN：9787302468011
出版日期：2017.04.01
印刷日期：2017.03.29

圖書簡介

本書主要圍繞OrangeCan項目展開一系列編碼工作，用幾近真實的項目介紹小程式的各個API、組件用法，並附帶一些小程式開發的經驗、技巧以及常見的誤區說明。整個OrangeCan項目分為三部分：文章閱讀、電影資訊以及設定。文章閱讀包括文章列表、文章詳情以及評論，通過編寫文章閱讀功能的代碼，讀者將學會swiper組件的裁剪模式、image組件的裁剪模式、快取的使用技巧、列表渲染、數據綁定、模板、音樂播放、錄音、分享等知識。除此之外，讀者將對小程式頁面的生命周期有一個大致了解。學習完這部分內容，讀者將可以輕鬆做出一個內容型小程式套用。電影資訊功能主要介紹如何調用伺服器數據及template模板的使用技巧。設定頁面功能包含大量功能示例，包括獲取硬體設備信息、羅盤與重力感應的套用、掃描二維碼、用戶登錄、用戶信息校驗、解析用戶加密數據、獲取用戶openId、傳送模板訊息、微信支付等功能。

本書還提供部分伺服器的PHP代碼，主要供用戶登錄、校驗、解析加密數據、模板訊息、微信支付等功能調用。

本書內容豐富、注重實戰，講解通俗易懂。適合小程式開發人員、培訓機構和企業內部培訓使用。

圖書目錄

第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....

第4章文章列表頁面47

4.1文章列表頁面元素分析及準備工作48

4.2swiper組件50

4.3Boolean值的陷阱53

4.4構建文章列表的骨架和樣式54

4.5image組件的4種縮放模式與9種裁剪模式57

4.5.1scaleToFill58

4.5.2aspectFit58

4.5.3aspectFill59

4.5.4widthFix60

4.5.59種裁剪模式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:for76

4.10配置單個頁面導航欄背景色79

4.11從歡迎頁面跳轉到文章頁面80

4.11.1事件80

4.11.2redirectTo與navigateTo82

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.5include與import引用模板的區別92

5.6CSS的模組化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:else127

7.2.2實現收藏點擊功能128

7.2.3互動反饋wx:showToast130

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.11wx:if與hidden控制元素顯示和隱藏152

7.12實現文字評論框和語音評論框的切換152

7.13input組件153

7.14bindinput事件154

7.15禁止評論關鍵字155

7.16實現自定義傳送按鈕157

7.17同時支持模擬器回車、真機點擊“完成”傳送評論161

7.18圖片與拍照評論的界面實現161

7.19實現從相冊選擇照片與拍照164

7.20icon圖片166

7.21刪除已選擇的圖片167

7.22在小程式中使用CSS3動畫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.9wx.request傳送http/https請求219

10.10設定wx.request的逾時時間221

10.11處理返回的電影數據221

10.12綁定處理後的電影數據224

10.13http和https在小程式中的使用說明226

10.14跳轉到更多電影頁面227

10.15編寫movie-grid-tpl模板229

10.16編寫“更多電影”頁面231

10.17實現頁面下拉刷新的“三部曲”234

10.18在模擬器中可執行下拉刷新但在真機中無法執行下拉刷新的常見錯誤237

10.19json中的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及UnionId313

12.5模板訊息316

12.6form表單及picker組件321

12.7傳送模板訊息323

12.8微信支付328

12.9真實的微信小程式登錄狀態維護336

第13章雜項338

13.1wx:key339

13.2scroll-view組件：在js中控制滾動條343

13.3深入理解小程式的單向數據綁定機制348

13.4深入理解scroll-view組件的bindscrolltolower、lower-threshold屬性349

13.5微信小程式發布流程350