第 1章微信小程序入門 2 
1.1  微信小程序概述 ·2 
1.1.1  小程序簡介 2 
1.1.2  小程序的誕生 ·2 
1.1.3  小程序的功能 ·3 
1.1.4  小程序的創建流程 ·3 
1.2  開發小程序的準備工作 ·4 
1.2.1  注冊開發者賬號 ·4 
1.2.2  小程序的信息完善 ·10 
1.2.3  小程序的成員管理 ·13 
1.3  小程序的開發工具 ·14 
1.3.1  軟件的下載與安裝 ·14 
1.3.2  開發者工具的登錄 ·16 
1.3.3  其他輔助工具 ·17 
1.4  小程序的未來展望 ·18 
1.5  本章小結 19
第 2章第一個微信小程序 20 
2.1  創建第一個微信小程序 ·20 

20 
2.1.1  新建項目 

第 3章小程序框架 56 
3.1  邏輯層 56 
3.1.1  小程序 App·56 
3.1.2  小程序頁面 59 
3.1.3  生命周期 64 
3.1.4  頁面路由 65 
3.1.5  模塊化 66 
3.1.6  基礎功能 67 
3.1.7 API ·71 
3.2  視圖層 72 
3.2.1 WXML ·72 
3.2.2 WXSS·84 
3.2.3  組件86 
2.2  
2.3  
2.4  
2.5  
3.3
3.4  
3.5  
第 4章
4.1  
4.2  
2.1.2  真機預覽和調試  23 
2.1.3  代碼的提交  24 
2.1.4  小程序的版本  26 
2.1.5  制作空白模板代碼包 

 27 
2.1.6  我的第一個小程序 

 29 小程序的目錄結構  34 
2.2.1  項目配置文件  34 
2.2.2  主體文件  34 
2.2.3  頁面文件  42 
2.2.4  sitemap配置文件· 43 
2.2.5  其他文件  44 開發者工具的介紹  45 
2.3.1  菜單工具欄  46 
2.3.2  資源管理器  47 
2.3.3  模擬器 · 47 
2.3.4  編輯器 · 49 
2.3.5  調試器 · 49 階段案例：簡易登錄小程序 

· 53 本章小結 53
  flex布局 · 87 
3.3.1  基本概念  87 
3.3.2  容器屬性 

· 88 
· 93 3.3.3  項目屬性 
階段案例：通訊錄小程序 

· 97 
本章小結 97小程序組件 · 98 
組件的介紹和分類  98 
4.1.1  組件的介紹  98 
4.1.2  組件的分類  99 視圖容器組件  99 
4.2.1  view 

· 99 

 1014.2.2  scroll-view 4.2.3  swiper 

·102 4.4.9  slider 

 141 
4.2.4  movable-view 

·104 4.4.10  switch 

· 142 
4.2.5  cover-view 108 4.4.11  textarea 

4.3  基礎內容組件 ·109 
4.4.12  editor 

· 144 
 146 
4.3.1  icon 

4.3.2  text 

·109 4.5  導航組件 · 148 
4.3.3   rich-text 111 
4.6  媒體組件 150 

 112 
4.6.1  image · 150 4.3.4  progress  116 4.6.2  video  154 4.4  表單組件  
117 4.6.3  camera 

 156 4.4.1  button  117 

·120 4.7  地圖組件 158 4.4.2  checkbox 

4.7.1 markers· 159 4.4.3  input ·122 

4.7.2 polyline  160 4.4.4  label 127 4.7.3  circles 

· 160 4.4.5  form 128 

130 4.8  畫布組件 

 162 4.4.6  picker 

·137 4.9  階段案例：趣味心理測試小程序 

 163 4.4.7  picker-view 
4.4.8  radio 

·139 4.10本章小結 164

第 5章網絡 API ·166 第 7章文件 API· 210 
5.1  小程序網絡基礎 ·166 7.1  保存文件 

· 210 

 212 5.1.1  小程序/服務器架構 166 7.2  獲取文件信息 

