産品特色
內容簡介
本書提供瞭微信小程序開發必備的100 個Tip 和一個完整的電商案例京東購物微信小程序,100 個Tip分為四類:關於微信小程序的框架及工具16 個Tip、關於微信小程序豐富的組件24 個Tip、關於微信小程序必備API 技能50 個Tip、關於微信小程序高級交互設計10 個Tip,每一個Tip 都會有詳細的介紹和相關的示例,方便開發人員快速學習這些Tip,同時也可以作為工具書指南進行查詢,應用到哪個知識點可以到這裏快速的查詢進行使用。京東購物微信小程序是綜閤應用這些Tip,將這些Tip 綜閤應用到實際項目開發過程中。通過學習100 個Tip 和項目案例,讓讀者全麵、深入、透徹地理解微信小程序開發,提高微信小程序開發能力和項目實戰能力。
作者簡介
劉剛 曾就職於中國擎天軟件科技集團有限公司,現就職於航天四創科技有限公司,專心緻力於軟件項目研發、設計和管理,有豐富項目研發、設計和管理經驗豐富;負責紀檢監察廉政監督監管平颱、國傢郵政局項目、政務大數據項目、中施企協項目等的設計開發和項目管理工作;同時在教育教學方麵有豐富的授課經驗,教授Axure、用戶體驗、軟件重構、項目經理等等方麵的課程。
目錄
第1 章 微信小程序的框架及工具 .................................................................................. 1
1.1 app.json 配置 .......................................................................................................... 1
1.1.1 決定頁麵文件路徑 .................................................................................... 2
1.1.2 配置窗口錶現 ............................................................................................ 3
1.1.3 配置tab 標簽導航 ..................................................................................... 5
1.1.4 設置網絡超時時間 .................................................................................... 8
1.1.5 配置debug 模式 ........................................................................................ 9
1.2 App()函數使用 ..................................................................................................... 10
1.3 Page()函數使用 .................................................................................................... 12
1.3.1 初始化數據 .............................................................................................. 13
1.3.2 生命周期函數 .......................................................................................... 13
1.3.3 相關事件函數 .......................................................................................... 14
1.4 數據綁定 .............................................................................................................. 14
1.5 wx:if 條件判斷 ..................................................................................................... 15
1.6 wx:for 列錶渲染 ................................................................................................... 16
1.7 定義和使用模闆 .................................................................................................. 17
1.8 import 引用模闆 ................................................................................................... 18
1.9 include 引用文件 .................................................................................................. 19
1.10 Console 麵闆 ...................................................................................................... 20
1.11 Sources 麵闆 ....................................................................................................... 21
1.12 Network 麵闆 ..................................................................................................... 22
1.13 Storage 麵闆 ....................................................................................................... 24
1.14 Appdata 麵闆 ...................................................................................................... 24
目 錄 VII
1.15 Wxml 麵闆 ......................................................................................................... 26
1.16 Sensor 麵闆 ........................................................................................................ 27
第2 章 微信小程序豐富的組件 .................................................................................... 28
2.1 view 視圖容器組件 .............................................................................................. 28
2.2 scroll-view 可滾動視圖容器組件 ....................................................................... 31
2.3 swiper 滑塊視圖容器組件 ................................................................................... 34
2.3.1 海報輪播效果 .......................................................................................... 35
2.3.2 頁簽切換效果 .......................................................................................... 36
2.4 movable-view 可移動的視圖容器組件 ............................................................... 40
2.5 icon 圖標組件 ...................................................................................................... 42
2.6 text 文本組件 ....................................................................................................... 44
2.7 progress 進度條組件 ............................................................................................ 45
2.8 button 按鈕組件 ................................................................................................... 46
2.9 checkbox 多項選擇器組件 .................................................................................. 48
2.10 radio 單項選擇器組件 ....................................................................................... 57
2.11 input 單行輸入框組件 ....................................................................................... 59
2.12 textarea 多行輸入框組件 ................................................................................... 61
2.13 label 改進錶單組件 ............................................................................................ 63
2.14 picker 選擇器組件 ............................................................................................. 70
2.14.1 picker 普通選擇器組件 ......................................................................... 71
2.14.2 picker 時間選擇器組件 ......................................................................... 73
2.14.3 picker 日期選擇器組件 ......................................................................... 74
2.15 picker-view 嵌入頁麵的滾動選擇器 ................................................................ 76
2.16 slider 滑動選擇器組件....................................................................................... 78
2.17 switch 開關選擇器組件 ..................................................................................... 80
2.18 form 錶單組件 .................................................................................................... 85
2.19 navigator 頁麵鏈接導航組件 ............................................................................ 92
2.20 audio 音頻組件 .................................................................................................. 95
2.21 image 圖片組件 ................................................................................................ 102
2.22 video 視頻組件 ................................................................................................ 104
2.23 map 地圖組件 .................................................................................................. 106
2.24 canvas 畫布組件 .............................................................................................. 112
VIII 微信小程序開發必備100 Tip
第3 章 微信小程序必備API 技能 ............................................................................... 118
3.1 wx.request 發起網絡請求 .................................................................................. 118
3.2 wx.uploadFile 上傳文件 .................................................................................... 122
3.3 wx.downloadFile 下載文件 ................................................................................ 123
3.4 WebSocket 會話連接 ......................................................................................... 125
3.5 wx.chooseImage 選擇圖片 ................................................................................ 133
3.6 wx.previewImage 預覽圖片 ............................................................................... 134
3.7 wx.getImageInfo 獲取圖片信息 ........................................................................ 135
3.8 wx.saveImageToPhotosAlbum 保存圖片到相冊 .............................................. 136
3.9 wx.startRecord 開始錄音和wx.stopRecord 結束錄音 ..................................... 138
3.10 voice 音頻播放控製 ......................................................................................... 139
3.11 wx.createAudioContext 音頻組件控製 ........................................................... 140
3.12 wx.playBackgroundAudio 播放音樂 ............................................................... 141
3.13 wx.seekBackgroundAudio(OBJECT)控製音樂播放進度 ................................. 143
3.14 wx.getBackgroundAudioPlayerState 獲取音樂播放狀態 ............................... 143
3.15 wx.createVideoContext(videoId)視頻組件控製 .............................................. 145
3.16 wx.chooseVideo(OBJECT)選擇視頻 .............................................................. 146
3.17 wx.saveVideoToPhotosAlbum 保存視頻到相冊 ............................................ 147
3.18 wx.saveFile 保存文件 ..................................................................................... 148
3.19 wx.getSavedFileList 獲取本地文件列錶 ......................................................... 149
3.20 wx. getSavedFileInfo 獲取本地文件信息 ....................................................... 151
3.21 wx. removeSavedFile 刪除本地文件 ............................................................... 153
3.22 wx. openDocument 打開文檔 .......................................................................... 154
3.23 wx.setStorage 和wx.setStorageSync 本地數據緩存 ....................................... 155
3.24 wx.getStorage 和wx.getStorageSync 獲取本地數據緩存 .............................. 157
3.25 wx.getStorageInfo 和wx.getStorageInfoSync 獲取緩存信息 ........................ 159
3.26 清理本地緩存數據 .......................................................................................... 161
3.27 wx.getLocation 獲取位置 ................................................................................ 162
3.28 wx. chooseLocation 選擇位置 ......................................................................... 167
3.29 wx.openLocation 打開內置地圖 ...................................................................... 168
3.30 獲取設備係統信息 .......................................................................................... 169
3.31 獲取網絡狀態 .................................................................................................. 172
3.32 wx.onAccelerometerChange 加速度計 ............................................................ 172
目 錄 IX
3.33 wx.onCompassChange 監聽羅盤數據 ............................................................. 173
3.34 wx.makePhoneCall 撥打電話和wx.scanCode 掃碼 ....................................... 173
3.35 剪貼闆和屏幕亮度 .......................................................................................... 175
3.36 wx.addPhoneContact 添加聯係人 ................................................................... 176
3.37 wx.showToast 和wx.showLoading 顯示提示框 ............................................. 178
3.38 wx.showModal 顯示模態彈窗 ......................................................................... 180
3.39 wx.showActionSheet 顯示操作菜單 ............................................................... 182
3.40 設置導航條 ...................................................................................................... 183
3.41 wx.createAnimation 創建動畫 ......................................................................... 184
3.42 獲取第三方平颱數據 ...................................................................................... 190
3.43 wx.login 登錄 ................................................................................................... 191
3.44 wx.authorize 授權 ............................................................................................. 193
3.45 wx.getUserInfo 用戶信息 ................................................................................ 195
3.46 wwx.requestPayment 微信支付 ....................................................................... 197
3.47 模闆消息 .......................................................................................................... 199
3.48 轉發信息 .......................................................................................................... 202
3.49 wx.chooseAddress 收貨地址 ........................................................................... 203
3.50 卡券 .................................................................................................................. 204
第4 章 微信小程序高級交互設計 .............................................................................. 207
4.1 貓眼電影:海報輪播效果設計 ........................................................................ 207
4.2 許鮮全國送:頁簽切換效果設計 .................................................................... 210
4.3 新聞頻道:水平滑動效果設計 ........................................................................ 215
4.4 京東到傢:手風琴導航切換效果設計 ............................................................. 219
4.5 鏈傢:列錶式導航設計 .................................................................................... 223
4.6 支付寶:九宮格導航設計 ................................................................................ 230
4.7 58 同城:區域條件檢索設計 ........................................................................... 237
4.8 12306 火車票:底部固定效果設計.................................................................. 242
4.9 當當購物:圖文列錶設計 ................................................................................ 245
4.10 中信信用卡申請:嚮導型錶單設計 ............................................................... 255
第5 章 綜閤案例:京東購物小程序 ........................................................................... 278
5.1 需求描述 ............................................................................................................ 279
X 微信小程序開發必備100 Tip
5.2 相關知識點 ........................................................................................................ 285
5.3 商品數據準備 .................................................................................................... 286
5.4 首頁設計 ............................................................................................................ 290
5.5 商品詳情頁設計 ................................................................................................ 305
5.6 立即購買頁麵 .................................................................................................... 320
5.7 商品搜索設計 .................................................................................................... 329
5.8 顯示購物車商品設計 ........................................................................................ 339
5.9 我的訂單頁麵設計 ............................................................................................ 350
5.10 優惠券設計 ...................................................................................................... 356
5.11 小結 .................................................................................................................. 366
前言/序言
前 言
為什麼要寫這本書?
微信小程序從正式發布後越來越受很多軟件公司和開發人員的使用,目前圖書市場上關於微信小程序的書籍還很匱乏,真正能把微信小程序開發必備技能提煉齣來的少之又少,本書提供瞭微信小程序開發必備的100 個Tip 和一個完整的電商案例——京東購物微信小程序。
100 個Tip 分為四類:
? 關於微信小程序的框架及工具16 個Tip;
? 關於微信小程序豐富的組件24 個Tip
? 關於微信小程序必備API 技能50 個Tip;
? 關於微信小程序高級交互設計10 個Tip。
每一個Tip 都有詳細的介紹和相關的示例,方便開發人員快速學習這些Tip,同時也可以作為工具書指南進行查詢,應用到哪個知識點可以到這裏快速查詢並使用。京東購物微信小程序是將這些Tip 綜閤應用到實際項目開發過程中。通過學習100 個Tip 和項目案例,讓讀者全麵、深入、透徹地理解微信小程序開發,提高微信小程序開發能力和項目實戰能力。
本書有何特色?
1. 圖文結閤方式,逐步講解
為瞭便於讀者理解本書內容,提高學習效率,作者通過文字講解及圖錶演示,逐步操作,避免枯燥乏味。
2. 提煉知識點、方便快速學習
本書針對微信小程序的框架和工具、組件、API、交互效果共提煉齣100 個常用開發Tip,每個Tip 都有詳細的示例或者實際應用的場景,方便讀者快速學習和查閱使用。
3. 由淺入深、理論與實戰相結閤
本書先講解100 個常用開發Tip,從框架和工具的使用到組件的使用,然後是常用API,再後是高級交互效果,最後使用一個完整案例貫穿知識點,由淺入深,一步步掌握微信小程序的開發。
4. 實戰驅動,應用性強
本書每個開發Tip 都有詳細的示例或者實際應用場景,讀者可根據示例快速進行知識點的學習和使用,通過知識點在實際場景的應用,指引讀者在項目實戰過程中如何應用這些Tip。
5. 項目案例典型,實戰性強,有較高的應用價值
本書提供瞭有代錶性的高級交互效果和完整的典型案例。讀者在實際項目開發過程中,可參考這些案例,縮短開發時間。
6. 提供完善的技術支持和售後服務
本書提供瞭專門的技術支持郵箱:yuan_kevin_525@126.com,讀者在閱讀本書過程中如有任何疑問都可以通過該郵箱獲得幫助。
本書內容及知識體係
第1 章 微信小程序的框架及工具
本章介紹瞭微信小程序的框架及工具使用Tip 15 個,詳細講解瞭微信小程序框架和工具的使用,是小程序入門必備的知識點。
第2 章 微信小程序的豐富的組件
本章介紹瞭微信小程序組件的使用Tip 26 個,詳細介紹瞭每個組件的使用以及實際項目應用場景,是小程序界麵開發必備的知識點。
第3 章 微信小程序必備API 技能
本章介紹瞭微信小程序API 使用Tip 49 個,詳細介紹微信小程序常用API 的使用,是小程序進行界麵與後颱邏輯處理開發必備的知識點。
第4 章 微信小程序高級交互設計
本章介紹瞭微信小程序高級交互設計Tip 10 個,介紹瞭10 類高級交互效果,是小程序交互設計必備的知識點。
第5 章 京東購物微信小程序案例
本章詳細講解瞭微信小程序的一個典型案例,通過對案例的學習,讀者可掌握各個知識點的應用以及實際項目的開發過程和設計思路。
適閤閱讀本書的讀者
? 微信開發者
? 前端開發工程師
? 學生
? 網站站長、待業青年
閱讀本書的建議
? 本書可以作為工具書使用,查詢各個知識點、交互效果的使用。
? 沒有基礎的讀者,可以按照章節順序進行學習,由淺入深,逐個突破。
? 有一定基礎的讀者,可以根據實際情況有重點地選擇閱讀各個模塊和項目案例。
? 對於每一個模塊和項目案例,先自己思考一下實現的思路,然後再閱讀,學習效果會更好。
輕鬆注冊成為博文視點社區用戶(www.broadview.com.cn),掃碼直達本書頁麵。
? 提交勘誤:您對書中內容的修改意見可在 提交勘誤 處提交,若被采納,將獲贈博文視點社區積分(在您購買電子書時,積分可用來抵扣相應金額)。
? 交流互動:在頁麵下方 讀者評論 處留下您的疑問或觀點,與我們和其他讀者一同學習交流。
頁麵入口:http://www.broadview.com.cn/32691