新书推荐
《微信小程序商城开发：界面设计实战》
长按二维码
了解及购买
从基础组件的详解到综合案例，从工具使用到插件开发，包含大量精选案例和详细实操步骤，还有配套视频课程可帮助读者快速入门。
编辑推荐
本书讲解微信小程序前端界面设计，有详细的理论知识、布局分析、逻辑分析，还有丰富的实战案例，详细的代码解说，具有很强的实用性。
内容简介
本书系统化介绍微信小程序商城的界面设计，包括基本原理和实战案例，内容全面、案例丰富，可帮助读者快速掌握微信小程序商城的开发。主要内容分四大部分，共17章。第一部分“小程序基础”包括小程序的代码构成和基础概念。第二部分“小程序样式入门”包括小程序样式基础知识、框模型、定位、选择器等。第三部分“前端开发入门”包括弹性布局、JSON数据解析、小程序前端开发基础。第四部分“实战”包括小程序的常用组件和API的介绍，商城的首页、产品展示、购物车、下单、会员界面、公用功能等界面的开发案例详解。
作者简介
黄菊华
前端全栈工程师，杭州摇亿网络科技有限公司创始人兼技术总监，多年从事电子商务技术的研究，对于微信小程序、微信公众号、移动端HTML 5开发、各类前端框架技术，都有比较深入的研究和应用。作为技术总监带领团队开发了多个应用项目，项目涉及医疗、房地产、微商系统等。开设了整套微信小程序从零基础到就业的视频课程，网址为/qq。
目录
前言
第一部分小程序基础
第1章小程序起步2
1.1开发准备2
1.2第一个微信小程序5
1.3代码构成5
1.3.1JSON配置6
1.3.2WXML模板7
1.3.3WXSS样式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.3WXSS样式语言23
2.4逻辑层.js脚本25
2.4.1App方法26
2.4.2运行机制29
2.4.3场景值30
2.4.4Page方法32
2.4.5路由40
2.4.6模块化41
2.4.7API42
2.5WXML视图层开发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.2ID选择器63
3.3类选择器66
3.4样式的几种写法67
3.4.1Web中样式的几种写法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.2flex容器的属性136
7.2.1项目排列方向（flex-direction）136
7.2.2项目换行（flex-wrap）139
7.2.3flex-flow属性142
7.2.4水平对齐（justify-content）142
7.2.5垂直对齐（align-items）145
7.2.6各行对齐（align-content）149
7.3flex项目的属性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.5flex综合属性设置156
7.3.6子元素的对齐（align-self）157
7.3.7对齐和居中（margin）158
7.4flex布局样例160
第8章JSON数据解析163
8.1JSON简介163
8.2JSON语法165
8.2.1JSON语法规则165
8.2.2JSON使用JavaScript语法166
8.3JSON对象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.4JSON数组172
8.4.1JSON对象中的数组172
8.4.2数组的循环访问174
8.4.3嵌套JSON对象中的数组175
8.4.4修改数组值176
8.4.5删除数组元素177
8.5JSON.parse()177
8.5.1浏览器支持177
8.5.2语法177
8.5.3JSON解析实例177
8.5.4从服务端接收JSON数据178
8.5.5从服务端接收数组的JSON数据179
8.6JSON.stringify()转字符串180
8.6.1JSON.stringify()语法180
8.6.2JavaScript对象转换180
8.6.3JavaScript数组转换181
8.7eval函数182
第9章小程序前端开发基础184
9.1常用数据184
9.1.1变量184
9.1.2对象185
9.1.3数组186
9.2逻辑语句188
9.2.1if语句188
9.2.2for语句190
9.2.3while语句191
9.2.4switch和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.2HTTPS网络请求217
11.2手机相关的API219
11.2.1wx.chooseImage219
11.2.2wx.getSystemInfo220
11.2.3wx.makePhoneCall221
11.3数据缓存API221
11.3.1wx.setStorage221
11.3.2wx.setStorageSync222
11.3.3wx.getStorage222
11.3.4wx.getStorageSync223
11.3.5wx.getStorageInfo223
11.3.6wx.removeStorage224
11.3.7wx.clearStorage225
11.4交互API225
11.4.1wx.showToast225
11.4.2wx.hideToast226
11.4.3wx.showLoading227
11.4.4wx.hideLoading227
11.4.5wx.showActionSheet227
11.4.6wx.showModal228
11.5路由API229
11.5.1wx.navigateTo229
11.5.2wx.navigateBack230
11.5.3wx.redirectTo230
11.5.4wx.reLaunch231
11.5.5wx.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.1WeUI341
17.1.1实战项目框架的制作342
17.1.2栏目首页343
17.1.3article文章345
17.1.4badge徽章347
17.2WxParse解析富文本（html）代码348
你与世界
只差一个
公众号
如果觉得《新书推荐 |《微信小程序商城开发：界面设计实战》》对你有帮助，请点赞、收藏，并留下你的观点哦！