5.1.2  服務器域名配置 ·168 7.3  獲取本地文件列表 

 215 5.1.3  臨時服務器部署 ·170 7.4  獲取本地文件信息  218 

 221 5.2  發起請求和中斷請求 ·172 7.5  刪除本地文件 

5.2.1  發起請求 172 7.6  打開文檔 

· 223 
5.2.2  中斷請求 

173 7.7  階段案例：個人相冊小程序 

· 226 

5.3  文件傳輸 180 7.8  本章小結 226
5.3.1  文件的上傳 

180 第 8章數據緩存 API · 227 5.3.2  文件的下載 184 8.1  本地緩存 227 
5.4  階段案例：成語詞典小程序 

·187 8.2  數據的存儲  228 
5.5  本章小結 1888.2.1  異步存儲數據 

 228 第 6章媒體 API ·189 8.2.2  同步存儲數據 
 230 

6.1  圖片管理 189 8.3  數據的獲取  232 
6.1.1  選擇圖片 189 8.3.1  異步獲取數據 

 232 6.1.2  預覽圖片 190 8.3.2  同步獲取數據  234 

6.1.3  獲取圖片信息 ·190 8.4  存儲信息的獲取  235 
6.1.4  保存圖片 

191 8.4.1  異步獲取存儲信息 

 235 6.2  錄音管理 

193 8.4.2  同步獲取存儲信息  237 
6.3  音頻管理 196 8.5  數據的刪除  239 
6.3.1  背景音頻管理 

196 8.5.1  異步刪除數據 

 239 6.3.2  內部音頻控制 198 8.5.2  同步刪除數據  241 

6.4  視頻管理 201 8.6  數據的清空  243 
6.4.1  選擇視頻 201 8.6.1  異步清空數據 

 243 6.4.2  保存視頻 202 8.6.2  同步清空數據  244 

· 246 6.4.3  視頻組件控制 202 8.7  階段案例：極簡清單小程序 

6.5  相機管理 

205 8.8  本章小結 247

208 第 9章位置 API· 248 
6.6  階段案例：音樂播放器小程序 

6.7  本章小結 2099.1  位置信息 248 
X 

9.1.1  經緯度坐標 248 11.3.4  設置 tabBar樣式· 304 
9.1.2  坐標的類別 248 11.3.5  顯示與隱藏 tabBar 

 305 

9.2  獲取和選擇位置 ·249 11.4頁面導航· 308 
9.2.1  獲取位置 

249 11.4.1  跳轉到新頁面 · 308 9.2.2  選擇位置 251 11.4.2  返回指定頁面 · 309 
9.3  查看位置 

252 11.4.3  當前頁面重定向 · 310 
9.4  地圖組件控制 ·254 11.4.4  重啟頁面 · 310 
9.4.1  獲取地圖上下文對像 ·254 11.4.5  切換 tabBar頁面 

· 310 
9.4.2  獲取地圖中心坐標 

·255 11.5動畫  313 
9.4.3  移動到指定位置 

·256 11.5.1  動畫實例 · 313 
9.4.4  動畫平移標記 

257 11.5.2  動畫的描述 · 314 9.4.5  展示全部坐標 259 11.5.3  動畫的導出 

· 315 
9.4.6  獲取視野範圍 

260 11.6頁面位置 

 318 
9.4.7  獲取地圖縮放級別 

·262 11.7下拉刷新· 320 
9.5  階段案例：紅色旅遊地圖小程序 

·263 11.7.1  監聽下拉刷新 · 320 
9.6  本章小結 26411.7.2  開始下拉刷新 · 320 第 10章設備 API265 11.7.3  停止下拉刷新 

· 321 

10.1繫統信息 ·265 11.8階段案例：幸運大轉盤抽獎
10.1.1 獲取繫統信息 

·265 小程序 

 322 
10.1.2 canIUse() 

·267 11.9本章小結· 323
10.2網絡·269 第 12章畫布 API · 324 
10.2.1 網絡狀態 

