微信小程序商城開發：界面設計實戰

黃菊華　編著

微信小程序商城開發：界面設計實戰
  • 出版商: 機械工業
  • 出版日期: 2019-08-01
  • 定價: $594
  • 售價: 8.5 折 $505
  • 語言: 簡體中文
  • ISBN: 7111633016
  • ISBN-13: 9787111633013

    • 立即出貨 (庫存 < 3)

買這商品的人也買了...

相關主題

商品描述

本書系統化介紹微信小程序商城的界面設計，包括基本原理和實戰案例，內容全面、案例豐富，可幫助讀者快速掌握微信小程序商城的開發。主要內容分四大部分，共17章。第一部分“小程序基礎”包括小程序的代碼構成和基礎概念。第二部分“小程序樣式入門”包括小程序樣式基礎知識、框模型、定位、選擇器等。第三部分“前端開發入門”包括彈性佈局、JSON數據解析、小程序前端開發基礎。第四部分“實戰”包括小程序的常用組件和API的介紹，商城的首頁、產品展示、購物車、下單、會員界面、公用功能等界面的開發案例詳解。

本書講解微信小程序前端界面設計，有詳細的理論知識、佈局設計、邏輯分析，還有豐富的實戰案例，詳細的代碼解說，具有很強的實用性。
主要內容包括：
小程序的代碼構成和基礎概念，包括頁面樣式佈局。
小程序樣式基礎知識、框模型、定位、選擇器等。
前端開發入門知識，包括彈性佈局、JSON數據解析、小程序前端開發基礎。
小程序的常用組件和API。
小程序商城界面的製作，包括佈局設計、邏輯分析，並給出實際代碼。
商城的首頁、產品展示、購物車、下單、會員、公用功能等界面開發案例詳解。
官方WeUI框架的使用方式，以及如何引用第三方插件。

目錄大綱

