1.作者：钟鑫

源码示例

2.Taro•云开发电商小程序示例

简介

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

背景

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

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

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

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

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

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

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

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

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

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

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

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

项目实战

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

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

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

├──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复制代码

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

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

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

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

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

22.接下来我们开始添加页面代码。首先我们在搭建小程序的时候，需要把整体的流程给梳理清楚。大致的流程如图所示：

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

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

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

数据库建立

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

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

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

数据交互

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

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

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

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

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

码起来

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

classAppextendsComponent{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：前往云开发控制台-设置-环境IDtraceUser:true//是否要捕捉每个用户的访问记录。设置为true，用户可在管理端看到用户访问记录})}}复制代码首页部分

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

35.index.js

ViewclassName={indexClassNames}ViewclassName='index-search_into'SearchIntoplaceholder='搜索框'type='index'//ViewScrollViewscrollYclassName='index_list'{floorList.map((floor,index)={return(Viewkey={index}className={floor.className}onClick={this.onGotoPage.bind(this,floor.venderId)}Imagemode='widthFix'className='index_item_img'src={floor.image}lazyLoad//View)})}/ScrollView/View复制代码商详部分

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

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

购物车部分

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

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

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

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

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

订单部分

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

42.下面我们来看具体代码:

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

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

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

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

总结

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

直播视频回放地址

47.WeGeek直播课：从0到1快速开发电商小程序-直播视频回放地址