·269 12.1準備工作 

 324 
10.2.2 Wi-Fi 

·271 12.1.1 畫布坐標繫 · 324 
10.3傳感器·275 12.1.2 創建空白畫布 · 324 
10.3.1 羅盤 

·275 12.1.3 創建畫布上下文 · 325 
10.3.2 加速度計 

·277 12.2繪制矩形  327 
10.4用戶行為 ·278 12.2.1 創建矩形 · 327 
10.4.1 截屏·278 12.2.2 填充矩形 · 327 
10.4.2 掃碼 

·279 12.2.3 描邊矩形 · 327 
10.4.3 剪貼板 

·280 12.2.4 清空矩形區域 

· 328 
10.4.4 通話 

·282 12.3繪制路徑  330 
10.5手機狀態 ·285 12.3.1 繪制線段 

 330 10.5.1 內存·285 12.3.2 繪制圓弧  332 

10.5.2 屏幕亮度 

 334 ·286 12.3.3 繪制曲線 
10.5.3 振動 

·288 12.4繪制文本  336 
10.6階段案例：幸運抽簽小程序 

289 12.4.1 填充文本 · 336 
10.7本章小結 ·28912.4.2 設置文本基準線 · 336 第 11章界面 API290 12.4.3 設置文本對齊方式 · 336 
11.1交互反饋 ·290 12.4.4 設置字體風格 

· 337 
11.1.1  消息提示框 

·290 12.5繪制圖片  338 11.1.2  加載提示框 ·292 12.5.1 繪制步驟 · 338 
11.1.3  模態彈窗 

·293 12.5.2 繪制原圖 · 339 11.1.4  操作菜單 ·296 12.5.3 縮放圖片 · 340 
11.2導航條設置 ·298 12.5.4 圖片的切割 

· 340 
11.2.1  當前頁面標題設置 

298 12.6顏色與樣式 · 342 

299 12.6.1 顏色透明度 

· 342 11.2.2  導航條加載動畫 
11.2.3  導航條顏色設置 301 12.6.2 線條樣式 

 344 11.3  tabBar設置302 12.6.3 漸變樣式 
 348 

11.3.1  tabBar標記302 12.6.4 陰影樣式  350 
11.3.2  tabBar紅點303 12.6.5 圖案填充 
 351 11.3.3  onTabItemTap() 303 12.7保存與恢復 · 352 
XI 

12.8變形與剪裁 ·352 12.9圖像的導出 

 359 
12.8.1  圖像的變形 

·352 12.10  階段案例：你畫我猜小程序 

 361 
12.8.2  圖像的剪裁 

·356 12.11本章小結 · 362

第 13章小程序 AI.基於騰訊智能對話14.3準備工作  396 平臺 ColorUI的機器人小程序 ·364 14.3.1 項目創建 

· 396 

13.1小程序插件——騰訊智能對話 14.3.2 頁面配置 
· 396 平臺 TBP 

364 14.3.3 自定義組件 

 397 

13.1.1  什麼是小程序插件 ·364 14.3.4 公共 JS文件 

 397 

13.1.2  騰訊智能對話平臺簡介 ·364 14.4視圖設計  398 
13.1.3  在小程序管理後臺添加 14.4.1 導航欄設計 

 398 TBP插件366 14.4.2 自定義組件 bankcard 
13.2小程序自定義組件 

367  設計 

· 399 

13.2.1  什麼是自定義組件 ·367 14.4.3 【首頁】設計 

 402 

13.2.2  小程序組件庫 ColorUI·368 14.4.4 【銀行卡信息錄入頁】
13.2.3  在小程序項目中添加 設計 

· 403 ColorUI組件庫 369 14.4.5 【銀行名稱索引頁】

· 404 

13.3準備工作 ·369  設計 
13.3.1  服務器端準備 

369 14.5邏輯實現  407 

 407 
13.3.2  小程序端準備 372 14.5.1 【首頁】邏輯 

13.4視圖設計 ·373 14.5.2 【銀行名稱索引頁】
13.4.1  代碼復用 

