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

本书系统化介绍微信小程序商城的界面设计,包括基本原理和实战案例，内容全面、案例丰富，可帮助读者快速掌握微信小程序商城的开发。主要内容分四大部分，共17章。第一部分“小程序基础”包括小程序的代码构成和基础概念。第二部分“小程序样式入门”包括小程序样式基础知识、框模型、定位、选择器等。第三部分“前端开发入门”包括弹性布局、JSON数据解析、小程序前端开发基础。第四部分“实战”包括小程序的常用组件和API的介绍，以及商城的首页、产品展示、购物车、下单、会员界面、公用功能等界面开发案例详解。

华，前端全栈工程师，杭州摇亿网络科技有限公司创始人兼技术总监，多年从事电子商务技术的研究，对于微信小程序、微信公众号、移动端HTML 5开发、各类前端框架技术，都有比较深入的研究和应用。作为技术总监带领团队开发了多个应用项目，项目涉及医疗、房地产、微商系统等。开设了整套微信小程序从零基础到就业的视频课程，网址为http://www.4317.org/qq。

前言第一部分  小程序基础第1章  小程序起步21.1  开发准备21.2  第一个微信小程序51.3  代码构成51.3.1  JSON配置61.3.2  WXML模板71.3.3  WXSS样式91.3.4  .js脚本交互逻辑91.4  小程序的能力101.5  小程序发布准备121.6  小程序上线13第2章  小程序基础知识152.1  项目配置文件152.2  全局配置和页面配置172.2.1  全局配置182.2.2  页面配置232.3  WXSS样式语言232.4  逻辑层.js脚本252.4.1  App方法262.4.2  运行机制292.4.3  场景值302.4.4  Page方法322.4.5  路由402.4.6  模块化412.4.7  API422.5  WXML视图层开发432.5.1  数据绑定432.5.2  列表渲染472.5.3  条件渲染512.5.4  模板512.5.5  事件532.5.6  引用58第二部分  小程序样式入门第3章  小程序样式基础623.1  元素选择器623.2  ID选择器633.3  类选择器663.4  样式的几种写法673.4.1  Web中样式的几种写法673.4.2  小程序中样式的几种写法693.5  背景颜色703.6  文本713.6.1  水平对齐（text-align）713.6.2  文本最后行对齐（text-align-last）733.6.3  缩进文本（text-indent）733.6.4  文本装饰（text-decoration）753.6.5  单词间隔（text-justify）763.6.6  文本溢出（text-overflow）773.6.7  文本阴影（text-shadow）783.6.8  字符转换（text-transform）793.6.9  处理空白符（white-space）803.6.10  自动换行（word-break）803.6.11  长词换行（word-wrap）813.6.12  单词间隔（word-spacing）823.6.13  字母间隔（letter-spacing）833.6.14  文本方向（direction）843.7  字体853.7.1  字体大小（font-size）853.7.2  字体风格（font-style）873.7.3  字体变形（font-variant）883.7.4  字体加粗（font-weight）893.8  轮廓90第4章  框模型934.1  框模型概述934.2  内边距964.3  边框984.3.1  基础语法984.3.2  小程序应用1024.4  外边距1034.5  外边距合并107第5章  定位1125.1  相对定位1125.2  绝对定位1155.3  浮动117第6章  选择器1216.1  选择器的分组1216.2  派生选择器1226.3  属性选择器1236.4  后代选择器1256.5  子元素选择器1286.6  相邻兄弟选择器129第三部分  前端开发入门第7章  弹性布局1347.1  弹性布局基本概念1347.2  flex容器的属性1367.2.1  项目排列方向（flex-direction）1367.2.2  项目换行（flex-wrap）1397.2.3  flex-flow属性1427.2.4  水平对齐（justify-content）1427.2.5  垂直对齐（align-items）1457.2.6  各行对齐（align-content）1497.3  flex项目的属性1507.3.1  子元素的排序（order）1507.3.2  放大比例（flex-grow）1527.3.3  缩小比例（flex-shrink）1557.3.4  项目占据的主轴空间（flex-basis）1567.3.5  flex综合属性设置1567.3.6  子元素的对齐（align-self）1577.3.7  对齐和居中（margin）1587.4  flex布局样例160第8章  JSON数据解析1638.1  JSON简介1638.2  JSON语法1658.2.1  JSON语法规则1658.2.2  JSON使用JavaScript语法1668.3  JSON对象1678.3.1  对象语法1678.3.2  访问对象值方式11688.3.3  访问对象值方式21688.3.4  嵌套JSON对象1698.3.5  修改值1708.3.6  删除对象属性1718.4  JSON数组1728.4.1  JSON对象中的数组1728.4.2  数组的循环访问1748.4.3  嵌套JSON对象中的数组1758.4.4  修改数组值1768.4.5  删除数组元素1778.5  JSON.parse()1778.5.1  浏览器支持1778.5.2  语法1778.5.3  JSON解析实例1778.5.4  从服务端接收JSON数据1788.5.5  从服务端接收数组的JSON数据1798.6  JSON.stringify()转字符串1808.6.1  JSON.stringify()语法1808.6.2  JavaScript对象转换1808.6.3  JavaScript数组转换1818.7  eval函数182第9章  小程序前端开发基础1849.1  常用数据1849.1.1  变量1849.1.2  对象1859.1.3  数组1869.2  逻辑语句1889.2.1  if语句1889.2.2  for语句1909.2.3  while语句1919.2.4  switch和case语句1929.3  其他1939.3.1  事件的定义和使用1939.3.2  通过url来传递参数194第四部分  实战第10章  常用组件19810.1  组件概要19810.2  基础组件19910.2.1  视图容器（view）19910.2.2  可滚动视图区域（scroll-view）19910.2.3  滑块视图容器（swiper）20010.2.4  图标（icon）20110.2.5  文本（text）20110.2.6  图片（image）20210.3  表单组件20310.3.1  按钮（button）20310.3.2  多选项目（checkbox）20510.3.3  多项选择器（checkbox-group）20510.3.4  表单（form）20610.3.5  输入框（input）20610.3.6  标签（label）20810.3.7  滚动选择器（picker）20810.3.8  单选项目（radio）21010.3.9  单项选择器（radio-group）21110.3.10  滑动选择器（slider）21110.3.11  开关选择器（switch）21110.3.12  多行输入框（textarea）21210.4  其他21310.4.1  页面链接（navigator）21310.4.2  原生组件的使用214第11章  常用API21511.1  网络相关说明21511.1.1  网络配置21511.1.2  HTTPS网络请求21711.2  手机相关的API21911.2.1  wx.chooseImage21911.2.2  wx.getSystemInfo22011.2.3  wx.makePhoneCall22111.3  数据缓存API22111.3.1  wx.setStorage22111.3.2  wx.setStorageSync22211.3.3  wx.getStorage22211.3.4  wx.getStorageSync22311.3.5  wx.getStorageInfo22311.3.6  wx.removeStorage22411.3.7  wx.clearStorage22511.4  交互API22511.4.1  wx.showToast22511.4.2  wx.hideToast22611.4.3  wx.showLoading22711.4.4  wx.hideLoading22711.4.5  wx.showActionSheet22711.4.6  wx.showModal22811.5  路由API22911.5.1  wx.navigateTo22911.5.2  wx.navigateBack23011.5.3  wx.redirectTo23011.5.4  wx.reLaunch23111.5.5  wx.switchTab231第12章  首页23312.1  商城框架23312.2  顶部广告图片23412.3  顶部轮播图片23612.4  快捷菜单23712.5  近期新通知24412.6  近期新产品24812.7  精品推荐25512.8  销售排行260第13章  分类和产品26513.1  左右布局框架26513.1.1  布局分析26513.1.2  功能实现26613.2  产品列表27213.2.1  顶部查询布局27213.2.2  条件筛选布局27413.2.3  产品列表布局27613.3  产品页面顶部切换功能27813.4  产品页面底部功能28113.5  产品简介布局28413.6  产品详情页布局28813.7  产品评价页布局289第14章  购物车和下单29314.1  购物车首页底部菜单29314.2  购物车产品列表29514.3  下单页面底部菜单29814.4  下单页面收货地址30014.5  下单页面的产品列表和留言302第15章  会员界面30515.1  会员首页30515.2  我的订单30815.3  收货地址列表31215.4  收货地址修改和新增31415.5  我的收藏31815.6  常见问题列表32115.7  联系客服323第16章  公用功能32616.1  留言反馈32616.2  活动信息列表32916.3  帮助中心列表33216.4  关于我们列表33416.5  信息详情（简易版）33516.6  信息详情（带底部评论）337第17章  杂项知识34117.1  WeUI34117.1.1  实战项目框架的制作34217.1.2  栏目首页34317.1.3  article文章34517.1.4  badge徽章34717.2  WxParse解析富文本（html）代码348