直播课预告：从0到1快速开发电商小程序（直播带货小程序软件开发） 返回列表
电商应用，是所有应用开发里最常见但也最复杂的场景之一。本次文章将进行基于小程序·云开发和Taro框架的【电商小程序开发】实战
，从首页、商详、购物车、交易流程等电商模块，手把手教你搭建完整的电商小程序，并于7月18日（下周四）进行直播教学。（参与方式在文末）
基础知识点
1 微信小程序的介绍
微信小程序是一种不需要安装即可使用的应用，它的优势有很多。比如：
速度快，无需下载安装，随时可用。
无适配，一次开发，免除对各种手机机型的适配。
可分享，支持图文分享、支持分享给微信好友和群聊。
体验好，可以达到和原生 App 相同的操作体验和流畅度。
易获取，支持扫码、微信搜索、好友推荐等发起场景。
低门槛，已有公众号的组织可以快速支持、可快速生成门店小程序。
2 小程序·云开发的介绍
小程序·云开发为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念， 无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。
小程序·云开发主要有几大部分组成，分别是云控制台、数据库、云函数、存储、云调用，以及分别在小程序端和云端使用的 SDK 。
3 Taro框架的介绍
Taro 是一套遵循 React 语法规范的多端开发解决方案。现如今市面上端的形态多种多样， Web、React-Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有 所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就 能够适配到多端的能力就显得极为需要。
使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端运行的代码。
4 与传统的电商后端开发相比，小程序·云开发有以下区别
传统电商后台开发
小程序 • 云开发
后端代码
自主编写、开发接口
开发接口，云函数提供
服务器
自主购买、部署
官方提供、部署
数据监控
自主搭建
官方提供，控制台查看
调用日志
自主搭建
官方提供，控制台查看
费用
服务器购买成本
免费配额，可申请上调
使用小程序•云开发，我们可以省略后端部署、运维等步骤，可以快速地构建所需要的后端应用。同时，云函数的开发都是非常简单的，官方提供的API可以让我们便捷地进行操作。它可以很快速上手。只需掌握 JavaScript 和一些异步处理相关的知识，对前端同学比较友好。小程序·云开发是小程序官方推出的一种解决方案，不用担心是否会继续维护、升级迭代等的问题。
开发思路
要进行Taro的项目开发，需要先安装 taro-cli。这里默认你已经装好了 taro-cli 并能运行命令。
1 我们用 cli 新建一个项目, 选择云开发模板，随后会得到这样的项目模板：
2 根据梳理清楚的整体流程添加页面代码，大致的流程如图所示：
3 相应的后台服务因为有小程序·云开发的支持，免去了开启服务器和部署的步骤，所以我们所搭建的后台服务最主要为了实现两个部分的内容：
数据库建立最简单的电商应用需涵盖以下数据：
Information 首页的资讯数据集，大概含有商店图片，商店介绍，商品介绍等，主要作导购作用，点击后引导至相关页面。
Shop - 商店页的数据集，以商店为单位，一个商店页面里主要是各种楼层数据。
Commodity - 商品的数据集，即该商品所需要的各种信息。
Cart - 购物车的数据集，以用户为单位存放购物车数据。
Order - 订单的数据集，以用户为单位存放订单数据。
User - 用户信息的数据集，存放用户信息数据。
前后端的数据交互使用云函数，把数据库的操作放到云端，即将一个函数放在 Node.js（即服务端）环境下运行；然后在小程序端调用云函数，达到类似调用接口的效果。
实战演练
1 进行整个小程序的配置。
在 src 的 app.js 中设置好相关信息,并初始化云函数
2 搭建首页。
大致分为顶部的搜索的组件，以及店铺和商品展示的楼层组件。搜索的组件，应该是一个公用的模块，它会在搜索页，分类页之类的地方出现，可以把这它抽离出来，进行复用。
3 搭建商详页面。
从首页进商详的店铺入口的逻辑只是简单的根据 id 拉取数据并返回，因为整体也并没有过多与用户发生交互的部分，也没有需要后端逻辑处理的部分。
不过，商详页面除了商品的展示信息外，还有一些交互动作。例如下单前商品属性选择、件数、库存等等，这里我们是做了一个简易的 Popup 组件交互。
4 搭建购物车页面
购物车页相较于首页和商详页，其逻辑必定是复杂了很多，下面结合页面结构来分析一下。
上面的图是购物车的截图。可以看到在购物车里，小程序·云开发端需要处理的逻辑有商品的选择与 反选、商品删除、商品数量的更改、商品型号的更改等等。因此，我们把购物车操作分类，得到如下一个 map：
然后，在用户执行相应的操作时，我们便会执行到对应的操作函数：
然后返回处理后、最新的 newCartInfo （新的购物车里的商品）。具体的操作函数的逻辑我们便不再阐述了，主要就是对数组进行遍历然后根据相关操作处理数据，更新完数据库后，便会 返回给前端最新的购物车数据。如果后续有新的购物车操作需要迭代，或者处理逻辑需要变更，我 们也只需要改变小程序·云开发端执行函数 这一部分里面的内容即可。
5 搭建订单页面
订单页这块主要处理的是生成订单的逻辑。每个用户的购物车中，已勾选的商品数据都是存放在数据库中的，所以当用户点击了去结算按钮，触发了结算请求时，后端会直接从用户数据库中的购物车数据，生成一份订单。详细的流程如下：
直播课教学
受篇幅影响，一些细节并没有在文章提及。关于项目的具体实操，我们将邀请来自京东凹凸实验室的钟鑫，作为腾讯云云开发授权讲师在7月18日（下周四）20:00-22:00进行直播教学，欢迎大家进微信群免费观看，并参与交流。
推荐阅读：