373  邏輯 

· 412 
13.4.2  導航欄設計 

374 14.5.3 【銀行卡信息錄入頁】
13.4.3  聊天記錄區域設計 

 416 
·374  邏輯 

13.4.4  底部輸入框設計 

378 14.6本章小結  423 
13.5邏輯實現 ·379 14.7參考資料  424
13.5.1  代碼復用 

379 第 15章小程序全棧開發 .基於 WAMP  
13.5.2  公共函數獲取當前時間 

379 ThinkPHP 6.0的高校新聞小程序  425 

 425 
13.5.3  獲取機器人列表 380 15.1需求分析 

13.5.4  顯示用戶本人消息 

·381 15.2準備工作  426 
13.5.5  機器人對話服務接口 

384 15.2.1 小程序端準備 

 426 

 428 
13.5.6  聊天內容自動上拉 

·385 15.2.2 服務器端準備 
13.6本章小結 ·386 15.3視圖設計  436 
13.7參考資料 ·38715.3.1 導航欄設計 

 436 第 14章小程序服務平臺 .基於微信 OCR識15.3.2 tabBar設計 
 437 別 Vant Weapp的銀行卡包小程序 388 15.3.3 頁面設計 

· 437 
14.1小程序服務平臺概述 

388 15.4邏輯實現  445 

· 445 

14.1.1  什麼是小程序服務平臺 ·388 15.4.1 首頁邏輯 

 451 

14.1.2 微信 OCR識別服務簡介 389 15.4.2 新聞詳情頁邏輯 
14.1.3 微信 OCR識別服務接入 390 15.4.3 個人中心頁邏輯 
 455 14.2小程序自定義組件 394 15.5最終效果展示 · 459 
14.2.1  小程序 UI組件庫—— 15.6本章小結  459 Vant Weapp 

·394 15.7參考資料  460 
14.2.2  自主開發組件模板配置 

·395 15.8結束語  460
附錄 A 個人開發者服務類目  461附錄 B 小程序場景值 · 463附錄 C 小程序預定顏色 · 465 
XII 

微信小程序（ Mini Program）是一種輕量級的應用，它實現了應用“觸手可及”的夢想，用戶無須下載、安裝，即可在微信中使用小程序。微信小程序在基於 Web前端技術基礎的同時有其獨特的語法和框架，提供微信同款 UI和功能接口，大幅提高了開發者的效率，不僅能讓零基礎入門的開發者迅速上手開發出美觀且流暢的應用，也能給使用者帶來優秀的體驗。
《微信小程序開發零基礎入門》由清華大學出版社於 2019年 1月出版，因其內容前沿、編校質量優秀，受到讀者的一致好評。該書也是 2018年第一批產學協同育人項目微信事業部“小程序課程改革”的配套圖書，且連續 3年被評為清華大學出版社年度暢銷圖書。圖書自發行以來，除了被大量社會讀者購買以外，還先後被北京大學、首都師範大學、南京航空航天大學、浙江大學等上百所學校選作教材，也被多所學校圖書館館藏。本書是《微信小程序開發零基礎入門》的第 2版，被評為國家級實驗教學示範中心計算機學科組“十四五”規劃教材。
本書是從零開始學習的微信小程序開發入門書，讀者無須具備小程序開發基礎知識。全書以項目驅動為宗旨，循序漸進、案例豐富，詳細介紹了微信小程序的入門基礎知識與使用技巧。為了進一步提高本書質量，打磨更多前沿技術案例回饋讀者，作者采納了讀者朋友們的問題反饋和修改建議，經過與官方最新技術規範對照，在第 1版的基礎上進行了勘誤並補充了官方新推出的組件和功能，每章末尾新增了階段案例（總量相當於額外贈送了一本實戰教材）和綜合提高案例，全部配套了詳細的視頻講解。
全書分 4篇共 15章，內容分別如下。
入門篇包括第 1章和第 2章。其中，第 1章是微信小程序入門，概要介紹小程序的誕生、特點和主要功能，詳細講解了如何注冊開發者賬號和完善信息，以及開發工具的下載與安裝；第 2章是第一個微信小程序，從零開始講解新建項目、真機預覽和調試、代碼提交等操作，並基於該項目介紹了小程序的目錄結構和開發者工具的基本功能，本章包含階段案例“簡易登錄小程序”。
基礎篇包括第 3章和第 4章。其中，第 3章是小程序框架，主要講解邏輯層、視圖層和基礎布局模型 flex的用法，本章包含階段案例“通訊錄小程序”；第 4章是小程序組件，按照功能分類依次介紹視圖容器、基礎內容、表單、導航、媒體、地圖和畫布組件的用法，本章包含階段案例“趣味心理測試小程序”。
應用篇包括第 5～12章。這 8 章分別講解微信小程序中的各類 API，包括網絡 API、媒體 API、文件 API、數據緩存 API、位置 API、設備 API、界面 API以及畫布 API。每章包含的階段案例分別是“成語詞典小程序”“音樂播放器小程序”“個人相冊小程序”“極簡清單小程序”“紅色旅遊地圖小程序”“幸運抽簽小程序”“幸運大轉盤抽獎小程序”“你畫我猜小程序”。 

