産品特色
內容簡介
本書提供瞭微信小程序開發必備的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
《精通React:從入門到精通的實踐指南》 本書簡介 在飛速發展的現代Web開發領域,React以其聲明式、組件化的強大特性,迅速成為構建交互式用戶界麵的首選框架。它不僅僅是一個庫,更是一種全新的思維方式,能夠幫助開發者高效地構建復雜、可維護且可擴展的應用。本書《精通React:從入門到精通的實踐指南》旨在為想要深入理解React核心原理、掌握其高級特性並將其應用於實際項目開發的讀者提供一份全麵且深入的學習路綫圖。 我們深知,對於初學者而言,React的概念可能顯得有些抽象;對於有一定基礎的開發者,如何進一步提升技能、解決實際開發中的疑難雜癥,也是一個持續的挑戰。因此,本書從最基礎的概念講起,循序漸進地引導讀者掌握React的精髓,並逐步深入到更高級的開發模式和最佳實踐。我們不隻是講解“是什麼”,更側重於“為什麼”以及“如何做”,確保讀者不僅知其然,更知其所以然。 核心概念與基礎構建 本書的開篇將係統性地介紹React的核心概念,如JSX的強大錶達能力、組件化的設計理念、Props的單嚮數據流以及State在組件內部狀態管理中的作用。我們將詳細闡述函數組件和類組件的區彆與聯係,並通過大量實際示例演示如何創建、組閤和復用組件,幫助讀者建立起堅實的React基礎。 JSX深度解析: 我們將深入剖析JSX的語法糖本質,解釋它如何被編譯成JavaScript,以及如何在JSX中優雅地嵌入JavaScript錶達式、處理事件、渲染列錶和條件性地渲染元素。您將瞭解到JSX的靈活性,以及如何在不同場景下充分利用它來提升開發效率。 組件化思維: 組件是React的基石。本書將重點講解如何設計高內聚、低耦閤的組件,如何通過props進行組件間的數據傳遞,以及如何利用context API實現跨層級數據共享,避免props drilling帶來的痛點。我們將展示各種組件模式,例如容器組件與展示組件的劃分,以及如何構建可復用的UI庫。 State管理: 掌握組件內部狀態的管理是構建動態應用的關鍵。本書將詳細講解useState、useReducer等Hooks,演示它們在處理異步操作、復雜狀態邏輯等場景下的應用。對於需要更高級狀態管理需求的場景,我們將引入Redux、Zustand等流行的狀態管理庫,並深入解析它們的原理和使用方法。 Hooks的強大力量 Hooks的齣現極大地簡化瞭React的開發,並讓函數組件獲得瞭與類組件媲美的能力。本書將花費大量篇幅深入講解React Hooks,從基礎的useState、useEffect、useContext,到進階的useReducer、useCallback、useMemo,再到自定義Hooks的設計和應用。 Hooks的規則與最佳實踐: 我們將清晰地闡述Hooks的兩個主要規則(隻在頂層調用Hooks,隻在React函數組件或自定義Hooks中調用Hooks),並解釋這些規則背後的原因。同時,我們還將提供關於如何避免常見Hooks陷阱的實用建議,例如如何正確處理useEffect的依賴項,以及如何通過useCallback和useMemo來優化組件性能。 自定義Hooks: 學習如何編寫自己的自定義Hooks是提升代碼復用性和抽象能力的絕佳方式。本書將通過多個實際案例,展示如何將組件中的邏輯提取為自定義Hooks,例如網絡請求 Hooks、錶單處理 Hooks、本地存儲 Hooks 等,幫助讀者構建更簡潔、更易於測試的代碼。 React Router與路由管理: 在構建單頁應用(SPA)時,路由管理至關重要。本書將詳細講解React Router庫,包括聲明式路由、嵌套路由、動態路由、路由守衛以及代碼分割與懶加載等高級特性,確保讀者能夠構建齣功能完善、用戶體驗良好的SPA。 性能優化與高級主題 隨著應用規模的增長,性能優化成為一個不可忽視的環節。本書將深入探討React的性能優化策略,幫助讀者構建齣流暢、響應迅速的應用。 性能瓶頸分析與解決方案: 我們將介紹如何使用React DevTools等工具來識彆組件渲染性能瓶頸,例如不必要的重渲染、過多的DOM操作等。隨後,將講解Memoization(`React.memo`)、`useCallback`、`useMemo`等技術,以及如何閤理地使用它們來避免不必要的組件更新。 代碼分割與懶加載: 對於大型應用,代碼分割和懶加載是提升首屏加載速度的有效手段。本書將講解如何在React中實現代碼分割,例如使用`React.lazy`和`Suspense`,以及通過Webpack等打包工具進行配置,從而優化應用的加載性能。 狀態管理進階: 除瞭Redux,本書還將探討其他主流的狀態管理方案,如Zustand、Jotai、Recoil等,並分析它們在不同場景下的適用性。我們將深入講解不同狀態管理庫的設計理念和使用技巧,幫助讀者選擇最適閤自己項目的方案。 React Hooks的深入探索: 除瞭常見的Hooks,本書還將觸及一些更高級或不那麼常用的Hooks,例如`useDeferredValue`、`useTransition`等,並闡述它們在處理高優先級和低優先級更新時的作用。 服務端渲染(SSR)與靜態站點生成(SSG) 在現代Web開發中,服務端渲染(SSR)和靜態站點生成(SSG)越來越受到重視,它們能夠顯著提升應用的SEO錶現和首屏加載速度。 Next.js的強大能力: 本書將重點介紹基於React的強大框架Next.js。我們將詳細講解Next.js在SSR、SSG、API路由、文件係統路由以及圖片優化等方麵的核心特性。通過Next.js,讀者可以輕鬆地構建齣高性能、SEO友好的React應用。 SSR與SSG的原理與應用: 我們將深入解析SSR和SSG的原理,包括它們如何將React組件在服務器端渲染成HTML,以及如何進行客戶端hydration。通過實際案例,您將學會如何在Next.js中配置SSR和SSG,並根據項目需求做齣閤理選擇。 數據獲取策略: 在SSR/SSG應用中,數據獲取方式與客戶端渲染有所不同。本書將講解`getServerSideProps`、`getStaticProps`等Next.js提供的函數,以及如何在它們中進行數據預取,並確保數據在客戶端能夠正確地被整閤。 測試、部署與生態係統 一個完善的開發流程離不開測試和有效的部署策略。本書的最後部分將涵蓋這些重要環節。 React應用測試: 我們將介紹React應用中常用的測試工具,如Jest和React Testing Library。通過大量示例,讀者將學會如何編寫單元測試、集成測試,以及如何測試組件的交互邏輯和渲染輸齣。 現代前端構建工具: 瞭解和掌握現代前端構建工具是React開發不可或缺的一部分。本書將介紹Webpack、Vite等打包工具的基本配置和常用插件,幫助讀者理解應用打包、代碼優化和資源管理的原理。 部署與CI/CD: 學習如何將React應用部署到不同的平颱,例如Vercel、Netlify、AWS等。同時,我們將簡要介紹持續集成/持續部署(CI/CD)的概念,幫助讀者建立起高效的自動化部署流程。 React生態係統概覽: 除瞭React本身,還有許多優秀的第三方庫和工具構成瞭React的豐富生態。本書將簡要介紹一些流行的UI組件庫(如Ant Design、Material-UI)、動畫庫、圖錶庫等,幫助讀者根據項目需求選擇閤適的工具。 本書特色 理論與實踐並重: 本書不僅會講解React的理論知識,更會通過大量的實際代碼示例、項目演練來鞏固和加深讀者的理解。 循序漸進的知識體係: 從基礎概念到高級主題,本書的知識點安排閤理,層層遞進,適閤不同層次的讀者。 麵嚮真實開發場景: 本書中的示例和講解都緊密結閤瞭實際開發中的常見問題和需求,幫助讀者解決工作中遇到的挑戰。 前沿技術的覆蓋: 本書不僅涵蓋瞭React的核心技術,還深入介紹瞭Next.js等現代React開發框架,以及SSR/SSG等前沿技術。 清晰易懂的語言風格: 本書力求用清晰、簡潔的語言來解釋復雜的概念,避免使用過於晦澀的術語。 無論您是初次接觸React的新手,還是希望在React開發領域更進一步的開發者,《精通React:從入門到精通的實踐指南》都將是您寶貴的學習伴侶。通過本書的學習,您將能夠自信地構建齣高性能、可維護且富有創意的React應用,並在競爭激烈的前端開發領域脫穎而齣。 目標讀者 希望係統學習React的初學者。 有一定React基礎,但希望深入理解其原理和掌握高級開發的工程師。 需要構建復雜、高性能Web應用的團隊開發者。 對前端技術發展趨勢感興趣,並希望學習SSR/SSG等前沿技術的開發者。 踏上您的React精通之旅,從這本書開始!