2016年9月22日凌晨，微信公眾平臺向外發(fā)出200個小程序內(nèi)測邀請函，隨之也揭開了之前一直在傳的微信應(yīng)用號的面紗。微信小程序有兩大特色：首先APP功能可以直接通過關(guān)注應(yīng)用號來實(shí)現(xiàn)，所以用戶就省去了安裝下載卸載等等一系列動作，對那些使用頻率不高的軟件來說，完全可以用微信小程序來代替；另外，用戶也免去了不定時下載軟件更新包的困擾。毫無疑問，開發(fā)者將是微信小程序的最大獲益群體。對于開發(fā)者而言，程序小程序可以節(jié)省開發(fā)成本，并且可以提升研發(fā)效率，開發(fā)人員只需要研發(fā)出一款適用于瀏覽器應(yīng)用的產(chǎn)品，就可滿足不同手機(jī)、不同操作系統(tǒng)的使用需求。另外，借助微信廣大的用戶，微信小程序的營銷推廣工作也能取到事半功倍的效果�？梢灶A(yù)見，微信小程序一旦正式推出，必將得到快速的應(yīng)用。本書以微信小程序內(nèi)測版為基礎(chǔ)，全面、系統(tǒng)的介紹了微信小程序的開發(fā)。包括開發(fā)流程、技術(shù)框架、組件的使用、API的使用等各方面內(nèi)容。全書以案例為導(dǎo)向，針對每個知識點(diǎn)都用實(shí)際案例進(jìn)行演示，讀者可快速入門、并根據(jù)本書的內(nèi)容循序漸進(jìn)的學(xué)會微信小程序的開發(fā)。
前言
2016年9月22日凌晨，微信官方正式推出應(yīng)用號“小程序”內(nèi)測功能。
那么，“小程序”是什么？看看騰訊副總裁、微信創(chuàng)始人是怎么說的吧，如下圖所示是張小龍發(fā)布的信息。
第一批參與小程序測試的包括大眾點(diǎn)評、貓眼電影、海南航空等日常生活服務(wù)類企業(yè)，以微信官方邀請和企業(yè)申請為主，共發(fā)出了200封應(yīng)用號內(nèi)部公測邀請。
除了官方邀請的測試用戶，普通的開發(fā)人員怎么辦？微信提供了一套開發(fā)工具，普通用戶不用申請AppID，也可在電腦中學(xué)習(xí)、模擬小程序的大部分功能。
2016年11月4日，微信小程序正式公測，企事業(yè)單位可以申請公測賬號了（個人用戶暫時還不能申請），有了這個公測賬號，開發(fā)人員不僅可以在電腦中模擬小程序，而且可以將開發(fā)代碼發(fā)布出去供其他用戶使用。
2017年1月9日，微信小程序正式上線，只要將微信更新到最新版本（V6.5.3），即可通過線下掃碼、微信搜索、公眾號關(guān)聯(lián)、好友分享、歷史記錄等5種方式體驗(yàn)微信小程序。
為了幫助廣大初學(xué)者快速學(xué)習(xí)微信小程序的開發(fā)，本書從基礎(chǔ)開始，逐步介紹微信小程序開發(fā)中的相關(guān)知識。
全書共分3篇12章。第1篇介紹微信小程序的基礎(chǔ)知識，包括微信小程序開發(fā)工具、微信小程序架構(gòu)分析。包括第1章和第2章的內(nèi)容。
第1章初識微信小程序，首先介紹了微信小程序開發(fā)工具的下載、安裝和使用，然后使用該開發(fā)工具創(chuàng)建了第一個微信小程序，并在電腦模擬器中進(jìn)行查看，最后發(fā)布到手機(jī)微信中查看運(yùn)行效果。
第2章對微信小程序的架構(gòu)進(jìn)行分析，從小程序的目錄結(jié)構(gòu)、文件名的約定開始，詳細(xì)介紹小程序的配置文件、頁面描述文件、頁面樣式文件和邏輯層文件的相關(guān)知識。
第2篇介紹微信小程序的常用模塊，通過一些小案例詳細(xì)介紹了微信小程序提供的各種組件的使用、API函數(shù)的使用，訪問手機(jī)硬件的函數(shù)。包括第3章至第10章的內(nèi)容。
第3章介紹快速開發(fā)UI界面，以一個加法計(jì)算器的實(shí)際案例介紹了小程序UI設(shè)計(jì)中常用組件的使用方法。
第4章美化UI界面，繼續(xù)修改上一章的計(jì)算器案例，本章中使用其他一些UI組件來設(shè)計(jì)計(jì)算器，使計(jì)算器的使用更方便。在這一章進(jìn)一步學(xué)習(xí)了更多的小程序UI組件使用。
第5章保存數(shù)據(jù)到本地，介紹了小程序中將數(shù)據(jù)保存到本地緩存，從本地緩存中讀取數(shù)據(jù)的方法，繼續(xù)修改第4章的計(jì)算器程序，增加了查看歷史記錄的功能。
第6章在小程序中設(shè)計(jì)一個旅行計(jì)劃調(diào)查表單，學(xué)習(xí)小程序表單控件的使用。
第7章介紹微信小程序的交互反饋功能，包括等待提示信息、彈出框的使用、底部彈出菜單的使用等相關(guān)內(nèi)容。
第8章介紹在小程序中使用多媒體功能的相關(guān)知識，包括使用audio組件和使用audio API播放音樂，使用video組件播放視頻等相關(guān)內(nèi)容。
第9章介紹小程序與后端進(jìn)行交互的相關(guān)知識，首先介紹了小程序提供的網(wǎng)絡(luò)訪問API，然后編寫了手機(jī)歸屬地查詢小案例，演示小程序網(wǎng)絡(luò)訪問API的使用方法。
第10章介紹小程序使用手機(jī)硬件設(shè)備的相關(guān)知識，包括拍照、錄音、獲取地理位置、獲取網(wǎng)絡(luò)狀態(tài)、獲取系統(tǒng)信息等相關(guān)內(nèi)容。
第3篇是綜合案例，以微天氣、微音樂這兩個完整案例的開發(fā)，演示了微信小程序的全過程。第11章通過調(diào)用天氣預(yù)報(bào)API編寫出一個綜合案例——微天氣，第12章通過調(diào)用QQ音樂API編寫出一個綜合案例——微音樂。通過這2個綜合案例，讀者可進(jìn)一步鞏固本書前10章中介紹的相關(guān)知識。
本書內(nèi)容由淺入深，每個知識點(diǎn)都通過小案例進(jìn)行演示，適合希望通過微信小程序開發(fā)應(yīng)用的讀者，具有HTML 5基礎(chǔ)知識的讀者都可閱讀本書。
由于微信小程序推出的時間短，官方推出的開發(fā)工具更新較快，隨著時間的推移，本書介紹的一些知識點(diǎn)在新版本中可能會有更改。如果本書案例運(yùn)行時出現(xiàn)錯誤提示時，讀者可查一下官方文檔，根據(jù)最新內(nèi)容修改后即可正常運(yùn)行。
由于時間短，加之筆者水平有限，書中難免有疏漏之處，敬請讀者朋友批評指正。
編者
2017年1月
高洪濤，畢業(yè)于沈陽工業(yè)大學(xué)，碩士，現(xiàn)就職于中國刑事警察學(xué)院，IEEE會員，計(jì)算機(jī)學(xué)會會員。從事軟件開發(fā)多年，最初使用Java語言，目前主攻Android系統(tǒng)開發(fā)。從2013年開始對微信公共平臺進(jìn)行研究，為多家公司開發(fā)過商用微信公共平臺，收到甲方好評。
第1篇 微信小程序基礎(chǔ)
第1章 初識微信小程序 2
1.1 微信小程序開發(fā)工具 2
1.1.1 獲取開發(fā)工具 2
1.1.2 安裝開發(fā)工具 3
1.2 開發(fā)第一個微信小程序 5
1.2.1 獲取微信小程序的AppID 5
1.2.2 創(chuàng)建項(xiàng)目 5
1.2.3 微信小程序主要文件 8
1.3 認(rèn)識開發(fā)工具 9
1.3.1 開發(fā)工具界面 9
1.3.2 程序調(diào)試 9
1.3.3 代碼編輯 15
1.4 查看小程序效果 19
1.4.1 在開發(fā)工具中查看效果 19
1.4.2 在手機(jī)中查看效果 19
第2章 微信小程序架構(gòu)分析 21
2.1 微信小程序框架結(jié)構(gòu) 21
2.1.1 目錄結(jié)構(gòu) 22
2.1.2 主體文件 23
2.1.3 頁面文件 23
2.1.4 其他文件 24
2.2 配置文件詳解 24
2.2.1 主配置文件app.json 24
2.2.2 頁面配置文件 29
2.3 邏輯層js文件 29
2.3.1 用App函數(shù)注冊小程序 30
2.3.2 用Page函數(shù)注冊頁面 31
2.4 頁面描述文件wxml 34
2.4.1 初識組件 34
2.4.2 數(shù)據(jù)綁定 35
2.4.3 條件渲染 39
2.4.4 列表渲染 40
2.4.5 使用模板 42
2.4.6 引用其他頁面文件 45
2.5 頁面的事件 46
2.5.1 事件類型 46
2.5.2 事件綁定 47
2.5.3 事件對象 47
2.6 頁面樣式文件wxss 50
2.6.1 尺寸單位 50
2.6.2 樣式導(dǎo)入 50
第2篇 微信小程序常用模塊
第3章 快速開發(fā)UI界面 54
3.1 認(rèn)識小程序的組件 54
3.1.1 小程序的組件 54
3.1.2 組件的使用 56
3.1.3 組件的通用屬性 57
3.2 加法計(jì)算器 59
3.2.1 認(rèn)識view組件 60
3.2.2 認(rèn)識input組件 62
3.2.3 認(rèn)識button組件 64
3.2.4 計(jì)算機(jī)器界面UI 69
3.2.5 編寫計(jì)算代碼 71
3.2.6 測試加法計(jì)算器 72
3.3 另一種輸入數(shù)據(jù)的方式 73
3.3.1 認(rèn)識slider組件 74
3.3.2 用slider輸入整數(shù) 74
第4章 美化UI界面 76
4.1 計(jì)算器功能需求 76
4.2 設(shè)計(jì)計(jì)算器界面 77
4.2.1 計(jì)算器小程序布局設(shè)計(jì) 77
4.2.2 搭建計(jì)算器小程序開發(fā)框架 77
4.2.3 用組件實(shí)現(xiàn)布局 78
4.2.4 設(shè)計(jì)組件的樣式 79
4.3 編寫計(jì)算器代碼 84
4.3.1 初始化數(shù)據(jù) 84
4.3.2 編寫按鈕代碼 88
4.3.3 編寫計(jì)算代碼 89
4.3.4 測試計(jì)算器小程序 92
4.4 美化計(jì)算器界面 93
4.4.1 認(rèn)識icon組件 93
4.4.2 用icon美化計(jì)算器界面 94
4.4.3 小程序提供的icon組件 94
第5章 保存數(shù)據(jù)到本地 97
5.1 保存計(jì)算歷史界面設(shè)計(jì) 97
5.1.1 認(rèn)識switch組件 97
5.1.2 switch組件簡單案例 98
5.2 修改計(jì)算器UI 99
5.2.1 添加switch組件 99
5.2.2 獲取switch的選擇 100
5.3 保存計(jì)算到本地緩存 101
5.3.1 保存數(shù)據(jù)的API接口函數(shù) 101
5.3.2 本地緩存計(jì)算過程 103
5.4 從本地緩存讀取數(shù)據(jù) 108
5.4.1 顯示歷史記錄的界面設(shè)計(jì) 108
5.4.2 頁面切換的相關(guān)接口函數(shù) 110
5.4.3 獲取本地緩存數(shù)據(jù) 111
5.5 保存多條歷史記錄 112
5.5.1 使用數(shù)組保存多條歷史記錄 113
5.5.2 清理本地緩存 115
第6章 旅行計(jì)劃調(diào)查 116
6.1 用form組件收集信息 116
6.1.1 認(rèn)識form組件 116
6.1.2 表單的提交 118
6.1.3 表單的重置 120
6.2 設(shè)計(jì)旅行計(jì)劃調(diào)查 121
6.3 選擇性別（單選） 122
6.3.1 認(rèn)識radio和radio-group組件 122
6.3.2 用radio組件列出性別 122
6.3.3 獲取性別內(nèi)容 124
6.3.4 根據(jù)數(shù)據(jù)生成radio組件 125
6.4 選擇想去的國家（多選） 126
6.4.1 認(rèn)識checkbox和checkbox-group組件 127
6.4.2 國家名稱的多選 127
6.4.3 獲取選中的數(shù)據(jù) 128
6.5 選擇日期和時間 129
6.5.1 認(rèn)識picker組件 129
6.5.2 picker組件小案例 131
6.5.3 收集出發(fā)日期 135
6.5.4 獲取picker選擇的日期 135
6.6 輸入建議 137
6.7 廣告輪播 138
6.7.1 認(rèn)識swiper組件 139
6.7.2 swiper組件案例 139
6.7.3 測試案例 143
第7章 微信小程序的交互反饋 144
7.1 等待提示 144
7.1.1 認(rèn)識loading組件 145
7.1.2 修改旅行計(jì)劃調(diào)查表單 148
7.2 用toast顯示提示信息 150
7.3 使用新版API顯示提示 153
7.3.1 接口函數(shù)wx.showToast 153
7.3.2 顯示loading提示信息 153
7.3.3 顯示toast提示信息 155
7.4 用modal組件顯示彈出框 156
7.4.1 認(rèn)識modal組件 157
7.4.2 修改彈出框 159
7.4.3 在彈出框中輸入內(nèi)容 160
7.5 使用新版API顯示彈出框 163
7.6 底部彈出菜單 164
7.6.1 認(rèn)識action-sheet組件 165
7.6.2 使用新版API顯示底部菜單 168
第8章 用多媒體展示更多 171
8.1 用audio組件播放音樂 171
8.1.1 認(rèn)識audio組件 171
8.1.2 控制audio組件 173
8.2 使用audio API播放音樂 175
8.2.1 audio API簡介 175
8.2.2 audio API播放音樂示例 177
8.3 用video組件播放視頻 180
8.3.1 認(rèn)識video組件 180
8.3.2 獲取視頻上下文 182
8.3.3 給視頻添加彈幕 182
第9章 與后臺交互 187
9.1 網(wǎng)絡(luò)訪問API 187
9.1.1 認(rèn)識wx.request接口函數(shù) 188
9.1.2 獲取網(wǎng)上信息 188
9.2 手機(jī)歸屬地查詢 191
9.2.1 了解手機(jī)歸屬地查詢接口 191
9.2.2 編寫小程序代碼 195
9.2.3 調(diào)試修改小程序 198
第10章 使用手機(jī)設(shè)備 203
10.1 拍照 203
10.1.1 了解wx.chooseImage函數(shù) 203
10.1.2 編寫實(shí)例代碼 204
10.1.3 在電腦端測試選擇照片 206
10.1.4 在手機(jī)端測試選擇照片 207
10.2 錄音 210
10.2.1 認(rèn)識wx.startRecord函數(shù) 210
10.2.2 認(rèn)識wx.stopRecord函數(shù) 210
10.2.3 認(rèn)識wx.playVoice函數(shù) 210
10.2.4 編寫錄音實(shí)例 211
10.2.5 測試錄音實(shí)例 213
10.3 獲取地理位置 214
10.3.1 認(rèn)識wx.openLocation函數(shù) 214
10.3.2 認(rèn)識wx.getLocation函數(shù) 215
10.3.3 獲取地理位置實(shí)例 215
10.3.4 在電腦中測試獲取地理位置實(shí)例 217
10.3.5 在手機(jī)中測試獲取地理位置實(shí)例 219
10.4 獲取網(wǎng)絡(luò)狀態(tài) 220
10.5 獲取系統(tǒng)信息 223
第3篇 微信小程序綜合案例
第11章 綜合案例——微天氣 228
11.1 天氣預(yù)報(bào)API 228
11.1.1 中國天氣網(wǎng)天氣預(yù)報(bào)接口 229
11.1.2 中華萬年歷的天氣預(yù)報(bào)接口 234
11.2 界面設(shè)計(jì) 236
11.3 編寫界面代碼 236
11.3.1 創(chuàng)建項(xiàng)目 237
11.3.2 編寫界面代碼 237
11.3.3 編寫界面樣式代碼 239
11.4 編寫邏輯層代碼 242
11.4.1 編寫數(shù)據(jù)初始化代碼 242
11.4.2 獲取當(dāng)前位置的城市名稱 244
11.4.3 根據(jù)城市名稱獲取天氣預(yù)報(bào) 246
11.4.4 查詢天氣預(yù)報(bào) 248
第12章 綜合案例——微音樂 250
12.1 QQ音樂API 250
12.1.1 認(rèn)識易源接口網(wǎng)站 250
12.1.2 QQ音樂接口 251
12.2 界面設(shè)計(jì) 255
12.3 創(chuàng)建項(xiàng)目 257
12.3.1 準(zhǔn)備資源 257
12.3.2 創(chuàng)建項(xiàng)目 257
12.3.3 創(chuàng)建配置文件 259
12.4 音樂分類列表 260
12.4.1 開發(fā)頁面文件 260
12.4.2 開發(fā)頁面樣式文件 261
12.4.3 開發(fā)頁面邏輯代碼 261
12.5 音樂列表 263
12.5.1 開發(fā)頁面文件 263
12.5.2 開發(fā)頁面樣式文件 264
12.5.3 開發(fā)頁面邏輯代碼 265
12.6 播放音樂 267
12.6.1 開發(fā)頁面文件 267
12.6.2 開發(fā)頁面樣式文件 268
12.6.3 開發(fā)頁面邏輯代碼 269
12.7 搜索音樂 271
12.7.1 開發(fā)頁面文件 271
12.7.2 開發(fā)頁面樣式文件 272
12.7.3 開發(fā)頁面邏輯代碼 273
書單推薦
