微信小程序開發

刘斌 常州信息职业技术学院，副教授/系统分析师,参与Web前端开发证书标准制定工作，曾参与编写十二五、十三五规划教材2部，主编十四五规划教材1部，近年来主编和副主编教材6部。2020年国家职业教育教学创新团队核心成员。现担任江苏省计算机学会信息技术职业教育专业委员会委员，常州信息职业技术学院软件与大数据学院软件技术专业负责人(2017年)，常州永佳软件有限公司系统分析师。

王军 山东商业职业技术学院，山东商业职业技术学院云计算技术与应用产业学院院长，副教授，2次获全国职业院校技能大赛优秀指导教师，主持省级课程4门，省级课题3项。 管文强 常州信息职业技术学院，助教，近年来主编和参编教材3部。2020年国家职业教育教学创新团队成员之一。具有多年的企业软件开发经验，精通多种程序语言和技术架构。现担任常州信息职业技术学院软件与大数据学院软件技术专业专任教师，主要从事微信小程序开发、Node.js应用开发等课程教学工作，擅长案例式教学模式。

丁洁 陕西工业职业技术学院，副教授，“双师型”教师。主要研究领域为计算机网络技术、数据库技术等领域。荣获陕西高等学校第四届青年教师教学竞赛三等奖（工科组），2018-2020年指导学生荣获陕西省高职院校技能大赛移动融媒体应用技术比赛二等奖1项、三等奖2项；参与建设省级教学资源库，主持陕西省职教学会课程思政课题1项，主持陕西省教育厅专项科学研究计划1项，近3年发表教科研核心论文4篇。

弋才学 重庆三峡职业学院，副教授，教育部中西部高校青年骨干教师国内访问学者，拥有网络工程师，高级UI设计师资格证书，具有丰富的网页脚本语言、面向对象程序设计等一线授课经验，主持主研省市校科研教改课题十余项，主编教材2本，获得2个计算机软件著作权登记证书，1项发明专利，1项实用新型专利，参加全国职业院校教师教学能力大赛（高职组）获国家级二等奖1项，指导学生参加移动应用开发、Web技术赛项比赛等，多次获得国家级、省级奖项。

目錄 CONTENTS

第 1章

初識微信小程序 1

1.1 微信小程序開發 1

1.1.1　什麽是微信小程序 1

1.1.2　微信小程序的前景 2

1.1.3　開發小程序需要的技術 3

1.2　搭建開發環境 4

1.2.1　個人開發者申請微信公眾平臺賬號 4

1.2.2　搭建開發環境 5

1.2.3　配置程序 5

1.3　微信開發者工具 7

1.4　案例：第 一個Hello WX小程序 12

1.4.1　任務1——微信小程序創建 13

1.4.2　任務2——微信小程序架構分析 13

1.4.3　任務3——配置文件詳解 14

1.5　小　結 15

1.6　課後習題 15

第 2章

記事本小程序 18

2.1 邏輯層 18

2.1.1　註冊程序 19

2.1.2　註冊頁面 20

2.1.3　頁面路由 21

2.1.4　生命周期 22

2.1.5　模塊化 24

2.2　視圖層 25

2.2.1　HTML與WXML 25

2.2.2　CSS與WXSS 25

2.2.3　頁面事件 25

2.2.4　頁面的樣式 28

2.3　WXML語法 28

2.3.1　數據綁定 28

2.3.2　條件渲染 29

2.3.3　列表渲染 29

2.4　WXS語法 29

2.4.1　模塊 30

2.4.2　變量 31

2.4.3　運算符 31

2.4.4　控制語句 35

2.4.5　數據類型 38

2.5　Flex佈局 38

2.5.1　基本概念 38

2.5.2　容器屬性 39

2.6　案例：記事本小程序 41

2.6.1　案例分析 41

2.6.2　任務1——首頁的實現 42

2.6.3　任務2——編輯頁面的實現 45

2.7　小　結 48

2.8　課後習題 48

第3章

校園新聞網小程序 50

3.1 視圖與基礎組件 50

3.1.1　視圖容器（view）組件 50

3.1.2　滾動視圖（scroll-view）組件 53

3.1.3　滑塊視圖容器（swiper）組件 55

3.1.4　圖標（icon）組件 57

3.1.5　文本（text）組件 59

3.1.6　進度條（progress）組件 60

3.1.7　導航（navigator）組件 62

3.2　案例：校園新聞網小程序 63

3.2.1　案例分析 63

3.2.2　任務1——導航欄 64

3.2.3　任務2——分類欄 64

3.2.4　任務3——輪播圖 65

3.2.5　任務4——新聞列表 66

3.2.6　任務5——回到頂部 68

3.3　小　結 69

3.4　課後習題 70

第4章

快遞單小程序 72

4.1 表單組件 72

4.1.1　按鈕（button）組件 72

4.1.2　多選框（checkbox）組件 74