提高篇綜合應用前面所學的基礎知識和各類 API完成功能更加豐富的小程序項目，包括第 13～15章。這 3章難度逐層遞增，第 13章是小程序 AI·基於騰訊智能對話平臺 ColorUI 的機器人小程序，講解如何使用小程序插件和 ColorUI組件庫；第 14章是小程序服務平臺·基於微信 OCR識別 Vant Weapp的銀行卡包小程序，講解如何使用小程序服務平臺能力、 Vant Weapp組件庫以及自定義組件；第 15章是小程序全棧開發·基於 WAMP ThinkPHP 6.0的高校新聞小程序，講解如何部署 Windows Apache MySQL PHP環境，如何快速配置 ThinkPHP 6.0框架並制作接口，以及如何與小程序前端交互形成完整全棧開發案例。
本書最後是附錄，包括個人開發者服務類目、小程序場景值以及小程序預定顏色對照表。
本書包含完整例題應用 110個、階段案例 11個以及提高篇進階綜合案例 3個，均在微信開發者工具和真機中調試通過。
為便於教學，本書提供豐富的配套資源，包括教學大綱、教學課件、電子教案、程序源碼、教學進度表、習題答案、期末試卷和 40小時的微課視頻，比起第 1版還新增了題庫繫統。
資源下載提示 
素材（源碼）等資源：掃描目錄上方的二維碼下載。在線作業：掃描封底的作業繫統二維碼，登錄網站在線做題及查看答案。微課視頻：掃描封底的文泉雲盤防盜碼，再掃描書中相應章節的視頻講解二維碼，
可以在線學習。
由於未來微信開發工具軟件版本升級和官方文檔變更等原因有可能導致讀者學習時個別功能無法正確顯示，如遇此情況請掃描下方二維碼查看常見問題彙總文檔，我們將會定期更新該文檔並告知原因和解決方案。

常見問題彙總
為方便讀者綜合應用本書所學知識進行實戰項目的開發，作者精心為每章配套編制了多個綜合實戰項目，已編入《微信小程序開發實戰 -微課視頻版》，可作為本書的配套實踐指導書。
最後，感謝清華大學出版社的魏江江分社長、本書責任編輯王冰飛老師以及相關工作人員，非常榮幸能有機會與卓越的你們再度合作；感謝家人和朋友們所給予的關心和大力支持，本書能夠完成與你們的鼓勵是分不開的；特別感謝劉欣妍和劉昕語的支持，讓我可以專注於書稿的編寫與修訂。
願本書能夠對讀者學習微信小程序有所幫助，並真誠地歡迎讀者批評指正。希望能與讀者朋友們共同學習成長，在浩瀚的技術之海不斷前行。
作 者 
2023年 7月