産品特色

編輯推薦

★微信公眾號+Web頁麵，讓公眾號更強大、更多彩

★微信JSSDK+HTML5，讓移動Web開發與微信結閤輕而易舉

★本書從實戰齣發，揭秘公眾號與HTML5混閤模式

★內容全麵、案例豐富、輕鬆上手

內容簡介

　　2017年，微信已經全麵支持公眾平颱內的網頁開發，並且提供瞭網頁開發樣式庫、JSSDK庫和網頁內支付、網頁調試工具，Web開發人員可以利用這些功能開發齣更多、更好、更炫的微信內應用。本書立誌於幫助微信開發者更好地學習微信中的網頁開發和JSSDK庫。

　　本書涵蓋瞭微信網頁開發的所有API案例實戰以及所有樣式庫。全書分為13章，第1~2章介紹瞭不同類型微信公眾號的區彆和微信內網頁JSSDK的開發環境；第3~9章介紹瞭微信開放的所有API，並提供瞭貼近現實的實例；第10章通過實例演示瞭微信提供的網頁樣式；第11~12章利用微信JSSDK+HTML5技術實現瞭兩個大的項目應用；後一章介紹一些微信開發的技巧及問題。

　　本書適閤所有微信開發人員使用，尤其適閤目前從事Web開發工作的人員。本書定位基礎，用案例結閤API應用，是目前市場上僅有的一本介紹微信網頁結閤HTML5開發的書。

作者簡介

席新亮

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〈=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和網頁開發的學習。

前言/序言

　　移動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開發中可能麵臨的一些問題，隨後又介紹瞭在微信調試模式下，一些提示信息 微信公眾平颱網頁開發實戰――HTML5+JSSDK混閤開發解密 下載 mobi epub pdf txt 電子書

挺有用的，比較實用，跨度也夠大。

工作必須品，研究新技術，仔細研讀！

這書太髒瞭，封麵上那麼多髒手印。給我感覺就是二手書賣新書的價格。雖不影響使用，但心裏不爽是肯定的。。。

正版圖書，發貨很快！

主講.net程序開發，不知道對於Java開發有用

寫的挺好的，還在學習中。

非常不錯的一本入門級彆的書

很好的微信開發的書籍，值得推薦

感覺不錯，價格也很公道，值的購買！