內容提要
2017年,微信已經全面支持公眾平台內的網頁開發,並且提供了網頁開發樣式庫、JSSDK庫和網頁內支付、網頁調試工具,Web開發人員可以利用這些功能開發出更多、更好、更炫的微信內套用。《微信公眾平台網頁開發實戰——HTML5+JSSDK混合開發解密》立志於幫助微信開發者更好地學習微信中的網頁開發和JSSDK庫。
《微信公眾平台網頁開發實戰——HTML5+JSSDK混合開發解密》涵蓋了微信網頁開發的所有API案例實戰以及所有樣式庫。全書分為13章,第1~2章介紹了不同類型微信公眾號的區別和微信區域網路頁JSSDK的開發環境;第3~9章介紹了微信開放的所有API,並提供了最貼近現實的實例;第10章通過實例演示了微信提供的網頁樣式;第11~12章利用微信JSSDK+HTML 5技術實現了兩個大的項目套用;最後一章介紹一些微信開發的技巧及問題。
《微信公眾平台網頁開發實戰——HTML5+JSSDK混合開發解密》適合所有微信開發人員使用,尤其適合目前從事Web開發工作的人員。《微信公眾平台網頁開發實戰——HTML5+JSSDK混合開發解密》定位基礎,用案例結合API套用,是目前市場上僅有的一本介紹微信網頁結合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