前言
第一部分　小程序基礎
第1章　小程序起步2
1.1　開發準備2
1.2　第一個微信小程序5
1.3　代碼構成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　小程序發布準備12
1.6　小程序上線13
第2章　小程序基礎知識15
2.1　項目配置文件15
2.2　全局配置和頁面配置17
2.2.1　全局配置18
2.2.2　頁面配置23
2.3　WXSS樣式語言23
2.4　邏輯層.js腳本25
2.4.1　App方法26
2.4.2　運行機制29
2.4.3　場景值30
2.4.4　Page方法32
2.4.5　路由40
2.4.6　模塊化41
2.4.7　API42
2.5　WXML視圖層開發43
2.5.1　數據綁定43
2.5.2　列表渲染47
2.5.3　條件渲染51
2.5.4　模板51
2.5.5　事件53
2.5.6　引用58
第二部分　小程序樣式入門
第3章　小程序樣式基礎62
3.1　元素選擇器62
3.2　ID選擇器63
3.3　類選擇器66
3.4　樣式的幾種寫法67
3.4.1　Web中樣式的幾種寫法67
3.4.2　小程序中樣式的幾種寫法69
3.5　背景顏色70
3.6　文本71
3.6.1　水平對齊（text-align）71
3.6.2　文本最後行對齊（text-align-last）73
3.6.3　縮進文本（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　字符轉換（text-transform）79
3.6.9　處理空白符（white-space）80
3.6.10　自動換行（word-break）80
3.6.11　長詞換行（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　字體風格（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　內邊距96
4.3　邊框98
4.3.1　基礎語法98
4.3.2　小程序應用102
4.4　外邊距103
4.5　外邊距合並107
第5章　定位112
5.1　相對定位112
5.2　絕對定位115
5.3　浮動117
第6章　選擇器121
6.1　選擇器的分組121
6.2　派生選擇器122
6.3　屬性選擇器123
6.4　後代選擇器125
6.5　子元素選擇器128
6.6　相鄰兄弟選擇器129
第三部分　前端開發入門
第7章　彈性布局134
7.1　彈性布局基本概念134
7.2　flex容器的屬性136
7.2.1　項目排列方向（flex-direction）136
7.2.2　項目換行（flex-wrap）139
7.2.3　flex-flow屬性142
7.2.4　水平對齊（justify-content）142
7.2.5　垂直對齊（align-items）145
7.2.6　各行對齊（align-content）149
7.3　flex項目的屬性150
7.3.1　子元素的排序（order）150
7.3.2　放大比例（flex-grow）152
7.3.3　縮小比例（flex-shrink）155
7.3.4　項目占據的主軸空間（flex-basis）156
7.3.5　flex綜合屬性設置156
7.3.6　子元素的對齊（align-self）157
7.3.7　對齊和居中（margin）158
7.4　flex布局樣例160
第8章　JSON數據解析163
8.1　JSON簡介163
8.2　JSON語法165
8.2.1　JSON語法規則165
8.2.2　JSON使用JavaScript語法166
8.3　JSON對象167
8.3.1　對象語法167
8.3.2　訪問對象值方式1168
8.3.3　訪問對象值方式2168
8.3.4　嵌套JSON對象169
8.3.5　修改值170
8.3.6　刪除對象屬性171
8.4　JSON數組172
8.4.1　JSON對象中的數組172
8.4.2　數組的循環訪問174
8.4.3　嵌套JSON對象中的數組175
8.4.4　修改數組值176
8.4.5　刪除數組元素177
8.5　JSON.parse()177
8.5.1　瀏覽器支持177
8.5.2　語法177
8.5.3　JSON解析實例177
8.5.4　從服務端接收JSON數據178
8.5.5　從服務端接收數組的JSON數據179
8.6　JSON.stringify()轉字符串180
8.6.1　JSON.stringify()語法180
8.6.2　JavaScript對象轉換180
8.6.3　JavaScript數組轉換181
8.7　eval函數182
第9章　小程序前端開發基礎184
9.1　常用數據184
9.1.1　變量184
9.1.2　對象185
9.1.3　數組186
9.2　邏輯語句188
9.2.1　if語句188
9.2.2　for語句190
9.2.3　while語句191
9.2.4　switch和case語句192
9.3　其他193
9.3.1　事件的定義和使用193
9.3.2　通過url來傳遞參數194
第四部分　實戰
第10章　常用組件198
10.1　組件概要198
10.2　基礎組件199
10.2.1　視圖容器（view）199
10.2.2　可滾動視圖區域（scroll-view）199
10.2.3　滑塊視圖容器（swiper）200
10.2.4　圖標（icon）201
10.2.5　文本（text）201
10.2.6　圖片（image）202
10.3　表單組件203
10.3.1　按鈕（button）203
10.3.2　多選項目（checkbox）205
10.3.3　多項選擇器（checkbox-group）205
10.3.4　表單（form）206
10.3.5　輸入框（input）206
10.3.6　標簽（label）208
10.3.7　滾動選擇器（picker）208
10.3.8　單選項目（radio）210
10.3.9　單項選擇器（radio-group）211
10.3.10　滑動選擇器（slider）211
10.3.11　開關選擇器（switch）211
10.3.12　多行輸入框（textarea）212
10.4　其他213
10.4.1　頁面鏈接（navigator）213
10.4.2　原生組件的使用限制214
第11章　常用API215
11.1　網絡相關說明215
11.1.1　網絡配置215
11.1.2　HTTPS網絡請求217
11.2　手機相關的API219
11.2.1　wx.chooseImage219
11.2.2　wx.getSystemInfo220
11.2.3　wx.makePhoneCall221
11.3　數據緩存API221
11.3.1　wx.setStorage221
11.3.2　wx.setStorageSync222
11.3.3　wx.getStorage222
11.3.4　wx.getStorageSync223
11.3.5　wx.getStorageInfo223
11.3.6　wx.removeStorage224
11.3.7　wx.clearStorage225
11.4　交互API225
11.4.1　wx.showToast225
11.4.2　wx.hideToast226
11.4.3　wx.showLoading227
11.4.4　wx.hideLoading227
11.4.5　wx.showActionSheet227
11.4.6　wx.showModal228
11.5　路由API229
11.5.1　wx.navigateTo229
11.5.2　wx.navigateBack230
11.5.3　wx.redirectTo230
11.5.4　wx.reLaunch231
11.5.5　wx.switchTab231
第12章　首頁233
12.1　商城框架233
12.2　頂部廣告圖片234
12.3　頂部輪播圖片236
12.4　快捷菜單237
12.5　最新通知244
12.6　最新產品248
12.7　精品推薦255
12.8　銷售排行260
第13章　分類和產品265
13.1　左右布局框架265
13.1.1　布局分析265
13.1.2　功能實現266
13.2　產品列表272
13.2.1　頂部查詢布局272
13.2.2　條件篩選布局274
13.2.3　產品列表布局276
13.3　產品頁面頂部切換功能278
13.4　產品頁面底部功能281
13.5　產品簡介布局284
13.6　產品詳情頁布局288
13.7　產品評價頁布局289
第14章　購物車和下單293
14.1　購物車首頁底部菜單293
14.2　購物車產品列表295
14.3　下單頁面底部菜單298
14.4　下單頁面收貨地址300
14.5　下單頁面的產品列表和留言302
第15章　會員界面305
15.1　會員首頁305
15.2　我的訂單308
15.3　收貨地址列表312
15.4　收貨地址修改和新增314
15.5　我的收藏318
15.6　常見問題列表321
15.7　聯系客服323
第16章　公用功能326
16.1　留言反饋326
16.2　活動信息列表329
16.3　幫助中心列表332
16.4　關於我們列表334
16.5　信息詳情（簡易版）335
16.6　信息詳情（帶底部評論）337
第17章　雜項知識341
17.1　WeUI341
17.1.1　實戰項目框架的制作342
17.1.2　欄目首頁343
17.1.3　article文章345
17.1.4　badge徽章347
17.2　WxParse解析富文本（html）代碼348

類似商品