微信小程序商城开发实战

 在当今移动互联网大潮中，微信应用凭借其庞大的用户基数和极强的用户黏性牢牢地占据着移动App应用的头把交椅之位，据相关统计，微信月活跃用户已达10亿之多，且占据着中国用户30%以上的应用时间，微信已经是当之无愧的超级App。大树底下好乘凉，含着金钥匙诞生的微信小程序，背靠微信这棵大树，从微信官方首次透露之日起，就受到了广大用户和开发者的重点关注。

小程序自2017年1月9日正式上线以来，经过将近两年的发展，市面上已经涌现出了诸多优秀的小程序应用，如：跳一跳、拼多多、摩拜单车和肯德基+等。而在这些小程序应用中，最具商业价值的则是电商类的小程序应用，借助微信的社交引流再加上小程序“无需安装、用完即走”的技术赋能，社交电商小程序开辟出了移动互联网电商市场的新局面。正是基于电商小程序的潜在商业价值和庞大的市场需求，我选择微信小程序商城这个实战项目案例为各位读者详细讲解如何打造一款小而美的电商小程序应用以饕读者。

本书的编写思路力求符合程序员自学的最佳路径，先进行小程序技术知识框架基础以及核心的由浅入深、由点及面的全面梳理和认知，再结合具体的小程序商城实战项目案例来综合实践前面所学的技术知识点。我没有选择太过简单的小程序项目案例，而是选择了小程序商城这个经典实用和综合性强，且极具商业价值的实战项目来进行讲解，这样能更好地让自学者对整个小程序项目有一个更高维度的认知和理解，同时该实战项目又可以很方便地用作实际的互联网创业或商业项目来落地应用，可谓一举两得，兼具学习用途和商业用途。

全书共分三大篇，第一篇为小程序开发基础篇，主要讲解了小程序概念、市场分析、入门DEMO体验和框架基础等，读者需要重点掌握的是小程序框架基础知识部分；第二篇为小程序开发高级篇，主要讲解了小程序框架组件、API和服务端开发思路，建议读者快速阅读框架组件和API部分的知识，形成大致印象即可，知道如何查阅这些技术要点，而对于小程序服务端开发则重点在于理解小程序前后端如何通过接口进行数据交互的开发模式；第三篇为小程序开发实战篇，我按照项目需求分析、项目数据库设计、小程序前端程序开发和后端程序开发详细讲解了微信小程序商城应用的完整实战开发过程，并罗列了具体代码示例，建议读者首先对项目需求和数据库设计形成初步理解之后，再对小程序前端程序开发部分进行具体的学习，小程序前端这块是该项目的重中之重，也是对前面两篇技术知识点的综合运用和实践。至于小程序后端程序开发部分，如果读者是专注做前端开发的，建议可以大致了解下后端开发的技术知识，方便以后进行前后端协作开发时的快速沟通和理解开发需求。如果读者是全栈开发者或是项目经理，建议重点阅读后端开发这一部分的内容，学习和参考均可。

此外，我还有一个多年学习技术的经验——“技术学习九字真诀”，也希望在此分享给各位：学习技术，重点掌握该技术的三点，其一为“是什么”，知道该技术的基本概念，最好结合一些具体的生活化的实例来理解抽象的技术知识；其二为“为什么”，理解该技术的核心原理，是否对技术有深度的认知重点在于是否对该技术的核心原理理解透彻；其三为“怎么用”，掌握并实际运用该技术是学习技术的最终目的和最佳实践方式，当你知道了该技术怎么用、用在什么业务场景时，想必你对技术的掌握就已经达到了一定的高度。

本书读者对象包括：前端开发工程师、软件项目经理、微信应用开发者、全栈开发爱好者和计算机软件相关专业的学生。

在写作本书的过程中，得到了众多好友和同行的鼓励，在此由衷感谢;同时也感谢北京航空航天大学出版社的编辑的全力支持;最后感谢家人的理解和支持，让我能全身心地投入到这本书籍的创造中。谨以此书，献给自己的宝贝女儿唐悠然，希望她未来能健康快乐、悠然自得。

请到北京航空航天大学出版社官网的“下载专区（随书资料）”下载本书源码。

唐磊，武汉信真科技创始人，先后在东软集团、神州数码和北京寻未科技任职，承担过银行业务系统、订单管理系统以及移动互联网医疗App等大型项目研发工作，拥有超过8年的一线编程实战和架构经验。

