微信JS SDK是基于騰訊的微信開放平臺而構建的，目前提供了11種接口集，可以讓基于網頁的開發者，很好的與微信組合開發，為方便H5開發，微信又提供了樣式庫，這也是本書改版的原因。本書覆蓋了微信JS SDK的各個方面，包括JS SDK的部署、分享類接口、圖像類接口、音頻類接口、智能類接口、微信掃一掃等等，并且提供了大量的實例代碼供讀者朋友實際演練或用于實際的開發項目中，最后還詳細介紹了新增的微信UI樣式庫，方便開發者設計更好的微信頁面。
適讀人群 ：微信開發者、Web開發人員
★微信公眾號+Web頁面，讓公眾號更強大、更多彩
★微信JSSDK+HTML5，讓移動Web開發與微信結合輕而易舉
★本書從實戰出發，揭秘公眾號與HTML5混合模式
★內容全面、案例豐富、輕松上手
移動Web的發展速度令人驚嘆，近幾年所有互聯網大企業都在往移動端發展，微信幾乎占領了移動互聯網的大部分江山，微信的公眾號也已超過1000萬，越來越多的企業不再建設網站，而是只要有一個包含所有功能的微信公眾號就可以了，所有的服務行業也都創建了自己的公眾號。由此可見，微信開發的人才需求非常旺盛。
微信公眾號實際上就是一個MINI版的瀏覽器，可以說，HTML5的網頁功能都能在微信公眾號內部實現，甚至通過JSSDK，HTML5網頁還可以調用微信提供的所有接口，包括分享、掃一掃、支付、卡券、定位、照片、語音等功能。所以Web開發人員可以設計并實現更多的微信公眾號內容，而不用學習更多移動開發的知識，只要會調用這些接口即可。
本書就是一本幫助讀者學習微信公眾平臺+HTML5網頁開發的入門書，只要有簡單的HTML和JavaScript知識，就可以開發出一個功能完整的微信公眾平臺。
★本書特色
為了與時俱進，從事前端開發工作的讀者朋友，都應該了解、學習一下微信的JSSDK，本書中介紹了微信HTML5+JSSDK+微信網頁樣式的示例代碼、技巧和實戰案例。本書主要講解形式如下：
（1）針對每個API，都設計一個包含頁面結構的完整效果，然后根據API中提供的各個接口，設計好針對每個接口的調用方法。
（2）所有的案例代碼都很完整，讀者在調試不通的情況下，可以直接使用本書資源中的源代碼文件進行調試。
（3）很多人即使熟悉了API的接口，也不知道如何應用，本書最后還提供了兩個完整的項目案例，利用JSSDK+HTML5的形式，把制作項目的流程、代碼和技巧完整地演示出來。
★本書的結構
第1章：由于做微信HTML5+JSSDK開發離不開微信公眾號，所以首先介紹了微信公眾號的注冊流程，并講解一些關于微信后臺的操作，以便于讀者對微信后臺有一個更清晰的認知。
第2章：微信JSSDK的API使用需要搭建微信JSSDK的基礎環境，本章綜合講解了搭建過程，為后續接口調用做鋪墊。
第3~9章：闡述了微信開放的所有API，包含代碼示例、常見問題及一些小技巧。
第10章：詳細介紹了如何使用微信提供的網頁樣式庫，結合這些樣式和HTML5，能夠開發出更Native的微信公眾號。
第11~12章：用案例作為載體，結合比較流行的HTML5技術，講解了微信JSSDK在實際項目中的重要作用。
第13章：總結了在微信JSSDK開發中可能面臨的一些問題，隨后又介紹了在微信調試模式下，一些提示信息的作用。
★本書寫給誰
·Web網頁開發人員
·PHP開發人員
·微信開發人員
·大學畢業想利用微信平臺創業的人員
·微信公眾號的維護人員
·微信公眾號的運營人員
由于作者個人能力有限，書中難免有疏漏之處，歡迎讀者朋友提出寶貴的建議。
最后，感謝您購買此書，相信您也是一位前端技術愛好者。祝您在技術及職場生涯中，一帆風順！
參與本書編寫的還有：劉鑫、陳士領、陳麗、毛聰、王琳、張喆、薛淑英、李蘭英、周洋、張學軍、張興瑜、陳宇、王健、張鑫，一并感謝他們。
席新亮
席新亮
HTML5、javaScript技術愛好者，熱衷于HTML5 CSS 3 Node.js等前沿技術，寫過HTML5游戲，搞過Web，在實踐中，積累了大量經驗。著有《超實用的JavaScript代碼段》一書。新浪微博@席新亮HTML5，歡迎大家跟我交流。
第1章 認識微信公眾平臺 1
1．1 微信公眾平臺賬號分類 1
1．1．1 訂閱號 2
1．1．2 服務號 2
1．1．3 企業號 4
1．1．4 小程序 4
1．2 微信公眾號申請流程 5
1．3 微信公眾號的認證 9
1．4 公眾號設置 10
1．5 成為微信開發者 10
1．5．1 通過公眾號 10
1．5．2 通過測試號 12
1．6 公眾號的安全中心 13
1．7 本章小結 14
第2章 搭建網頁JSSDK開發環境 15
2．1 JSSDK介紹 15
2．2 部署JSSDK 17
2．2．1 綁定域名 17
2．2．2 引入JS文件 18
2．2．3 通過wx．config接口驗證JSSDK權限 18
2．3 使用SAE部署測試號的JSSDK 28
2．3．1 在SAE中創建應用 28
2．3．2 上傳測試代碼 31
2．3．3 綁定JS接口 32
2．3．4 針對SAE不支持讀寫操作的處理――Memcached 34
2．3．5 在公眾號中測試效果 37
2．4 JSSDK的調試工具 38
2．5 JSSDK的主要功能參考列表 38
2．6 一些其他基礎入門必知的知識點 41
2．7 本章小結 41
第3章 JSSDK網頁開發的基礎接口和分享接口 42
3．1 基礎接口的作用 42
3．1．1 任何開發都要從基礎接口開始 42
3．1．2 判斷當前客戶端版本是否支持指定JS接口 42
3．2 分享接口的作用 44
3．2．1 分享接口有什么好處 44
3．2．2 獲取微信的分享接口 44
3．3 實例：微信分享一個網頁到朋友圈 47
3．4 常見問題 51
第4章 JSSDK的圖像處理 52
4．1 認識圖像接口 52
4．1．1 從手機相冊中選圖 52
4．1．2 預覽圖片 55
4．1．3 上傳圖片 56
4．1．4 下載圖片 59
4．2 實例：從手機相冊中選擇照片然后分享 61
4．2．1 項目需求 61
4．2．2 需求分解 61
4．2．3 代碼實現 62
4．3 常見問題 65
第5章 JSSDK的音頻處理 66
5．1 音頻接口 66
5．1．1 開始錄音 66
5．1．2 停止錄音 67
5．1．3 監聽錄音自動停止 68
5．1．4 播放語音 68
5．1．5 暫停播放 70
5．1．6 停止播放 71
5．1．7 監聽語音播放完畢 71
5．1．8 上傳語音 72
5．1．9 下載語音 74
5．2 常見問題 75
第6章 JSSDK的界面操作 76
6．1 界面操作 76
6．1．1 關閉當前網頁窗口 76
6．1．2 批量隱藏功能按鈕 77
6．1．3 批量顯示功能按鈕 78
6．1．4 隱藏所有非基礎按鈕 80
6．1．5 顯示所有功能按鈕 80
6．2 常見問題 81
第7章 JSSDK的地理位置 82
7．1 地理位置 82
7．1．1 獲取地理位置 82
7．1．2 使用微信內置地圖查看位置 85
7．2 常見問題 87
第8章 JSSDK的智能操作與微信支付 88
8．1 智能接口――識別音頻并返回識別結果 88
8．2 微信掃一掃 90
8．3 設備信息――獲取網絡狀態接口 92
8．4 微信支付 93
8．4．1 微信支付公眾平臺申請流程 94
8．4．2 完成賬戶驗證 95
8．4．3 設置API秘鑰 96
8．4．4 下載API證書 98
8．4．5 微信支付的開發配置 99
8．4．6 微信支付測試 99
8．5 常見問題 102
第9章 JSSDK的微信商店 104
9．1 微信小店 104
9．2 微信卡券 105
9．2．1 批量添加卡券 105
9．2．2 調用適用于門店的卡券列表并獲取用戶選擇列表 107
9．2．3 查看微信卡包中的卡券 108
9．3 常見問題 109
第10章 微信網頁開發樣式庫 110
10．1 認識WeUI 110
10．1．1 WeUI的特色 110
10．1．2 安裝WeUI 111
10．1．3 使用WeUI做一個歡迎界面 113
10．2 使用表單 114
10．2．1 按鈕（Button） 114
10．2．2 表單輸入（Input） 117
10．2．3 列表（List） 121
10．2．4 滑塊（Slider） 122
10．2．5 上傳（Uploader） 124
10．3 使用基礎組件 128
10．3．1 九宮格（Grid） 128
10．3．2 進度條（Progress） 130
10．4 使用導航組件 133
10．5 網頁其他樣式 135
10．6 常見問題 136
第11章 實戰案例1：中國好友挑戰賽（HTML 5混編） 137
11．1 案例概述 137
11．2 客戶需求 137
11．2．1 首頁 137
11．2．2 男生游戲的邏輯 139
11．2．3 女生游戲的邏輯 142
11．2．4 分享頁面 147
11．3 實現代碼及分析 148
11．3．1 首頁模塊 148
11．3．2 參加女生組模塊 164
11．3．3 參加男生組模塊 198
11．4 案例總結 215
第12章 實戰案例2：LBS服務獲取用戶位置 216
12．1 案例概述 216
12．2 實現代碼及分析 216
12．3 案例總結 224
第13章 微信JSSDK相關開發技巧及問題 225
13．1 判斷微信瀏覽器 225
13．2 微信瀏覽器不支持打開App Store頁面 226
13．3 一些提示碼的問題 228
13．3．1 提示碼：invalid url domain 228
13．3．2 提示碼：invalid signature 229
13．3．3 提示碼：the permission value is offline verifying 229
13．3．4 提示碼：permission denied 229
13．3．5 提示碼：function not exist 229
附錄A JS-SDK使用權限簽名算法 230
附錄B 所有JS接口列表 233
附錄C 所有菜單項列表 243
附錄D 卡券擴展字段及簽名生成算法 245
1.1.2 服務號 “服務號”的目的是為用戶提供服務信息，權限如下： l 1個月內（自然月）僅可以群發4條信息。 l 發送給訂閱者（粉絲）的信息，會直接顯示在微信好友對話列表中，不會像訂閱號一樣被折疊在一個文件夾中，如圖1.2所示。 說明：服務號申請需要提交企業或組織機構的相關信息。 服務號與訂閱號在功能上的具體區別參見圖1.3。
1.1.3 企業號 企業號是“微信公眾平臺”的一種創新，目標是幫助企業、學校、政府機關及任何組織機構，打通橫向、縱向信息流，建立上下游伙伴、內部員工之間的連接，增加協同效率，降低溝通成本，高效的運作。 微信企業號與前兩個公眾號最主要的區別是，只有限定范圍內的用戶才可以關注對應的企業號，使用企業號發送的信息數量幾乎不受限制。 企業號也顯示在微信的首頁中，不會像訂閱號一樣被折疊，如圖1.4所示。
1.1.4 小程序 微信在2017年1月9日開放了小程序，從其名字就可以看出來，這是一個支持快速注冊、快速開發、快速使用、快速離開的程序。小程序最大的特色就是可以在微信內被便捷地獲取和傳播，同時具有出色的使用體驗。 小程序在微信的“發現”欄最下角，打開后會顯示曾經使用過的小程序，也可以通過搜索欄搜索其他小程序，如圖1.5所示。 1.2 微信公眾號申請流程 既然微信公眾號這么有用，那么作為使用者及開發者如何去申請注冊呢？圖1.6給出了一個簡易的申請步驟。 為了方便讀者操作，下面列出詳細的步驟： （1）https://mp.weixin.qq.com/cgi-bin/readtemplate?t=register/step1_tmpl&lang=zh_CN，在瀏覽器中輸入這個鏈接地址，如圖1.7所示。然后輸入有效郵箱、密碼及驗證碼，最后勾選“我同意并遵守《微信公眾平臺服務協議》”復選框，單擊“注冊”按鈕。 （2）因為上一步是用郵箱注冊的，所以注冊后，微信會提示您登錄郵箱進行激活，如圖1.8所示。 此時登錄你第（1）步填寫的郵箱，會收到一封激活郵件，然后單擊激活鏈接，如圖1.9所示。 （3）選擇賬號類型，如圖1.10所示。筆者選擇“訂閱號”演示流程（注意，選擇公眾號類型后不可更改）。 （4）選擇賬戶類型后直接進入信息登記頁面，選擇主體類型，筆者選擇“個人”，如圖1.11所示。 選擇“個人”或“企業”后，直接出現信息填寫頁面，目前微信主推微信支付，已經把微信支付捆綁為公眾號的注冊條件了，如圖1.12所示。 （5）填寫信息正確之后，進入填寫公眾號信息頁面，填寫的賬號名稱要合法，不能重復，填寫完畢之后即可申請成功，當然此時還需要微信管理員審核。如圖1.13所示。 1.3 微信公眾號的認證 微信的JSSDK接口開發不是所有公眾號都可以使用的，這需要不同的權限，例如自定義菜單、高級功能接口（多客服）這些接口就需要被認證過的公眾號才可以使用。 目前“微信認證”暫時不支持主體類型是“個人”類型的，如果讀者朋友有企業的賬號可以申請認證。登錄微信公眾號后，單擊左側列表中的“微信認證”就可以認證公眾號了。如果微信認證通過，會顯示如圖1.14所示的界面。 1.4 公眾號設置 成功注冊一個公眾號之后，需要對公眾號進行一些基本的設置。登錄公眾號后，單擊左側列表中的“公眾號設置”，打開公眾號的設置頁面，這里主要包括“賬號詳情”與“功能設置”兩項，設置都比較簡單。要特別說明的是，在“功能設置”中，有一個使用JSSDK需要設置的“JS接口安全域名”（在第2章會介紹），如圖1.15所示。 1.5 成為微信開發者 成為微信開發者有兩種方式：一種是在任意公眾號內部，通過開通成為開發者；一種是無須公眾賬號、快速申請接口測試號，只要微信登錄就可以。
1.5.1 通過公眾號 登錄微信后，左側最后有一個“開發”選項，分別包括“基本配置”、“開發者工具”、“運維中心”和“接口權限”4個選項。 1.基本配置 （1）單擊“基本配置”，如果還沒有成為開發者，如圖1.16所示。 （2）勾選“我同意”復選框，然后單擊“成為開發者”按鈕，就會出現我們需要的開發者ID，如圖1.17所示。 2. 開發者工具 開發者工具，主要包含了微信開發的一些輔助工具，例如開發者文檔、在線接口調試工具、開發者問答系統、接口測試申請系統、公眾平臺測試賬號（如果沒有開發權限可以試用）、公眾號第三方平臺。 3. 運維中心 包括數據監控、日志查詢、接口報警三個選項。數據監控功能實時統計公眾號接口/被動回復調用數據，并支持特定時間段調用數據查詢，幫助開發者了解公眾號接口調用情況。日志查詢可查詢公眾號48小時內接口調用錯誤日志。接口報警的功能是專門為開發者設計的，它是為了幫助開發者在自身服務器和接口響應出現問題時，盡快發現問題。接口報警通過微信群來通知，所以需要掃描當前界面下的二維碼以加入微信群。 微信自己定義了一些報警的情形，如圖1.18所示，我們可以采用默認的閥值，也可以設計自己的閥值。 4. 接口權限 l顯示接口權限列表，主要告訴當前“公眾號”的擁有者有哪些權限能開發，如圖1.19所示。
1.5.2 通過測試號 微信為開發者提供了測試號，無須開通公眾號就可以申請接口測試，直接體驗和測試公眾平臺所有高級接口。輸入網址https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t= sandbox/login，就可以打開申請界面，如圖1.20所示。 單擊“登錄”按鈕后，使用任意個人的微信號掃描二維碼就可以登錄，登錄后就會獲得一個開發者ID，如圖1.21所示。 在測試時如果沒有自己的服務器，可以使用一些免費的云服務器來解決，目前國內使用最多的是新浪的SAE，注冊送200個云豆，可以免費使用一周左右。
1.6 公眾號的安全中心 登錄微信后在左側欄中有個“安全中心”選項，騰訊的安全措施做得不錯，這個模塊中包含了幾大安全控制的功能，如圖1.22所示。 在“安全中心”里，我們可以修改微信登錄密碼、可以設置管理員微信號（發布微信時需要用管理員微信的“掃一掃”功能才能發布）、可以設置運營者微信號、可以對“群發”功能實現風險保護，還可以對“開發者中心”重置AppSecret的保護。 作為開發人員或一個平臺的維護人員，安全中心是我們在運營產品前必須了解的一個環節。
1.7 本章小結 通過本章的學習，相信以前沒有接觸過微信公眾平臺的讀者也有一個大概的全貌認知了。本章雖然還沒有涉及微信網頁的開發，卻是微信公眾號開發的必備知識，如果我們連什么是公眾號都不知道，又何談公眾號的開發呢？本書后面的章節將正式進入微信JSSDK和網頁開發的學習。
新書資訊