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