小程序开发基础篇第1章初识小程序2

1.1小程序概述2

1.2什么是小程序2

1.3小程序的优劣势4

1.4小程序市场前景4

1.5小程序商业价值分析5

第2章小程序入门10

2.1开发前的准备10

2.1.1注册微信公众平台成为开发者11

2.1.2开发工具下载与安装17

2.2体验第一个小程序20

2.2.1开发模式选择20

2.2.2创建Hello World小程序21

2.2.3如何获取小程序AppID23

2.3微信开发者工具使用介绍24

2.3.1开发工具界面图解24

2.3.2小程序调试工具27

2.3.3如何预览小程序31

2.3.4上传和发布小程序32

第3章小程序框架基础35

3.1理解小程序开发框架35

3.1.1小程序框架原理35

3.1.2小程序目录结构和文件构成37

3.1.3小程序配置38

3.1.4小程序运行和加载机制41

3.1.5小程序生命周期和线程架构42

3.2WXML:小程序版HTML43

3.2.1标签与属性43

3.2.2数据绑定45

3.2.3条件渲染50

3.2.4列表渲染50

3.2.5模板、引用和事件53

3.2.6WXML与HTML的区别58

3.3WXSS:小程序版CSS58

3.3.1选择器与优先级59

3.3.2盒子模型60

3.3.3内联样式61

3.3.4尺寸单位与样式导入62

3.3.5WXSS与CSS的区别63

3.4WXS:小程序版JavaScript63

3.4.1小程序JavaScript63

3.4.2同步和异步64

3.4.3模块化65

微信小程序商城开发实战小程序开发高级篇

第4章小程序框架组件69

4.1视图容器组件69

4.1.1视图容器69

4.1.2可滚动视图区域71

4.1.3滑块视图容器74

4.1.4可移动视图容器77

4.1.5覆盖在原生组件上的文本视图80

4.1.6覆盖在原生组件上的图片视图80

4.2基础内容组件83

4.2.1图标83

4.2.2文本85

4.2.3富文本87

4.2.4进度条88

4.3表单组件89

4.3.1按钮89

4.3.2多项选择器93

4.3.3表单94

4.3.4输入框96

4.3.5标签100

4.3.6滚动选择器104

4.3.7单项选择器116

4.3.8滑动选择器118

4.3.9开关选择器120

4.3.10多行输入框121

4.4导航组件123

4.4.1页面导航123

4.4.2功能页导航125

4.5媒体组件127

4.5.1音频127

4.5.2图片129

4.5.3视频135

4.5.4相机139

4.5.5实时音视频播放140

4.5.6实时音视频录制143

4.6地图组件145

4.7画布组件148

4.8开放能力组件151

4.8.1开放数据151

4.8.2网页容器151

4.8.3广告152

4.8.4公众号关注153

第5章小程序框架API154

5.1网络API155

5.1.1发起请求155

5.1.2上传下载156

5.1.3长连接WebSocket158

5.2媒体API160

5.2.1音视频160

5.2.2图片166

5.2.3录音170

5.3文件API172

5.4数据缓存API176

5.5位置API180

5.6设备API182

5.6.1加速计、蓝牙、罗盘182

5.6.2电量、性能、屏幕184

5.6.3联系人、电话、扫码186

5.7界面API187

5.7.1动画187

5.7.2交互190

5.7.3导航栏193

5.7.4置顶、滚动、下拉刷新194

5.8开放接口API196

5.8.1授权、登录、用户信息196

5.8.2微信支付201

5.8.3模板消息、统一服务消息203

5.9其他API207

5.9.1基础207

5.9.2转发207

5.9.3系统信息209

第6章小程序服务端开发思路211

6.1服务端开发语言和框架选择建议211

6.1.1开发语言和框架的选择211

6.1.2新选择——小程序?云开发213

6.2数据库设计思路214

6.2.1小程序项目数据库选型214

6.2.2数据库设计方法和建议216

6.3服务端接口开发思路217

6.3.1RESTful API介绍217

6.3.2后端API开发技巧和建议218

6.4服务端后台管理系统开发思路219

6.4.1后台管理系统页面设计建议219

6.4.2后台管理系统功能开发注意要点220

小程序开发实战篇第7章小程序商城需求分析和数据库设计223

7.1项目需求分析223

7.1.1项目背景概述223

7.1.2业务需求分析223

7.1.3产品需求分析225

