微信小程序商城开发：界面设计实战

本书系统化介绍微信小程序商城的开发原理和实战案例，内容全面、案例丰富，可帮助读者快速掌握微信小程序商城的开发。主要内容分两大部分：基础知识、实战案例。基础知识包括微信小程序起步、商城开发知识点分析、商城开发的页面基础知识、商城开发的页面基础知识、商城界面UI常用组件、商城界面UI常用组件，实战案例分析包括首页、分类和产品案例、微信小程序支付、购物车和下单、会员界面、公用功能。

适读人群 ：1. 前端开发人员 2. 网络应用开发人员
本书讲解微信小程序前端界面设计，有详细的理论知识、布局分析、逻辑分析，还有丰富的实战案例，详细的代码解说，具有很强的实用性。

微信小程序自2017年1月9日正式上线后，就引发了一系列的热烈讨论。小程序为开发者提供了一种新的能力，使开发者可以快速地开发一个小程序商城。用户可便捷地获取小程序服务，无须安装或下载；小程序具有更丰富的功能和出色的使用体验；小程序具有封装一系列接口的能力，有助于快速开发和迭代，同时在安卓和苹果手机上都通用。
本书是讲解微信小程序前端界面设计的入门书籍，有详细的理论知识、布局分析、逻辑分析，还有丰富的实战案例以及详细的代码解说，具有很强的实用性。微信小程序使用大量的组件，官方提供了详细的文档；本书在此基础上，结合作者的理解，配备了更详细的实战案例，同时为代码添加了详细的注释，读者拷贝代码到开发工具即可看到效果，这样读者可以在最快的时间内掌握基础知识，快速进入实战开发。
微信小程序的前端样式开发基于传统的CSS，所以从前端UI的实现角度来讲，读者只需要熟悉CSS就能轻松上手微信小程序的界面设计；当然，有些CSS语法微信小程序是不支持的。
微信小程序开发框架的逻辑层使用JavaScript引擎为小程序开发者提供运行环境，并提供小程序的特有功能。在 JavaScript的基础上还增加了一些功能，以方便小程序的开发。本书详细讲解了前端逻辑层用到的JavaScript基础语法。
如果读者没有小程序基础，建议先将第1和第2章的基础知识通读一遍。
第3～6章为小程序样式入门，主要讲解小程序页面样式布局，这都是前端UI设计所要用到的知识，建议读者仔细阅读，动手操作。掌握了基础知识，后面学习小程序商城界面设计才能得心应手。
第7～9章为前端开发入门，主要讲解小程序中前端JavaScript基础知识和实战应用，有别于传统的JavaScript代码，建议读者详细阅读，动手练习。
第10～17章为实战部分。其中，第10和第11章讲解小程序开发所需的常用组件和API。第12～16章介绍微信小程序商城界面的制作，包括布局分析和逻辑分析，读者按照书中的步骤练习，便可快速掌握。第17章讲解官方WeUI框架如何使用，以及如何引用第三方插件。
本书示例代码力求完整，但由于篇幅有限，有些代码没有写入书里。需要完整代码的读者请访问以下网址：
http://www.4317.org/book
http://www.yaoyiwangluo.com/book

前言
第一部分　小程序基础
第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.