WeGeek直播课：从0到1快速开发电商小程序（文字版）-白红宇

作者：钟鑫

源码示例

简介

hi, 大家好。我是来自京东凹凸实验室的钟鑫，Taro 框架核心开发成员。目前我主要负责 Taro 框架多端组件及 API 相关。还有京东购物小程序首页和搜索的相关研发。电商类的应用，在在所有应用中比较常见，也是比较复杂的场景之一。那本次课程，基于 Taro 框架和云开发，来次电商小程序的实战，教你搭建的电商小程序。

背景

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

速度快，无需下载安装，随时可用

无适配，一次开发，免除对各种手机机型的适配。

可分享，支持图文分享、支持分享给微信好友和群聊。

体验好，可以达到和原生 App 相同的操作体验和流畅度。

易获取，支持扫码、微信搜索、好友推荐等发起场景。

低门槛，已有公众号的组织可以快速支持、可快速生成门店小程序。

本次课程，我们使用 Taro 框架开发小程序。那 Taro 是什么？来看看官方文档描述

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

Taro 有一套完善的开发流程，在开发的时候也有很好的代码智能提示，实时的代码检查，开发效率大幅提升。使用 Taro 可以快速的发开小程序，将来如有其他端的需求，我们也只要维护一份代码就好了~

其次，本次课程选用的是小程序·云开发作为我们的后台服务。那小程序·云开发是什么呢？先来看看官方文档的描述

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

其实翻译过来就是，一个在小程序中使用的，不用购买服务器，不用运维的简易后端体系，主要是为了突出快和简便。所以小程序·云开发，就非常适合那些对数据本身弱依赖的，中小型的功能性小程序使用。

小程序·云开发主要有几大部分组成，分别是云控制台、数据库、云函数、存储、云调用。以及分别在小程序端，和云端使用的 SDK。关于这几部分的具体内容，可以在官方文档中查看。

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

	传统电商后端开发	小程序·云开发
后端代码	自主编写、开发接口	开发接口，云函数部署
服务器	自主购买、部署	官方提供，部署
数据监控	自主搭建	官方提供，控制台查看
调用日志	自主搭建	官方提供，控制台查看
费用	服务器购买成本	免费配额，可申请上调

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

项目实战

说了这么多，是不是有点迫不及待的想体验一下了？那接下来，开始搭建我们的小程序。

要进行 Taro 的项目开发，首先自然要安装 taro-cli，具体的安装方法可参照，这里不做过多介绍了，默认你已经装好了 taro-cli 并能运行命令。然后我们用 cli 新建一个项目, 选择云开发模板。

然后我们会得到这样的项目模板

├── client│   ├── config│   │   ├── dev.js│   │   ├── index.js│   │   └── prod.js│   ├── index.html│   ├── package.json│   └── src│       ├── app.js│       ├── app.scss│       ├── components│       │   └── login│       │       └── index.weapp.js│       └── pages│           └── index│               ├── index.js│               └── index.scss├── cloud│   └── functions│       └── login│           ├── index.js│           └── package.json└── project.config.json复制代码

可以看到目录里主要分了两大块 client和 cloud：

client 里和我们平常小程序的开发目录，存放的都是小程序里业务代码。

cloud 里则是放云函数相关的代码，并且是以模板进行分割，每个模块一个云函数。

pages里面是各个页面的入口文件，简单的页面就直接一个入口文件可以了，倘若页面比较复杂那么入口文件就会作为组件的聚合文件