7.1.4产品结构图228

7.2项目数据库设计229

7.2.1数据库设计概述229

7.2.2数据库表结构设计230

第8章小程序商城前端程序开发237

8.1小程序商城前端页面开发概述237

8.2项目全局基础模块代码清单237

8.2.1全局入口 app.js237

8.2.2全局配置app.json241

8.2.3全局样式 app.wxss243

8.2.4项目配置 project.config.json244

8.3首页代码清单245

8.3.1wxml模板代码246

8.3.2wxss样式代码247

8.3.3js逻辑代码257

8.3.4json配置代码261

8.4商品分类页代码清单261

8.4.1wxml代码262

8.4.2wxss样式代码263

8.4.3js逻辑代码267

8.4.4json配置代码269

8.5商品详情页代码清单270

8.5.1wxml模板代码270

8.5.2wxss样式代码272

8.5.3js逻辑代码290

8.5.4json配置代码300

8.6购物车页代码清单300

8.6.1wxml模板代码300

8.6.2wxss样式代码302

8.6.3js逻辑代码311

8.6.4json配置代码317

8.7订单确认页代码清单317

8.7.1wxml模板代码318

8.7.2wxss样式代码320

8.7.3js逻辑代码328

8.7.4json配置代码333

8.8订单详情页代码清单333

8.8.1wxml模板代码333

8.8.2wxss样式代码335

8.8.3js逻辑代码341

8.8.4json配置代码343

8.9地址管理页代码清单343

8.9.1wxml模板代码343

8.9.2wxss样式代码344

8.9.3js逻辑代码346

8.9.4json配置代码350

8.10保存地址页代码清单350

8.10.1wxml模板代码351

8.10.2wxss样式代码352

8.10.3js逻辑代码353

8.10.4json配置代码358

8.11优惠券页代码清单358

8.11.1wxml模板代码359

8.11.2wxss样式代码359

8.11.3js逻辑代码363

8.11.4json配置代码365

8.12个人中心页代码清单365

8.12.1wxml模板代码366

8.12.2wxss样式代码367

8.12.3js逻辑代码371

8.12.4json配置代码374

8.13我的订单列表页代码清单374

8.13.1wxml模板代码375

8.13.2wxss样式代码376

8.13.3js逻辑代码379

8.13.4json配置代码387

8.14搜索页代码清单387

8.14.1wxml模板代码388

8.14.2wxss样式代码389

8.14.3js逻辑代码391

8.14.4json配置代码394

第9章小程序商城后端程序开发395

9.1小程序商城后端接口开发概述395

9.2小程序后端接口开发395

9.2.1接口公共父类代码清单395

9.2.2登录接口代码清单399

9.2.3首页接口代码清单405

9.2.4商品分类接口代码清单407

9.2.5商品接口代码清单409

9.2.6购物车接口代码清单417

9.2.7订单接口代码清单425

9.2.8下单结算接口代码清单434

9.2.9微信支付接口代码清单449

9.2.10地址接口代码清单454

9.2.11优惠券接口代码清单460

9.2.12用户接口代码清单463

9.3项目小结474

参考文献475

本书分三篇，系统地介绍了小程序开发基础、核心框架和商城项目实战。第一篇为基础篇，包括小程序入门和小程序框架等基础知识；第二篇为高级篇，包括小程序框架组件、小程序框架API和小程序服务端开发思路等相关知识；第三篇为实战篇，包括小程序商城需求分析和数据库设计、小程序商城前端程序开发和小程序商城后端程序开发等商城项目实战开发内容。本书由浅入深、循序渐进地讲解技术知识，借助丰富的图表示例以及详实的代码说明，带领读者从0到1全面认知微信小程序实战项目开发，读者只需扎实理解和具体实践，即可快速开发出微信小程序商城这个具商业价值的应用。

本书适合对微信小程序开发感兴趣的读者自学，同时可供小程序开发人员、前端开发者、培训机构和企业内训使用。

在当今移动互联网大潮中，微信应用凭借其庞大的用户基数和极强的用户黏性牢牢地占据着移动App应用的头把交椅之位，据相关统计，微信月活跃用户已达10亿之多，且占据着中国用户30%以上的应用时间，微信已经是当之无愧的超级App。随之诞生的微信小程序商城，背靠微信这棵大树，将成为下一个备受瞩目的焦点，本书将带你一站式开发微信小程序商城，打造自己的商城。