小程序 · 云开发实战：从 0 到 1 快速开发电商小程序

电商应用，是所有应用开发里最常见但也最复杂的场景之一。本次课程，将进行基于小程序·云开发和 Taro 框架的【电商小程序开发】实战，从首页、商详、购物车、交易流程等电商模块，手把手教你搭建完整的电商小程序。

本次 Chat 主要内容：

1. 云开发的特点及优势
2. Taro 框架特点的介绍
3. 电商小程序的搭建思路
4. 电商模块的搭建步骤

电商应用，是所有应用开发里最常见但也最复杂的场景之一。本次课程，将进行基于小程序·云开发和 Taro 框架的【电商小程序开发】实战，从首页、商详、购物车、交易流程等电商模块，手把手教你搭建完整的电商小程序。

基础知识点 微信小程序的介绍

微信小程序是一种不需要安装即可使用的应用，它的优势有很多。比如：

• 速度快，无需下载安装，随时可用。
• 无适配，一次开发，免除对各种手机机型的适配。
• 可分享，支持图文分享、支持分享给微信好友和群聊。
• 体验好，可以达到和原生 App 相同的操作体验和流畅度。
• 易获取，支持扫码、微信搜索、好友推荐等发起场景。
• 低门槛，已有公众号的组织可以快速支持、可快速生成门店小程序。

小程序·云开发的介绍

小程序·云开发为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念， 无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。

小程序·云开发主要有几大部分组成，分别是云控制台、数据库、云函数、存储、云调用，以及分别在小程序端和云端使用的 SDK 。

Taro 框架的介绍

Taro 是一套遵循 React 语法规范的多端开发解决方案。现如今市面上端的形态多种多样， Web、React-Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有 所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就 能够适配到多端的能力就显得极为需要。使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端运行的代码。

与传统的电商后端开发相比，小程序·云开发有以下区别

使用小程序•云开发，我们可以省略后端部署、运维等步骤，可以快速地构建所需要的后端应用。同时，云函数的开发都是非常简单的，官方提供的 API 可以让我们便捷地进行操作。它可以很快速上手。只需掌握 JavaScript 和一些异步处理相关的知识，对前端同学比较友好。小程序·云开发是小程序官方推出的一种解决方案，不用担心是否会继续维护、升级迭代等的问题。

开发思路

要进行 Taro 的项目开发，需要先安装 taro-cli。这里默认你已经装好了 taro-cli 并能运行命令。

1、 我们用 cli 新建一个项目, 选择云开发模板，随后会得到这样的项目模板：​​

2、 根据梳理清楚的整体流程添加页面代码，大致的流程如图所示：​​3、 相应的后台服务因为有小程序·云开发的支持，免去了开启服务器和部署的步骤，所以我们所搭建的后台服务最主要为了实现两个部分的内容：

数据库建立

最简单的电商应用需涵盖以下数据：

• Information 首页的资讯数据集，大概含有商店图片，商店介绍，商品介绍等，主要作导购作用，点击后引导至相关页面。
• Shop - 商店页的数据集，以商店为单位，一个商店页面里主要是各种楼层数据。
• Commodity - 商品的数据集，即该商品所需要的各种信息。
• Cart - 购物车的数据集，以用户为单位存放购物车数据。
• Order - 订单的数据集，以用户为单位存放订单数据。
• User - 用户信息的数据集，存放用户信息数据。

前后端的数据交互

使用云函数，把数据库的操作放到云端，即将一个函数放在 Node.js（即服务端）环境下运行；然后在小程序端调用云函数，达到类似调用接口的效果。

实战演练 进行整个小程序的配置

在 src 的 app.js 中设置好相关信息,并初始化云函数。

搭建首页

首页大致分为顶部的搜索的组件，以及店铺和商品展示的楼层组件。搜索的组件，应该是一个公用的模块，它会在搜索页，分类页之类的地方出现，可以把这它抽离出来，进行复用。

搭建商详页面

从首页进商详的店铺入口的逻辑只是简单的根据 id 拉取数据并返回，因为整体也并没有过多与用户发生交互的部分，也没有需要后端逻辑处理的部分。不过，商详页面除了商品的展示信息外，还有一些交互动作。 例如下单前商品属性选择、件数、库存等等，这里我们是做了一个简易的 Popup 组件交互。

搭建购物车页面

购物车页相较于首页和商详页，其逻辑必定是复杂了很多，下面结合页面结构来分析一下。​​

上面的图是购物车的截图。可以看到在购物车里，小程序·云开发端需要处理的逻辑有商品的选择与反选、商品删除、商品数量的更改、商品型号的更改等等。因此，我们把购物车操作分类，得到如 下一个 map：​​然后，在用户执行相应的操作时，我们便会执行到对应的操作函数：​​然后返回处理后、最新的 newCartInfo （新的购物车里的商品）。具体的操作函数的逻辑我们便不再阐述了，主要就是对数组进行遍历然后根据相关操作处理数据，更新完数据库后，便会 返回给前端最新的购物车数据。如果后续有新的购物车操作需要迭代，或者处理逻辑需要变更，我 们也只需要改变小程序·云开发端执行函数 这一部分里面的内容即可。

搭建订单页面

订单页这块主要处理的是生成订单的逻辑。每个用户的购物车中，已勾选的商品数据都是存放在数据库中的，所以当用户点击了去结算按钮，触发了结算请求时，后端会直接从用户数据库中的购物车数据，生成一份订单。详细的流程如下：

小结

受篇幅影响，一些细节并没有在文章提及。关于项目的具体实操，我将在 7 月 18 日（下周四）20：00 进行直播演练，欢迎大家进微信群观看，并参与交流。

本文作者

钟鑫，来自京东凹凸实验室，是 Taro 框架核心开发成员，主要负责 Taro 框架多端组件及 API 相关，还有京东购物小程序首页和搜索的相关研发。

阅读全文: http://gitbook.cn/gitchat/activity/5d22eaf9ea3dd92f593016f8

您还可以下载 CSDN 旗下精品原创内容社区 GitChat App ，阅读更多 GitChat 专享技术内容哦。