4.1.3　表單（form）組件 75

4.1.4　輸入框（input）組件 76

4.1.5　滾動選擇器（picker）組件 77

4.1.6　單選控制器（radio）組件 80

4.1.7　滑動選擇器（slider）組件 81

4.1.8　開關選擇器（switch）組件 83

4.1.9　文本框（textarea）組件 84

4.2　案例：快遞單小程序 85

4.2.1　案例分析 85

4.2.2　任務1——導航欄 86

4.2.3　任務2——寄件人信息 87

4.2.4　任務3——收件人信息 90

4.2.5　任務4——立即下單 92

4.3　小　結 93

4.4　課後習題 93

第5章

邀請函小程序 95

5.1 媒體組件 95

5.1.1　圖片（image）組件 95

5.1.2　音頻（audio）組件 97

5.1.3　視頻（video）組件 100

5.2　地圖與動畫 102

5.2.1　地圖（map）組件 102

5.2.2　動畫（animation）對象 104

5.3　案例：邀請函小程序 106

5.3.1　案例分析 106

5.3.2　任務1——新建一個微信小程序並配置 107

5.3.3　任務2——製作邀請函頁面 109

5.3.4　任務3——製作照片展示頁面 111

5.3.5　任務4——製作視頻頁面 112

5.3.6　任務5——製作地圖頁面 113

5.3.7　任務6——製作社員信息提交頁面 114

5.3.8　任務7——添加心跳動畫 119

5.4　小　結 120

5.5　課後習題 120

第6章

文件管理小程序 122

6.1 文　件 122

6.1.1　文件系統 122

6.1.2　獲取文件信息 126

6.1.3　獲取本地文件列表 127

6.1.4　創建目錄 127

6.1.5　刪除目錄 128

6.1.6　打開文件 129

6.2　案例：文件管理小程序 129

6.2.1　案例分析 129

6.2.2　任務1——頁面的實現 130

6.2.3　任務2——目錄功能的實現 131

6.2.4　任務3——文件功能的實現 133

6.3　小　結 136

6.4　課後習題 136

第7章

你畫我猜小程序 138

7.1 畫　布 138

7.1.1　畫布基礎知識 138

7.1.2　畫布小程序 139

7.2　案例：你畫我猜小程序 140

7.2.1　案例分析 140

7.2.2　任務1——頁面結構 140

7.2.3　任務2——繪制圖像 141

7.2.4　任務3——選擇畫筆顏色 142

7.2.5　任務4——取消、擦除、刪除 143

7.2.6　任務5——分享圖片 144

7.3　小　結 145

7.4　課後習題 146

第8章

校園場地預約小程序 147

8.1 網　絡 147

8.1.1　小程序網絡基礎 147

8.1.2　上傳與下載 150

8.2　開放接口 154

8.2.1　登錄 154

8.2.2　用戶信息 157

8.2.3　賬號信息 159

8.2.4　授權 160

8.3　案例：校園場地預約小程序 161

8.3.1　案例分析 161

8.3.2　任務1——用戶授權 161

8.3.3　任務2——預約場地 164

8.4　小　結 164

8.5　課後習題 165

第9章

購物車小程序 166

9.1 開發模式對比 166

9.1.1　傳統開發模式 166

9.1.2　雲開發模式 167

9.2　雲開發基礎 168

9.2.1　開通雲開發 168

9.2.2　雲數據庫 169

9.2.3　雲存儲 176

9.2.4　雲函數 177

9.3　案例：奶茶購物車小程序 180

9.3.1　案例分析 180

9.3.2　任務1——創建項目並配置 181

9.3.3　任務2——商品展示頁的實現 182

9.3.4　任務3——購物車頁面的實現 185

9.3.5　任務4——結算頁面的實現 190

9.3.6　任務5——地址管理頁面的實現 193

9.3.7　任務6——新增地址頁面的實現 195

9.4　小　結 198

9.5　課後習題 198

第 10章

書城小程序 200

10.1 uni-app框架介紹 200

10.1.1　什麽是uni-app 200

10.1.2　跨平臺開發 201

10.2　uni-app框架基礎 201

10.2.1　創建uni-app項目 201

10.2.2　目錄結構 202

10.2.3　語法規範 208

10.2.4　生命周期 217

10.3　uni-app常用API 220

10.3.1　頁面跳轉 220

10.3.2　發起請求 224

10.4　案例：書城小程序 227

10.4.1　案例分析 227

10.4.2　任務1——創建項目並配置導航欄 228

10.4.3　任務2——書城首頁的實現 230

10.4.4　任務3——分類頁面的實現 234

10.4.5　任務4——分類書籍列表頁面 236

10.4.6　任務5——書籍詳情頁面 237

10.4.7　任務6——書架頁面展示已添加的書籍 239

10.4.8　任務7——閱讀頁面 240

10.4.9　任務8——個人頁面 243

10.5　小　結 244

10.6　課後習題 244