微信小程序商城開(kāi)發(fā)：界面設(shè)計(jì)實(shí)戰(zhàn)

前言
第一部分　小程序基礎(chǔ)
第1章　小程序起步2
1.1　開(kāi)發(fā)準(zhǔn)備2
1.2　第一個(gè)微信小程序5
1.3　代碼構(gòu)成5
1.3.1　JSON配置6
1.3.2　WXML模板7
1.3.3　WXSS樣式9
1.3.4　.js腳本交互邏輯9
1.4　小程序的能力10
1.5　小程序發(fā)布準(zhǔn)備12
1.6　小程序上線(xiàn)13
第2章　小程序基礎(chǔ)知識(shí)15
2.1　項(xiàng)目配置文件15
2.2　全局配置和頁(yè)面配置17
2.2.1　全局配置18
2.2.2　頁(yè)面配置23
2.3　WXSS樣式語(yǔ)言23
2.4　邏輯層.js腳本25
2.4.1　App方法26
2.4.2　運(yùn)行機(jī)制29
2.4.3　場(chǎng)景值30
2.4.4　Page方法32
2.4.5　路由40
2.4.6　模塊化41
2.4.7　API42
2.5　WXML視圖層開(kāi)發(fā)43
2.5.1　數(shù)據(jù)綁定43
2.5.2　列表渲染47
2.5.3　條件渲染51
2.5.4　模板51
2.5.5　事件53
2.5.6　引用58
第二部分　小程序樣式入門(mén)
第3章　小程序樣式基礎(chǔ)62
3.1　元素選擇器62
3.2　ID選擇器63
3.3　類(lèi)選擇器66
3.4　樣式的幾種寫(xiě)法67
3.4.1　Web中樣式的幾種寫(xiě)法67
3.4.2　小程序中樣式的幾種寫(xiě)法69
3.5　背景顏色70
3.6　文本71
3.6.1　水平對(duì)齊（text-align）71
3.6.2　文本最后行對(duì)齊（text-align-last）73
3.6.3　縮進(jìn)文本（text-indent）73
3.6.4　文本裝飾（text-decoration）75
3.6.5　單詞間隔（text-justify）76
3.6.6　文本溢出（text-overflow）77
3.6.7　文本陰影（text-shadow）78
3.6.8　字符轉(zhuǎn)換（text-transform）79
3.6.9　處理空白符（white-space）80
3.6.10　自動(dòng)換行（word-break）80
3.6.11　長(zhǎng)詞換行（word-wrap）81
3.6.12　單詞間隔（word-spacing）82
3.6.13　字母間隔（letter-spacing）83
3.6.14　文本方向（direction）84
3.7　字體85
3.7.1　字體大小（font-size）85
3.7.2　字體風(fēng)格（font-style）87
3.7.3　字體變形（font-variant）88
3.7.4　字體加粗（font-weight）89
3.8　輪廓90
第4章　框模型93
4.1　框模型概述93
4.2　內(nèi)邊距96
4.3　邊框98
4.3.1　基礎(chǔ)語(yǔ)法98
4.3.2　小程序應(yīng)用102
4.4　外邊距103
4.5　外邊距合并107
第5章　定位112
5.1　相對(duì)定位112
5.2　絕對(duì)定位115
5.3　浮動(dòng)117
第6章　選擇器121
6.1　選擇器的分組121
6.2　派生選擇器122
6.3　屬性選擇器123
6.4　后代選擇器125
6.5　子元素選擇器128
6.6　相鄰兄弟選擇器129
第三部分　前端開(kāi)發(fā)入門(mén)
第7章　彈性布局134
7.1　彈性布局基本概念134
7.2　flex容器的屬性136
7.2.1　項(xiàng)目排列方向（flex-direction）136
7.2.2　項(xiàng)目換行（flex-wrap）139
7.2.3　flex-flow屬性142
7.2.4　水平對(duì)齊（justify-content）142
7.2.5　垂直對(duì)齊（align-items）145
7.2.6　各行對(duì)齊（align-content）149
7.3　flex項(xiàng)目的屬性150
7.3.1　子元素的排序（order）150
7.3.2　放大比例（flex-grow）152
7.3.3　縮小比例（flex-shrink）155
7.3.4　項(xiàng)目占據(jù)的主軸空間（flex-basis）156
7.3.5　flex綜合屬性設(shè)置156
7.3.6　子元素的對(duì)齊（align-self）157
7.3.7　對(duì)齊和居中（margin）158
7.4　flex布局樣例160
第8章　JSON數(shù)據(jù)解析163
8.1　JSON簡(jiǎn)介163
8.2　JSON語(yǔ)法165
8.2.1　JSON語(yǔ)法規(guī)則165
8.2.2　JSON使用JavaScript語(yǔ)法166
8.3　JSON對(duì)象167
8.3.1　對(duì)象語(yǔ)法167
8.3.2　訪問(wèn)對(duì)象值方式1168
8.3.3　訪問(wèn)對(duì)象值方式2168
8.3.4　嵌套JSON對(duì)象169
8.3.5　修改值170
8.3.6　刪除對(duì)象屬性171
8.4　JSON數(shù)組172
8.4.1　JSON對(duì)象中的數(shù)組172
8.4.2　數(shù)組的循環(huán)訪問(wèn)174
8.4.3　嵌套JSON對(duì)象中的數(shù)組175
8.4.4　修改數(shù)組值176
8.4.5　刪除數(shù)組元素177
8.5　JSON.parse()177
8.5.1　瀏覽器支持177
8.5.2　語(yǔ)法177
8.5.3　JSON解析實(shí)例177
8.5.4　從服務(wù)端接收J(rèn)SON數(shù)據(jù)178
8.5.5　從服務(wù)端接收數(shù)組的JSON數(shù)據(jù)179
8.6　JSON.stringify()轉(zhuǎn)字符串180
8.6.1　JSON.stringify()語(yǔ)法180
8.6.2　JavaScript對(duì)象轉(zhuǎn)換180
8.6.3　JavaScript數(shù)組轉(zhuǎn)換181
8.7　eval函數(shù)182
第9章　小程序前端開(kāi)發(fā)基礎(chǔ)184
9.1　常用數(shù)據(jù)184
9.1.1　變量184
9.1.2　對(duì)象185
9.1.3　數(shù)組186
9.2　邏輯語(yǔ)句188
9.2.1　if語(yǔ)句188
9.2.2　for語(yǔ)句190
9.2.3　while語(yǔ)句191
9.2.4　switch和case語(yǔ)句192
9.3　其他193
9.3.1　事件的定義和使用193
9.3.2　通過(guò)url來(lái)傳遞參數(shù)194
第四部分　實(shí)戰(zhàn)
第10章　常用組件198
10.1　組件概要198
10.2　基礎(chǔ)組件199
10.2.1　視圖容器（view）199
10.2.2　可滾動(dòng)視圖區(qū)域（scroll-view）199
10.2.3　滑塊視圖容器（swiper）200
10.2.4　圖標(biāo)（icon）201
10.2.5　文本（text）201
10.2.6　圖片（image）202
10.3　表單組件203
10.3.1　按鈕（button）203
10.3.2　多選項(xiàng)目（checkbox）205
10.3.3　多項(xiàng)選擇器（checkbox-group）205
10.3.4　表單（form）206
10.3.5　輸入框（input）206
10.3.6　標(biāo)簽（label）208
10.3.7　滾動(dòng)選擇器（picker）208
10.3.8　單選項(xiàng)目（radio）210
10.3.9　單項(xiàng)選擇器（radio-group）211
10.3.10　滑動(dòng)選擇器（slider）211
10.3.11　開(kāi)關(guān)選擇器（switch）211
10.