组件都放在components里面。里面的目录是这样的，假如有个 search 搜索页面，在 pages 自然先有个 search，作为页面入口，然后它的组件就会存放在 components/search 里面，就是components里面也会按照页面分模块，公共的组件可以建一个 components/* 文件夹，进行复用。这样的好处是页面之间互相独立，互不影响。

接下来我们开始添加页面代码。

首先我们在搭建小程序的时候，需要把整体的流程给梳理清楚。大致的流程如图所示：

当然，实际的业务会有更加复杂的流程，这里我们不细谈。接下来我们分别来看看相应的后台服务如何去搭建。

我们知道一个最简单的后端程序就是，开启一个 HTTP服务，连接上数据库，然后根据收到的请求进行相关操作，例如数据库的增删查改，返回 HTML，返回接口数据之类，如果要满足外网访问还要部署上线等等。

而用上了小程序·云开发之后，因为云函数这个概念，我们免去了开启服务器和部署的步骤。同时，小程序是天然前后端分离的，也不需要返回HTML。所以在这种情况下，我们所搭建的后台服务最主要为了实现两个部分的内容，分别是数据库的建立和前后端的数据交互。

数据库建立

数据库建立，指的是数据集合及一些初始数据的创建。在本次搭建的示例中，主要含有一下数据集合：

Information 首页的资讯数据集。主要是以一个资讯为单位的数据集合，一个资讯可能含有商店图片，商店介绍，商品介绍等，主要作导购作用，点击后引导至相关页面。

Shop - 商店页的数据集。以商店为单位，一个商店页面里主要是各种楼层数据。

Commodity - 商品的数据集。显然，一个商品数据自然就是该商品所需要的各种信息。

Cart - 购物车的数据集。以用户为单位存放购物车数据。

Order - 订单的数据集。以用户为单位存放订单数据。

User - 用户信息的数据集。存放用户信息数据。

以上基本就涵盖了一个最简单的电商所需要的各种数据，可以构成一个完整的购物流程。同时如下图，还可以设置数据集权限。例如将 Information、 Shop、Commodity设置为所有用户可读、仅管理员可写；将 Cart、 Order、 User改成仅创建者及管理员可读写。通过权限限制，增强了数据集的可靠性。

数据交互

数据集建立起来后，再往里面填充一些假数据，基本的数据就有了，那么在小程序中如何进行数据交互？

如果不是用小程序·云开发，自然是通过request拉取接口数据，进行展示。而在使用了小程序·云开发的情况下，通过官方提供的 sdk，主要有两种办法进行数据拉取：

1.直接在小程序端操作数据库，获取所需数据，并进行增删查改等操作。
2.使用云函数，把数据库的操作放到云端；然后在小程序端调用云函数，达到类似调用接口的效果。

第一种方法其实比较适合一些简单的、对数据要求不高、量也不大的小程序。不然在小程序的代码中混合着数据库操作，实践起来不太优雅，也不利于维护。

这里我们使用第二种方法。所谓云函数，就是将一个函数放在 Node.js（即服务端）环境下运行。因此，我们可以将数据库的操作放到云函数中执行，然后在小程序中调用云函数，达到一种类似调用接口的效果。

码起来

有了大致的思路之后，我们就开始动手写码了~ 先来配置整个小程序的配置。在 src 的 app.js 中设置好相关信息,并初始化云函数

class App extends Component {  config = {    pages: [      'pages/index/index'    ],    window: {      backgroundTextStyle: 'light',      navigationBarBackgroundColor: '#ffffff',      navigationBarTitleText: 'Taro商城',      navigationBarTextStyle: 'black'    },    tabBar: {      color: '#7b7b7a',      selectedColor: '#c0a369',      backgroundColor: '#222222',      list: [        {        pagePath: 'pages/index/index',        text: '首页',        iconPath: 'asset/home.png',        selectedIconPath: 'asset/home_active.png'      },{        pagePath: 'pages/cart/cart',        text: '购物车',        iconPath: 'asset/shoppingbag.png',        selectedIconPath: 'asset/shoppingbag_active.png'      }, {        pagePath: 'pages/user/order/list/list',        text: '订单',        iconPath: 'asset/mine.png',        selectedIconPath: 'asset/mine_active.png'      }]    },    cloud: true,    networkTimeout: {      request: 6000,      connectSocket: 10000,      uploadFile: 10000,      downloadFile: 10000    }  }  constructor () {    super(...arguments)  }  componentDidMount () {    Taro.cloud.init({      env: 'eshop-env-wuivn', // 获取环境ID：前往 云开发控制台-设置-环境ID      traceUser: true // 是否要捕捉每个用户的访问记录。设置为true，用户可在管理端看到用户访问记录    })  }}复制代码

首页部分

如题所示，首页大致分为顶部的搜索的组件，以及店铺和商品展示的楼层组件。那很明显可以看出，搜索的组件，应该是一个公用的模块，它会在搜索页，分类页之类的地方出现。那可以把这块组件抽离出来，进行复用。这里因为时间关系，就不详细展开。然后下方的楼层组件，也是一些样式布局。因为时间关系，这里我们就用图片代替。

index.js


     
         
       
      
     
          { floorList.map((floor, index) => {        return (            
                  
                     
                  )          })}        
     
    复制代码

商详部分

从首页进商详的店铺入口，那这里的也是店铺内的搜索加上展示楼层，样式布局也不多说，撸起来。到这里你可以看到，这两个页面的逻辑只是简单的根据 id 拉取数据并返回，因为整体也并没有过多与用户发生交互的部分，也没有需要后端逻辑处理的部分，总的来说还是比较简单的，在这里便不作过多介绍。

从店铺进到商品详情页，这里在加入购物车时，需要选择商品的一些具体规格，默认地址等等。那这里我们就简单的只选择下单的商品的一些详情。这里增加了下浮层交互，其他的还是一些拉取数据展示，也不多细讲，还有很多细节部分你们可以额外时间去研究下。

购物车部分

购物车页相较于首页和商详页，其逻辑必定是复杂了很多，下面结合页面结构来分析一下。上面的图是购物车的截图。可以看到在购物车里，小程序·云开发端需要处理的逻辑有商品的选择与反选、商品删除、商品数量的更改、商品型号的更改等等。因此，我们把购物车操作分类，得到如下一个 map：

const typeMap = {    ADD: '2',   // 加车    CHANGE_NUM: '3', // 改变数据    DEL: '4', // 删除商品    CHECK: '5', // 选中商品    INVERT_CHECK: '6', // 反选商品    ...}复制代码

然后，在用户执行相应的操作时，我们便会执行到对应的操作函数：

switch (type) {     case typeMap['CHANGE_NUM']: newCartInfo = changCartNum(oldCartInfo, skus)     break     case typeMap['ADD']: newCartInfo = changCartNum(oldCartInfo, skus)     ... }复制代码

数组）。然后返回处理后、最新的 newCartInfo （新的购物车里的商品）。具体的操作函数的逻辑我们便不再阐述了，主要就是对数组进行遍历然后根据相关操作处理数据，更新完数据库后，便会返回给前端最新的购物车数据。如果后续有新的购物车操作需要迭代，或者处理逻辑需要变更，我们也只需要改变小程序·云开发端执行函数这一部分里面的内容即可。

订单部分

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

下面我们来看具体代码:

let cartData = await cartColl.doc(_id).get()  cartData = cartData.data  // 获取购物车中被选中的数据  const payInfo = cartData.cartInfo.filter((item) => {    return item.isCheck  })  // 使用新的商品map  const oldShopMap = cartData.shopMap[0]  const newShop = {}  payInfo.forEach(item => {    newShop[item.venderId] = oldShopMap[item.venderId]  })  if (payInfo.length === 0) {    return {      code: -1,      msg: '购物车中没有勾选物品'    }  }  const orderId = Math.random().toString(36).substr(2)  const orderData = {    _id: orderId,    dateSubmit: db.serverDate(),    orderId,    orderState: 1,    ownerId: _id,    payType,    shopInfo: newShop,    shouldPayPrice: cartData.totalPrice + freightPrice,    skuInfoList: payInfo,    cancelReasonText: '提交申请'  }  // 新插入订单  await orderColl.add({
   data: orderData}).catch(err => console.log(err))  // 购物车中除移生成了订单的商品  let newCartNum = 0  let newCartShopMap = {}  const newCartInfo = cartData.cartInfo.filter((item) => {    if (!item.isCheck) {      newCartShopMap[item.venderId] = oldShopMap[item.venderId]      newCartNum += item.num      return true    }    return false  })  await cartColl.doc(_id).update({
   data: {    cartInfo: newCartInfo,    cartNum: newCartNum,    shopMap: [newCartShopMap],    totalPrice: 0  }})  return {    code: 0,    msg: '成功生成订单',    data: orderData  }复制代码

从代码中可以看到，先是遍历当前购物车中的商品，然后把已经勾选的商品存放到 payInfo中。接着根据 payInfo 生成订单数据，同时除移购物车中已被结算的商品，并更新购物车数据库。

整体来说，并没有太复杂的操作，不过需要注意的是，因为存在很多异步的操作，所以会有使用很多 async/await 命令来进行同步书写。

除了生成订单之外，还有取消订单、删除订单等操作。相较于生成订单，这些就只是读取订单、更改状态而已，便不赘叙。

总结

到这里，今天的课程差不多也结束了。今天先谈了 Taro 为什么选择使用React语法，然后再从Taro项目的代码组织，小程序•云开发，项目的整体搭建思路，以及一些实现细节。一个完整的电商小程序就算完成了，不过还有很多细节还可以完善。比如，用户的授权登录，数据状态管理器等等，这就算一些课外作业吧~ 最后，感谢大家参与本次课程，谢谢。