本書以學生熟練掌握微信小程序開發為目標,以項目化、任務化的方式組織內容,共分為5個項目。其中,項目1引導學生了解微信小程序的開發環境和開發流程;項目2讓學生熟悉并掌握微信小程序的框架;項目3介紹微信小程序的常用組件;項目4介紹微信小程序的常用API;項目5為綜合實踐案例,可以作為學生的實訓項目。本書選取的案例在貼合實際的同時,力求簡單、有趣、易上手,讓學生能夠迅速地將所學內容轉化為實踐。
王大偉,男,本科,浙江工業職業技術學院設計與藝術學院教師,多年從事《微信小程序開發》、《Java程序設計》、《Web前端開發》、《WebApp應用框架》等程序設計語言和框架課程的一線教學,以校企合作、橫向課題的方式深度參與多個企業信息管理系統、智慧工廠、智慧小區等項目前后端的開發和維護,有豐富的教學經驗和項目經歷。
項目1 微信小程序入門:開發環境和開發流程 1
1.1 任務1:微信小程序初探 1
1.1.1 微信小程序介紹 2
1.1.2 微信小程序技術發展史 3
1.2 任務2:搭建開發環境 4
1.2.1 注冊賬號 4
1.2.2 開發前準備 5
1.2.3 下載開發者工具 6
1.2.4 安裝部署 6
1.3 任務3:開發初體驗 7
1.3.1 新建項目 7
1.3.2 開發者工具頁面 7
1.3.3 項目設置 8
1.4 任務4:項目發布上線攻略 9
1.4.1 項目成員設置 10
1.4.2 提交審核 10
1.4.3 發布項目 10
1.5 學習成果 11
1.6 鞏固訓練與創新探索 11
1.7 職業技能等級證書標準 12
項目2 個人簡歷:微信小程序框架 14
2.1 任務1:基本信息頁面 14
2.1.1 任務分析 14
2.1.2 微信小程序的框架和目錄結構 15
2.1.3 微信小程序注冊和生命周期函數 17
2.1.4 【任務實施】構建基本信息頁面 18
2.2 任務2:動態生成個人信息 23
2.2.1 任務分析 23
2.2.2 注冊頁面和頁面生命周期函數 24
2.2.3 數據綁定基本用法 25
2.2.4 【任務實施】升級基本信息頁面 26
2.3 任務3:教育經歷頁面 28
2.3.1 任務分析 28
2.3.2 數據綁定中的運算 29
2.3.3 tabBar導航 29
2.3.4 自定義函數 30
2.3.5 設值函數setData() 30
2.3.6 條件渲染 31
2.3.7 【任務實施】構建標簽導航 32
2.3.8 【任務實施】構建教育經歷頁面 34
2.3.9 【任務實施】實現按鈕邏輯功能 37
2.4 任務4:項目經驗頁面 38
2.4.1 任務分析 38
2.4.2 JSON數據 39
2.4.3 列表渲染 40
2.4.4 【任務實施】構建項目經驗頁面 42
2.5 任務5:專業技能頁面 43
2.5.1 任務分析 43
2.5.2 微信小程序模板 43
2.5.3 引用模板和頁面 45
2.5.4 【任務實施】構建模板文件的定義模板 46
2.5.5 【任務實施】調用模板構建專業技能頁面 47
2.6 學習成果 48
2.7 鞏固訓練與創新探索 49
2.8 職業技能等級證書標準 50
項目3 微信小程序的常用組件 52
3.1 任務1:計算器 53
3.1.1 任務分析 53
3.1.2 view組件 54
3.1.3 Flex布局 54
3.1.4 自定義數據 55
3.1.5 【任務實施】構建計算器頁面 56
3.1.6 【任務實施】實現計算功能 59
3.2 任務2:調色板 61
3.2.1 任務分析 61
3.2.2 RGB顏色表示法 62
3.2.3 slider組件 62
3.2.4 switch組件 62
3.2.5 【任務實施】構建調色板頁面 63
3.2.6 【任務實施】實現調色板功能 65
3.3 任務3:動態條形圖 68
3.3.1 任務分析 68
3.3.2 icon組件 69
3.3.3 progress組件 70
3.3.4 text組件 70
3.3.5 rich-text組件 71
3.3.6 【任務實施】構建動態條形圖頁面 72
3.3.7 【任務實施】實現動態條形圖功能 73
3.4 任務4:導航頁面 76
3.4.1 任務分析 76
3.4.2 navigator組件 77
3.4.3 頁面路由管理 79
3.4.4 【任務實施】構建導航頁面 80
3.5 任務5:拼圖 82
3.5.1 任務分析 82
3.5.2 movable-view組件 82
3.5.3 scroll-view組件 83
3.5.4 rpx尺寸單位及WXSS新特性 85
3.5.5 背景圖片和Base64編碼 87
3.5.6 【任務實施】構建拼圖頁面 89
3.5.7 【任務實施】實現拼圖功能 90
3.6 任務6:神州尋寶 93
3.6.1 任務分析 93
3.6.2 map組件 94
3.6.3 cover-view組件 99
3.6.4 picker組件 99
3.6.5 picker-view組件 101
3.6.6 button組件 103
3.6.7 【任務實施】構建神州尋寶頁面 103
3.6.8 【任務實施】實現神州尋寶功能 104
3.7 任務7:調查問卷 107
3.7.1 任務分析 107
3.7.2 form組件 108
3.7.3 checkbox組件 109
3.7.4 radio組件 109
3.7.5 input組件 110
3.7.6 textarea組件 111
3.7.7 label組件 112
3.7.8 swiper組件 113
3.7.9 【任務實施】構建調查問卷頁面 114
3.7.10 【任務實施】實現調查問卷功能 116
3.8 任務8:校園花卉欣賞 118
3.8.1 任務分析 118
3.8.2 image組件 119
3.8.3 audio組件 123
3.8.4 video組件 123
3.8.5 原生組件 124
3.8.6 WXS 125
3.8.7 【任務實施】構建校園花卉欣賞頁面 127
3.8.8 【任務實施】實現圖片預覽功能 129
3.9 學習成果 130
3.10 鞏固訓練與創新探索 130
3.11 職業技能等級證書標準 132
項目4 微信小程序的常用API 133
4.1 任務1:跨頁旅行 134
4.1.1 任務分析 134
4.1.2 微信小程序API 134
4.1.3 頁面路由API 135
4.1.4 回調函數 137
4.1.5 【任務實施】構建常用API頁面 138
4.1.6 【任務實施】實現子頁面鏈接功能 140
4.1.7 【任務實施】實現跨頁旅行功能 141
4.2 任務2:精選相冊 143
4.2.1 任務分析 143
4.2.2 圖片處理API 143
4.2.3 視頻處理API 147
4.2.4 【任務實施】構建相冊頁面 147
4.2.5 【任務實施】實現選擇圖片的展示功能 148
4.2.6 【任務實施】實現圖片預覽功能 149
4.3 任務3:下載進度條 150
4.3.1 任務分析 150
4.3.2 文件上傳、下載API 150
4.3.3 文件操作API 153
4.3.4 【任務實施】構建下載進度條頁面 155
4.3.5 【任務實施】實現下載進度條功能 155
4.4 任務4:我在哪兒 157
4.4.1 任務分析 157
4.4.2 位置信息API 157
4.4.3 地圖組件控制API 161
4.4.4 【任務實施】構建我在哪兒頁面 162
4.4.5 【任務實施】實現我在哪兒功能 162
4.4.6 【任務實施】實現附近有啥功能 163
4.5 任務5:坡度計 165
4.5.1 任務分析 165
4.5.2 設備應用API 165
4.5.3 加速度監聽API 167
4.5.4 【任務實施】構建坡度計頁面并實現功能 169
4.6 任務6:指南針 170
4.6.1 任務分析 170
4.6.2 羅盤數據API 171
4.6.3 WXSS的2D轉換 171
4.6.4 【任務實施】構建指南針頁面并實現功能 172
4.7 任務7:文章列表頁面和文章詳情頁面 173
4.7.1 任務分析 173
4.7.2 請求服務器數據API 174
4.7.3 交互反饋API 176
4.7.4 【任務實施】獲取服務器數據 179
4.7.5 【任務實施】構建菜單和選項卡 182
4.7.6 【任務實施】構建文章列表頁面 184
4.7.7 【任務實施】構建文章詳情頁面 186
4.8 任務8:文章收藏、管理 188
4.8.1 任務分析 188
4.8.2 剪貼板數據API 188
4.8.3 數據緩存API 189
4.8.4 API的同步調用 191
4.8.5 【任務實施】實現文章收藏功能 192
4.8.6 【任務實施】構建我的收藏頁面 193
4.8.7 【任務實施】構建收藏詳情頁面 197
4.9 任務9:音樂涂鴉板 198
4.9.1 任務分析 198
4.9.2 canvas組件和相關API 199
4.9.3 音頻播放API 200
4.9.4 音頻播放過程的監聽 201
4.9.5 【任務實施】構建音樂涂鴉板頁面 202
4.9.6 【任務實施】添加背景音樂 203
4.9.7 【任務實施】實現涂鴉功能 204
4.10 學習成果 207
4.11 鞏固訓練與創新探索 207
4.12 職業技能等級證書標準 209
項目5 智慧校園項目綜合實踐 211
5.1 需求描述 211
5.1.1 引導頁面 212
5.1.2 主頁 212
5.1.3 新聞搜索頁面 213
5.1.4 新聞詳情頁面 213
5.1.5 服務頁面 213
5.1.6 我的頁面 214
5.1.7 個人設置頁面 214
5.1.8 修改密碼頁面 215
5.1.9 意見反饋頁面 215
5.1.10 登錄頁面 216
5.1.11 注冊頁面 216
5.2 服務器說明 217
5.2.1 服務器啟動 217
5.2.2 服務器接口說明 218
5.3 設計思路及相關知識點 218
5.3.1 頁面地圖 218
5.3.2 所需知識 218
5.4 任務1:項目準備 219
5.4.1 項目創建 219
5.4.2 頁面配置 219
5.4.3 引入vant框架 221
5.5 任務2:服務器接口管理與封裝 222
5.5.1 服務器接口集中管理 222
5.5.2 接口訪問封裝 225
5.5.3 常用工具封裝 231
5.5.4 頁面工具封裝 234
5.6 任務3:完成項目編碼 235
5.6.1 引導頁面 235
5.6.2 主頁 239
5.6.3 新聞搜索頁面 248
5.6.4 新聞詳情頁面 252
5.6.5 全部服務頁面 254
5.6.6 我的頁面 258
5.6.7 個人設置頁面 261
5.6.8 修改密碼頁面 266
5.6.9 意見反饋頁面 268
5.6.10 登錄頁面 270
5.6.11 注冊頁面 273
5.7 學習成果 276