实战篇 1-多端电商平台完整项目概述及开发准备 #

多端电商平台项目概述及开发准备 #

学习了前面的基础知识和进阶后是否跃跃欲试？我们准备了一个电商平台的项目来和大家一起实践使用 Taro 开发电商平台。

项目概述 #

电商平台可以看到的部分大致分为三个方面：信息服务（商详、商品列表）、交易（下单、购物车）及支付（微信、支付宝）。电商品台应用非常广泛，大型的商家入驻平台如淘宝、天猫、京东，中型的自营电商、垂直电商为主如小米商城、华为商城、美的商城，小型如小红书。电商平台背后的商品管理系统、仓储系统、物流系统、统计系统等等，非常庞大。

电商平台希望可以多端触达用户，无论用户在什么终端什么场景，想下单随时可以下单。然而现实并不会如此完美，目前和用户产生关联的终端有：PC、移动端。移动端再细分，则有：APP、H5、小程序、快应用等。受限于开发成本现在大多电商平台依自己的规模和能力在各端上有所取舍，但主流都要有 PC、APP、小程序、H5 四个端。

如果可以写一份代码，实现多端统一，对于大多数小型公司或者个人开发者来说无疑是节约了人力和成本，目前 Taro 支持的转换有 H5、小程序（即将支持 RN、快应用），这相当于解决了主流的 APP（使用 RN ） 、小程序、H5 三端， 不同的端在构建电商平台的时候有不同的优势和劣势。

H5、小程序、RN 优劣势

电商平台实践项目 #

Taro 可以一次编写，同时满足以上三端的需求，本项目从某平台的代码里抽取出来，作为 Taro 的实践项目。因为电商平台非常庞大，本项目仅实现的功能有： 首页、列表页、商品详情页、购物车、结算页、订单列表页及其后台。

在后面的第 17 至 26 章，将按购物的标准流程所涉及到的页面为大家讲解开发过程中的实践。首页和活动页作为入口，属于分流的展示型页面，逻辑比较简单，后续文章不会介绍，我们直接从商品列表页开始讲解。

小程序云 #

小程序云是微信团队联合腾讯云团队推出的一套小程序开发解决方案。我们采用小程序云作为我们的后台，本项目开始前我们先介绍小程序云，而后介绍小程序云搭建电商后台服务。

商品列表页 #

商品列表页主要是罗列商品，提供筛选，方便找到想要的商品。一般情况下，大家都会选择搜索，搜索结果也是列表的形式，相当于提供了某些筛选条件的列表页。本项目的列表页和搜索页是同一个页面，列表页里默认为综合排序，可以选择按最新、具体价格或者价格区间排序，在这个页面你将学到在电商平台里商品列表页将如何做数据筛选以及如何实现一个无限加载的方法。

商品详情页 #

商品详情页主要展示一个商品消费者想了解的信息，同时引导用户下单。本项目的商品详情页对商品图片在 iPhone X 和非 iPhone X 做了优化，期以给消费者更好的体验，读者可以了解为什么如此处理。同样地也对商品信息做了简单的归类，在该页面读者还可以学习到如何尝试达到自己想要的在轮播里播放视频的效果。

购物车页面 #

购物车页主要操作是选择将要去结算的商品，购物车页面操作比较多，涉及到多处细节，本项目的购物车将介绍数据拉取与转换、购物车状态的切换、购物车的操作逻辑等。

结算页 #

结算页主要提交订单的信息，交互比较多，本项目涉及到地址的操作和发票、优惠券、支付信息等，比较复杂，该章节主要讲交互动画和数据流。

授权认证 #

授权认证的章节主要是介绍在微信获取用户信息的情况下的一种妥协方案。

小结 #

虽然只是挑了几个页面来阐述本电商示例，有兴趣的读者可以自行查看本项目的代码，看看具体的实现细节。总的来说实现并没有想象地那么复杂，关键还是需要去尝试和练习。

开发准备 #

开始本项目前还是需要一些开发知识和准备，主要有以下几个方面：

1、需要了解基本的 React 语法，可以看本小册的第 2 章。

2、需要了解微信小程序的开发入门：申请小程序账号，安装开发者工具，看本小册的第 3 章。

3、需要安装 Taro 和了解其使用方法，看本小册的第 4 章。

4、设置好微信开发者工具，看本小册第 5 章。

5、了解 Redux 的使用，看本小册第 7 章。

本小册的电商项目大致需要以上技能，如果你已经具备了，开启我们后面的章节吧。