本書根據最新的微信最新版撰寫, 首次全面詮釋微信應用號 (小程序) 的接口講解、開發技術、技術框架, 全景式地講解微信應用號的服務及支撐能力, 如視圖容器, 基礎內容, 表單組件, 操作反饋, 導航, 媒體組件, 地圖, 畫布, 文件操作, 網絡, 數據緩存, 地理位置, 界面, 微信登錄等。本書還將提供多個完整DEOM演示示例和完整項目案例, 向讀者展示開發微信應用號的過程、方法、技術和架構。
閆小坤，畢業于中國科學技術大學，資深開發者。曾就職于騰訊公司，從事騰訊微博、騰訊房產等產品的開發工作。逾7年開發經驗，對網站、移動互聯網、微信公眾平臺開發有豐富的經驗，其撰寫的《微信公眾平臺應用開發從入門到精通》已成為微信公眾平臺開發領域的經典書籍。
第1章 初識小程序 1
1.1 小程序是什么 2
1.1.1 小程序的優點 2
1.1.2 小程序的開放能力 2
1.1.3 小程序的前景 3
1.2 小程序開發文檔與開發工具 4
1.2.1 小程序開發文檔 4
1.2.2 微信Web開發者工具 5
1.2.3 開發工具Tips 8
1.3 大事記 11
1.4 “一秒鐘有多長”小游戲 12
1.4.1 游戲規則 12
1.4.2 下載與運行 13
1.4.3 界面、樣式與腳本 14
1.5 小結 18
第2章 開發框架配置和邏輯層 19
2.1 開發框架簡介 20
2.1.1 底層實現 20
2.1.2 小程序與HTML 5的區別與聯系 21
2.1.3 小程序概覽 22
2.2 注冊程序與頁面 23
2.2.1 注冊程序 23
2.2.2 注冊頁面 23
2.2.3 頁面的路由 24
2.3 項目架構 24
2.4 配置 26
2.4.1 全局配置 26
2.4.2 頁面配置 29
2.5 小技巧 30
2.5.1 頁面路由時傳遞參數 30
2.5.2 下拉刷新 31
2.6 小結 32
第3章 開發框架視圖層 33
3.1 樣式語言WXSS 34
3.1.1 WXSS的引入方式 34
3.1.2 尺寸單位 37
3.1.3 選擇器 41
3.2 標簽語言WXML 44
3.2.1 WXML數據綁定與渲染 44
3.2.2 WXML模板與引用 47
3.2.3 WXML事件綁定 48
3.3 小結 51
第4章 組件與API 52
4.1 組件 53
4.1.1 視圖容器 54
4.1.2 基礎內容 55
4.1.3 表單組件 57
4.1.4 導航 58
4.1.5 媒體組件 59
4.1.6 其他組件 61
4.2 API 62
4.2.1 網絡 62
4.2.2 文件 64
4.2.3 設備 65
4.2.4 導航 66
4.2.5 分享 67
4.2.6 獲取小程序頁面二維碼 67
4.2.7 小程序模板消息 70
4.2.8 公眾號模板消息打開相關小程序 72
4.2.9 公眾號自定義菜單點擊打開相關小程序 75
4.2.10 移動App分享小程序頁面 80
4.3 Flex布局 81
4.3.1 flex-direction屬性 83
4.3.2 flex-wrap屬性 84
4.3.3 flex-flow屬性 85
4.3.4 justify-content屬性 86
4.3.5 align-items屬性 87
4.3.6 align-content屬性 90
4.3.7 項目屬性 92
4.4 小結 94
第5章 博客園客戶端——新聞資訊類小程序 95
5.1 項目介紹 96
5.1.1 項目結構 96
5.1.2 項目部署 97
5.1.3 項目配置 97
5.2 server端及API接口 99
5.2.1 博客列表API 100
5.2.2 全文內容API 102
5.2.3 新聞列表API 103
5.3 博客列表頁 105
5.3.1 界面 106
5.3.2 博客模板 106
5.3.3 邏輯 108
5.4 博客詳情頁 110
5.4.1 界面 111
5.4.2 邏輯 112
5.5 新聞列表頁 113
5.5.1 界面 114
5.5.2 新聞模板 114
5.5.3 邏輯 115
5.6 新聞詳情頁 117
5.6.1 界面 118
5.6.2 邏輯 118
5.7 公共JS腳本 119
5.7.1 公共配置 119
5.7.2 解析 119
5.8 小結 124
第6章 測測你是三國殺中的誰——調查測試類小程序 125
6.1 數據結構 126
6.1.1 JSON介紹 126
6.1.2 問題和答案的數據結構 127
6.2 項目結構 130
6.2.1 起始頁 131
6.2.2 測試頁 132
6.2.3 結果頁 134
6.2.4 輔助JS 135
6.3 小結 136
第7章 微餐廳——餐飲管理系統 137
7.1 項目部署 138
7.1.1 搭建開發環境 138
7.1.2 上傳代碼 138
7.1.3 導入數據庫 139
7.1.4 預覽小程序 140
7.2 服務器端介紹 140
7.2.1 數據庫設計 140
7.2.2 管理后臺介紹 142
7.2.3 API接口 144
7.3 微信授權登錄 145
7.3.1 微信登錄 145
7.3.2 服務器端：code換取session_key 146
7.3.3 數據簽名加密 148
7.4 在線排號頁 149
7.4.1 服務器端接口 150
7.4.2 小程序端實現 150
7.5 確認取號頁 153
7.5.1 服務器端接口 154
7.5.2 小程序端實現 154
7.6 我的排號 158
7.6.1 服務器端接口 158
7.6.2 小程序端實現 159
7.7 查看菜單 162
7.7.1 服務器端接口 162
7.7.2 小程序端實現 162
7.8 小結 165
附錄A 小程序接入指南 166
附錄B 延伸閱讀 169
附錄C 開發工具常用快捷鍵 172
第 6章
測測你是三國殺中的誰
——調查測試類小程序
讀者應該看過或玩過類似“你是金庸小說中的誰”“12星座性格測試”“東北話八級測試”等調查、測試類小游戲。這類游戲能帶動用戶的好奇心（我應該是金庸小說中的誰？），并激起用戶的分享欲望（我是金庸小說中的風清揚，趕快發到朋友圈讓朋友知道啊），從而成為一款長盛不衰的小游戲。
這類游戲的特點很明顯：
（1）有一系列調查問卷供用戶回答，通常是選擇一個選項或分數。
（2）根據用戶的選擇跳到下一題目（題目不一定連續）。
（3）最后顯示答案，告訴用戶的測試結果。
本章將介紹一個通用解決方案，所有題目和答案都以JSON格式存儲。這樣讀者只需修改JSON文件的文案就能創建一個全新的測試類游戲。
關鍵知識點：form表單、圖片、頁面路由。
游戲界面如圖6-1所示。
圖6-1
6.1 數據結構
6.1.1 JSON介紹
JSON（JavaScript Object Notation）是一種輕量級數據交換格式，易于閱讀和編寫，同時也易于機器解析和生成。JSON基于JavaScript Programming Language、Standard ECMA-262 3rd Edition - December 1999的一個子集。JSON采用完全獨立于語言的文本格式，也使用類似于C語言家族的習慣（包括C、C++、C#、Java、JavaScript、Perl、Python等）。這些特性使JSON成為理想的數據交換語言。
JSON建構于兩種結構：
? “名稱/值”對的集合（a collection of name/value pairs）在不同語言中被理解為對象（object）、紀錄（record）、結構（struct）、字典（dictionary）、哈希表（hash table）、有鍵列表（keyed list）或關聯數組 （associative array）。
? 值的有序列表（An ordered list of values）在大部分語言中被理解為數組（array）。
這些都是常見的數據結構。事實上，大部分現代計算機語言都以某種形式支持它們。這使得一種數據格式在同樣基于這些結構的編程語言之間的交換成為可能。
JSON具有以下形式：
對象是一個無序的“‘名稱/值’對”集合。一個對象以“{”（左括號）開始，以“}”（右括號）結束。每個“名稱”后跟一個“:”（冒號）；“‘名稱/值’ 對”之間使用“,”（逗號）分隔。例如：
{'name': 'weixin developer'}
數組是值（value）的有序集合。一個數組以“[”（左中括號）開始，“]”（右中括號）結束。值之間使用“,”（逗號）分隔。
['first', 'second']
值（value）可以是雙引號括起來的字符串（string）、數值(number)、true、false、 null、對象（object）或數組（array）。這些結構可以嵌套。
6.1.2 問題和答案的數據結構
測試由問題和答案構成。用戶通過回答一系列問題最終獲得一個答案。
問題頁面如圖6-2所示。
圖6-2
對應的數據結構如下：
{
"id": 1,
"question": "比起循規蹈矩但有理可據的常規工作，你更喜歡去做些含有風險性但收益可觀的創造性活動。",
"answer": [
{
"option": "A",
"text": "是",
"action": "2"
},
{
"option": "B",
"text": "否",
"action": "3"
}
]
}
問題的數據結構見表6-1。
表6-1 問題的數據結構
id 問題ID
question 問題詳情
answer 問題的選擇項，為數組
option 問題選擇項的標示
text 問題選擇項的文本
action 問題選擇項的動作
特別說明，每個問題有兩個答案，你選擇其中一個答案后，游戲會根據你的選項分配下一步的動作。action定義了兩種動作：
? 跳轉到第N題。例如，{"action": "2"}指的是選擇該項后跳到第2題。
? 跳轉到答案。例如，{"action":"result_A"}指的是選擇該項后顯示第A種答案。
答案如圖6-3所示。
圖6-3
{
"A": {
"name": "呂蒙",
"img": " ../../images/lvmeng.jpg",
"text": "你是一個富有志向而又深謀遠慮的人，喜歡為自己制定高瞻遠矚的長遠目標，為實現最終的勝利甘愿選擇隱忍的生活方式，不管過程有多艱辛多漫長你都甘之如飴。你享受生活帶來的充實感，善于觀察生活中的細節，做事會帶有很明確的目的性。你用深藏不露詮釋了一種最深邃的進取。"
}
}
結果的數據結構見表6-2。
表6-2 結果的數據結構
結果字段 字段說明
name 三國殺人物姓名
img 三國殺人物圖片
text 三國殺人物性格解說
……
新書資訊