買這商品的人也買了...
-
jQuery Mobile 建置與執行 (jQuery Mobile: Up and Running)$520$411 -
Visual C# 與 Xamarin 跨平台行動 App 開發實戰 ─ iOS/Android/Windows 一次搞定$500$425 -
快速查, 馬上用! CSS3+jQuery 手機網站 UI 範例實作$450$383 -
王者歸來-PHP 完全開發範例集, 3/e$860$731 -
寫程式前就該懂的演算法 ─ 資料分析與程式設計人員必學的邏輯思考術 (Grokking Algorithms: An illustrated guide for programmers and other curious people)$390$308 -
單元測試的藝術, 2/e (The Art of Unit Testing: with examples in C#, 2/e)$650$507 -
$352大話代碼架構 (項目實戰版) -
$474SQL 優化核心思想 -
社群行銷的 12堂嚴選課程$520$406 -
$254微信公眾號、小程序、朋友圈運營完全操作手冊 -
30歲警官靠美股提早退休$350$298 -
廣告行銷自學聖經:圖解50年金獎廣告,文案撰寫、策略擬定、平面動態、品牌定位及社媒經營的全方位秘笈$660$561 -
TypeScript 程式設計 (Programming TypeScript)$580$458 -
$454Spring 微服務架構設計, 2/e -
Hands-On Microservices with C# 8 and .NET Core 3, 3/e (Paperback)$1,530$1,454 -
$284微信小程序開發實戰 -
$564精通Spring Cloud微服務架構 -
$403Vue.js 入門與商城開發實戰 -
領域驅動設計與 .NET Core:應用 DDD 原則,探索軟體核心複雜度 (Hands-On Domain-Driven Design with .NET Core)$780$608 -
不當礦工當老闆:自己動手開發區塊鏈應用業務$780$616 -
$403Xamarin 全棧開發技術與實踐 (微課版) -
美股獲利入門,睡覺時間賺遍全世界:精選25檔增利股,年年發股利,提前布局未來四騎士,大賺價差。$400$340 -
$458Spring Boot 企業級項目開發實戰 -
Solidity 實戰全書:完整掌握智能合約!成為獨立開發 Dapp 的區塊鏈工程師$650$507 -
ASP.NET Core 工程師不可不知的 10大安全性漏洞與防駭方法$690$538
中文年末書展|繁簡參展書2書75折 詳見活動內容 »
-
75折
為你寫的 Vue Components:從原子到系統,一步步用設計思維打造面面俱到的元件實戰力 (iThome 鐵人賽系列書)$780$585 -
75折
BDD in Action, 2/e (中文版)$960$720 -
75折
看不見的戰場:社群、AI 與企業資安危機$750$563 -
79折
AI 精準提問 × 高效應用:DeepSeek、ChatGPT、Claude、Gemini、Copilot 一本搞定$390$308 -
7折
超實用!Word.Excel.PowerPoint 辦公室 Office 365 省時高手必備 50招, 4/e (暢銷回饋版)$420$294 -
75折
裂縫碎光:資安數位生存戰$550$412 -
日本當代最強插畫 2025 : 150位當代最強畫師豪華作品集$640$576 -
79折
Google BI 解決方案:Looker Studio × AI 數據驅動行銷實作,完美整合 Google Analytics 4、Google Ads、ChatGPT、Gemini$630$498 -
79折
超有料 Plus!職場第一實用的 AI 工作術 - 用對 AI 工具、自動化 Agent, 讓生產力全面進化!$599$473 -
75折
從零開始學 Visual C# 2022 程式設計, 4/e (暢銷回饋版)$690$518 -
75折
Windows 11 制霸攻略:圖解 AI 與 Copilot 應用,輕鬆搞懂新手必學的 Windows 技巧$640$480 -
75折
精準駕馭 Word!論文寫作絕非難事 (好評回饋版)$480$360 -
Sam Yang 的插畫藝術:用 Procreate / PS 畫出最強男友視角 x 女孩美好日常$699$629 -
79折
AI 加持!Google Sheets 超級工作流$599$473 -
78折
想要 SSR? 快使用 Nuxt 吧!:Nuxt 讓 Vue.js 更好處理 SEO 搜尋引擎最佳化(iThome鐵人賽系列書)$780$608 -
78折
超實用!業務.總管.人資的辦公室 WORD 365 省時高手必備 50招 (第二版)$500$390 -
7折
Node-RED + YOLO + ESP32-CAM:AIoT 智慧物聯網與邊緣 AI 專題實戰$680$476 -
79折
「生成式⇄AI」:52 個零程式互動體驗,打造新世代人工智慧素養$599$473 -
7折
Windows APT Warfare:惡意程式前線戰術指南, 3/e$720$504 -
75折
我輩程式人:回顧從 Ada 到 AI 這條程式路,程式人如何改變世界的歷史與未來展望 (We, Programmers: A Chronicle of Coders from Ada to AI)$850$637 -
75折
不用自己寫!用 GitHub Copilot 搞定 LLM 應用開發$600$450 -
79折
Tensorflow 接班王者:Google JAX 深度學習又快又強大 (好評回饋版)$780$616 -
79折
GPT4 會你也會 - 共融機器人的多模態互動式情感分析 (好評回饋版)$700$553 -
79折
技術士技能檢定 電腦軟體應用丙級術科解題教本|Office 2021$460$363 -
75折
Notion 與 Notion AI 全能實戰手冊:生活、學習與職場的智慧策略 (暢銷回饋版)$560$420
相關主題
商品描述
本書系統化介紹微信小程序商城的界面設計,包括基本原理和實戰案例,內容全面、案例豐富,可幫助讀者快速掌握微信小程序商城的開發。主要內容分四大部分,共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
