關(guān)于我們
書單推薦
新書推薦
|
微信小程序開發(fā)項目教程(慕課版)
本書以一個典型項目的實現(xiàn)過程為主線,詳細講解了微信小程序開發(fā)技術(shù),包括微信小程序概述,莫凡商城小程序項目任務(wù),莫凡商城小程序的項目結(jié)構(gòu),莫凡商城首頁靜態(tài)布局設(shè)計,莫凡商城首頁動態(tài)綁定設(shè)計,莫凡商城的注冊、登錄功能,莫凡商城商品詳情頁設(shè)計,莫凡商城獲取收貨地址功能設(shè)計,莫凡商城支付功能及訂單詳情頁設(shè)計,小程序擴展應(yīng)用。本書采用圖、表與詳細說明的示例代碼相結(jié)合的敘述方式,將微信小程序設(shè)計的基本原理和知識融入項目開發(fā)實戰(zhàn)之中,簡單易懂,帶著讀者邊做邊學(xué),快速掌握微信小程序的設(shè)計和實現(xiàn),幫助讀者掌握典型功能的開發(fā),便于讀者舉一反三。
1.微信小程序領(lǐng)域暢銷書作者
2.配全套精講視頻,手機掃碼看或登錄人郵學(xué)院免費觀看
3.大項目貫穿寫法
4.作者提供微信、QQ群技術(shù)答疑,讀者遇到問題作者都會給解答
劉剛,參與過多個軟件項目的研發(fā)、設(shè)計和管理工作,擁有項目管理師高級認證、項目監(jiān)理師中級認證,出版過《原型設(shè)計大師:Axure RP網(wǎng)站與APP設(shè)計從入門到精通》、《Axure RP原型設(shè)計圖解微課視頻教程(Web+App)》書籍。在中國擎天公司、神州軟件子公司任職過,在項目管理和項目實踐、軟件設(shè)計等方面有一定經(jīng)驗。曾負責過紀檢監(jiān)察廉政監(jiān)督監(jiān)管平臺產(chǎn)品的設(shè)計與開發(fā)、國家郵政局項目的設(shè)計與開發(fā)、政務(wù)大數(shù)據(jù)項目的設(shè)計與開發(fā)等等項目。
第 1 章
微信小程序概述................. 1
1.1 微信小程序介紹......................1
1.1.1 初識微信小程序....................... 1
1.1.2 微信小程序的功能....................2
1.1.3 微信小程序的使用場景.............3
1.1.4 微信小程序的發(fā)展歷程.............3
1.1.5 微信小程序帶來的機會............ 4
1.2 微信小程序環(huán)境搭建............... 4
1.2.1 小程序環(huán)境搭建...................... 4
1.2.2 基礎(chǔ)技術(shù)準備......................... 6
1.3 微信小程序開發(fā)者工具的使用... 6
1.3.1 如何創(chuàng)建項目......................... 6
1.3.2 微信開發(fā)者工具界面............... 8
1.3.3 常用快捷鍵...........................16
1.4 項目實戰(zhàn):創(chuàng)建莫凡商城小程序...............................16
1.5 小結(jié)..................................18
第 2 章 莫凡商城小程序項目任務(wù).... 19
2.1 “我的”模塊功能介紹............19
2.1.1 任務(wù)1—實現(xiàn)底部標簽導(dǎo)航功能....................................19
2.1.2 任務(wù)2—實現(xiàn)注冊功能....... 20
2.1.3 任務(wù)3—實現(xiàn)登錄功能....... 20
2.1.4 任務(wù)4—實現(xiàn)“我的”界面列表式導(dǎo)航功能................... 20
2.1.5 任務(wù)5—實現(xiàn)修改密碼功能.................................... 21
2.1.6 任務(wù)6—實現(xiàn)意見反饋功能.................................... 21
2.1.7 任務(wù)7—實現(xiàn)清除緩存功能....................................22
2.1.8 任務(wù)8—實現(xiàn)我的訂單功能....................................22
2.2 “首頁”模塊功能介紹............22
2.2.1 任務(wù)9—實現(xiàn)搜索區(qū)域布局與海報輪播功能.......................22
2.2.2 任務(wù)10—實現(xiàn)圖書列表顯示功能靜態(tài)布局與動態(tài)渲染.......23
2.2.3 任務(wù)11—實現(xiàn)圖書搜索功能....................................23
2.2.4 任務(wù)12—實現(xiàn)圖書更多列表顯示功能.............................23
2.3 “購買商品”模塊功能介紹......24
2.3.1 任務(wù)13—實現(xiàn)商品詳情頁功能....................................24
2.3.2 任務(wù)14—實現(xiàn)商品加入購物車功能..........................25
2.3.3 任務(wù)15—實現(xiàn)購物車列表功能....................................25
2.3.4 任務(wù)16—實現(xiàn)商品立即購買頁功能..........................25
2.3.5 任務(wù)17—實現(xiàn)收貨地址列表功能.............................25
2.3.6 任務(wù)18—實現(xiàn)新增和編輯地址功能.............................26
2.3.7 任務(wù)19—實現(xiàn)支付功能......26
2.3.8 任務(wù)20—實現(xiàn)支付完成頁功能....................................27
2.3.9 任務(wù)21—實現(xiàn)訂單詳情頁功能................................... 27
2.4 “圖書分類”模塊功能介紹.......28
2.4.1 任務(wù)22—實現(xiàn)圖書分類功能................................... 28
2.4.2 任務(wù)23—實現(xiàn)圖書分類結(jié)果列表功能............................. 29
2.5 小結(jié)..................................29
第3 章 莫凡商城小程序的項目結(jié)構(gòu)............................. 30
3.1 項目目錄樹結(jié)構(gòu)介紹..............30
3.1.1 框架全局文件....................... 30
3.1.2 項目實戰(zhàn):任務(wù)1—實現(xiàn)底部標簽導(dǎo)航功能................ 36
3.1.3 工具類文件.......................... 38
3.1.4 框架頁面文件...................... 38
3.2 微信小程序邏輯層框架接口.....39
3.2.1 使用App()函數(shù)注冊小程序... 39
3.2.2 使用Page()函數(shù)注冊頁面.... 40
3.3 微信小程序WXML 視圖層.....42
3.3.1 WXML 標簽語言................. 42
3.3.2 動態(tài)綁定數(shù)據(jù)...................... 42
3.3.3 組件屬性動態(tài)綁定數(shù)據(jù).......... 42
3.3.4 控制屬性動態(tài)綁定數(shù)據(jù).......... 43
3.3.5 關(guān)鍵字動態(tài)綁定數(shù)據(jù)............. 43
3.3.6 運算................................... 43
3.4 微信小程序WXSS 樣式渲染....44
3.4.1 尺寸單位............................. 44
3.4.2 樣式導(dǎo)入............................ 44
3.4.3 內(nèi)聯(lián)樣式............................ 45
3.4.4 選擇器............................... 45
3.4.5 常用樣式屬性...................... 45
3.5 微信小程序條件渲染..............49
3.5.1 使用wx: if 判斷單個組件.......49
3.5.2 使用block wx: if 判斷多個組件....................................49
3.6 微信小程序列表渲染..............49
3.6.1 使用wx: for 列表渲染單個組件....................................49
3.6.2 使用block wx: for 列表渲染多個組件.............................50
3.6.3 使用wx: key 指定唯一標識符.................................50
3.7 項目實戰(zhàn):任務(wù)4—實現(xiàn)“我的”界面列表式導(dǎo)航功能(1)...51
3.8 小結(jié)..................................54
第4 章 莫凡商城首頁靜態(tài)布局設(shè)計............................. 55
4.1 首頁需求分析與知識點...........55
4.2 視圖容器組件在首頁中的應(yīng)用..................................55
4.2.1 view 視圖容器組件...............56
4.2.2 scroll-view 可滾動視圖容器組件....................................57
4.2.3 swiper 滑塊視圖容器組件.....59
4.2.4 movable-view 可移動視容器組件.............................62
4.2.5 cover-view 覆蓋原生組件的視圖容器組件.......................64
4.2.6 項目實戰(zhàn):任務(wù)9—實現(xiàn)搜索區(qū)域布局與海報輪播功能.......65
4.3 基礎(chǔ)內(nèi)容組件......................68
4.3.1 icon 圖標組件......................68
4.3.2 text 文本組件......................70
4.3.3 progress 進度條組件........... 71
4.3.4 rich-text 富文本組件........... 71
4.3.5 editor 富文本編輯器及API ... 73
4.4 image 圖片組件及圖片API 的應(yīng)用..................................76
4.4.1 image 圖片組件.................. 76
4.4.2 圖片API 的應(yīng)用.................. 79
4.4.3 項目實戰(zhàn):任務(wù)10(1)—實現(xiàn)圖書列表顯示功能靜態(tài)布局.... 84
4.5 導(dǎo)航組件和導(dǎo)航API .............88
4.5.1 navigator 頁面鏈接組件...... 88
4.5.2 wx.navigateTo 保留當前頁跳轉(zhuǎn)API ............................ 90
4.5.3 wx.redirectTo 關(guān)閉當前頁跳轉(zhuǎn)API .............................91
4.5.4 wx.switchTab 跳轉(zhuǎn)到tabBar頁面API ............................ 92
4.5.5 wx.navigateBack 返回上一頁API ......................... 93
4.5.6 wx.reLaunch 關(guān)閉所有頁面,打開某個頁面API................ 94
4.5.7 導(dǎo)航條API ......................... 94
4.5.8 Tab Bar 標簽導(dǎo)航API ........ 96
4.5.9 項目實戰(zhàn):任務(wù)11—實現(xiàn)圖書搜索功能...................... 98
4.6 項目實戰(zhàn):任務(wù)12—實現(xiàn)圖書更多列表顯示功能靜態(tài)布局..... 102
4.7 小結(jié)................................107
第5 章 莫凡商城首頁動態(tài)綁定設(shè)計........................... 108
5.1 微信小程序函數(shù)處理............108
5.1.1 生命周期函數(shù)......................108
5.1.2 頁面事件函數(shù)......................110
5.1.3 頁面路由管理......................110
5.1.4 自定義函數(shù)......................... 111
5.1.5 setData 設(shè)值函數(shù)...............112
5.2 微信小程序網(wǎng)絡(luò)請求............ 113
5.2.1 網(wǎng)絡(luò)訪問配置......................113
5.2.2 wx.request 請求數(shù)據(jù)API ....116
5.2.3 wx.uploadFile 文件上傳API ............................118
5.2.4 wx.downloadFile 文件下載API ........................... 120
5.2.5 WebSocket 會話API ........121
5.2.6 項目實戰(zhàn):任務(wù)10(2)—實現(xiàn)圖書列表顯示功能動態(tài)渲染.... 124
5.3 微信小程序定義模板............ 126
5.3.1 定義模板............................ 126
5.3.2 使用模板........................... 126
5.4 微信小程序的引用功能......... 127
5.4.1 import 引用....................... 127
5.4.2 include 引用..................... 127
5.5 WXS 小程序腳本語言......... 127
5.5.1 模塊化............................... 128
5.5.2 變量與數(shù)據(jù)類型.................. 129
5.5.3 注釋................................. 130
5.5.4 語句..................................131
5.6 下拉刷新及窗口設(shè)置............ 132
5.6.1 下拉刷新API 及事件........... 132
5.6.2 wx.setBackgroundColor動態(tài)設(shè)置窗口的背景色......... 134
5.6.3 wx.setBackgroundTextStyle動態(tài)設(shè)置下拉背景字體......... 135
5.6.4 wx.loadFontFace 引入第三方字體.................................. 136
5.6.5 wx.pageScrollTo 將頁面滾動到目標位置.................. 137
5.7 小結(jié)................................ 137
第6 章 莫凡商城的注冊、登錄功能........................... 138
6.1 微信小程序表單組件............138
6.1.1 button 按鈕組件.................138
6.1.2 checkbox 多選項目組件..... 141
6.1.3 radio 單選項目組件.............143
6.1.4 input 輸入框組件................143
6.1.5 textarea 多行輸入框組件....146
6.1.6 label 改進表單可用性組件....148
6.1.7 picker 滾動選擇器組件........149
6.1.8 slider 滑動選擇器組件.........158
6.1.9 switch 開關(guān)選擇器組件.......160
6.1.10 form 表單組件..................162
6.1.11 項目實戰(zhàn):任務(wù)2—實現(xiàn)注冊功能............................163
6.2 微信小程序界面交互API .....167
6.2.1 wx.showToast/wx.hideToast顯示/隱藏消息提示框API.....168
6.2.2 wx.showModal 顯示模態(tài)對話框API ........................169
6.2.3 wx.showLoading/wx.hideLoading 顯示/隱藏loading 提示API............170
6.2.4 wx.showActionSheet 顯示操作菜單API .....................170
6.3 定時器API ...................... 171
6.4 數(shù)據(jù)緩存API 的獲取.......... 172
6.4.1 將數(shù)據(jù)緩存到本地...............173
6.4.2 獲取本地緩存數(shù)據(jù)...............174
6.4.3 清理本地緩存數(shù)據(jù)...............177
6.4.4 從緩存獲取圖書列表數(shù)據(jù).....178
6.5 登錄相關(guān)API....................179
6.5.1 登錄API ...........................179
6.5.2 獲取賬號信息API............... 181
6.5.3 獲取用戶信息API ...............181
6.5.4 授權(quán)API........................... 182
6.5.5 設(shè)置API........................... 184
6.6 項目實戰(zhàn):任務(wù)3—實現(xiàn)登錄功能................................ 185
6.7 項目實戰(zhàn):任務(wù)4—實現(xiàn)“我的”界面列表式導(dǎo)航功能(2) .... 191
6.8 項目實戰(zhàn):任務(wù)5—實現(xiàn)修改密碼功能.......................... 195
6.9 項目實戰(zhàn):任務(wù)6—實現(xiàn)意見反饋功能.......................... 199
6.10 項目實戰(zhàn):任務(wù)7—實現(xiàn)清除緩存功能........................ 201
6.11 小結(jié).............................. 202
第7 章 莫凡商城商品詳情頁設(shè)計........................... 203
7.1 頁面間傳遞數(shù)據(jù).................203
7.2 媒體組件及媒體API 的應(yīng)用................................205
7.2.1 audio 音頻組件及音頻API ...........................205
7.2.2 video 視頻組件及視頻API ...........................208
7.2.3 camera 相機組件及相機API ........................... 210
7.2.4 live-player 實時音視頻播放...................................211
7.2.5 live-pusher 實時音視頻錄制.................................. 212
7.3 項目實戰(zhàn):任務(wù)13—實現(xiàn)商品詳情頁功能.................. 213
7.4 項目實戰(zhàn):任務(wù)14—實現(xiàn)商品加入購物車功能............ 221
7.5 項目實戰(zhàn):任務(wù)15—實現(xiàn)購物車列表功能..................224
7.6 商品詳情頁分享與轉(zhuǎn)發(fā)API 的應(yīng)用................................228
7.7 小結(jié)................................229
第8 章 莫凡商城獲取收貨地址功能設(shè)計........................... 230
8.1 位置API .........................230
8.1.1 查看位置、獲得位置、打開位置................................. 230
8.1.2 開啟/停止接收位置信息....... 232
8.1.3 監(jiān)聽實時地理位置.............. 232
8.2 收貨地址API....................233
8.3 地圖組件及地圖API ...........234
8.3.1 map 地圖組件................... 234
8.3.2 地圖API 的應(yīng)用................ 237
8.4 項目實戰(zhàn):任務(wù)16—實現(xiàn)商品立即購買頁功能...........238
8.5 項目實戰(zhàn):任務(wù)17—實現(xiàn)收貨地址列表功能..............244
8.6 項目實戰(zhàn):任務(wù)18—實現(xiàn)新增和編輯地址功能...........247
8.7 小結(jié)................................252
第9 章 莫凡商城支付功能及訂單詳情頁設(shè)計................... 253
9.1 支付API .........................253
9.2 項目實戰(zhàn):任務(wù)19—實現(xiàn)支付功能..........................254
9.3 畫布組件及畫布API 的應(yīng)用...257
9.4 項目實戰(zhàn):任務(wù)20—實現(xiàn)支付完成頁功能.................. 261
9.5 項目實戰(zhàn):任務(wù)8—實現(xiàn)我的訂單功能..................... 262
9.6 項目實戰(zhàn):任務(wù)21—實現(xiàn)訂單詳情頁功能..................269
9.7 小結(jié)...............................276
第 10 章 小程序擴展應(yīng)用............. 277
10.1 設(shè)備應(yīng)用API ..................277
10.1.1 獲得系統(tǒng)信息....................277
10.1.2 獲取網(wǎng)絡(luò)狀態(tài)....................278
10.1.3 加速度計..........................279
10.1.4 羅盤................................279
10.1.5 撥打電話..........................280
10.1.6 掃碼................................280
10.1.7 剪貼板............................. 281
10.1.8 藍牙................................ 281
10.1.9 屏幕亮度..........................282
10.1.10 震動..............................282
10.1.11 手機聯(lián)系人......................282
10.2 文件操作API..................283
10.2.1 wx.saveFile 保存文件到本地..................................283
10.2.2 wx.getSavedFileList 獲取本地文件列表....................284
10.2.3 wx.getSavedFileInfo 獲取本地文件信息....................284
10.2.4 wx.removeSavedFile 刪除本地文件..........................285
10.2.5 wx.openDocument 打開文檔............................... 285
10.2.6 wx.getFileInfo 獲取文件信息............................... 286
10.3 窗口API........................286
10.4 微信運動API ..................286
10.5 項目實戰(zhàn):任務(wù)22—實現(xiàn)圖書分類功能..................287
10.6 項目實戰(zhàn):任務(wù)23—實現(xiàn)圖書分類結(jié)果列表功能.......290
10.7 小結(jié)..............................293
你還可能感興趣
我要評論
|