阅读 838

WeGeek直播课:从0到1快速开发电商小程序(文字版)

作者:钟鑫

源码示例

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

简介

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 文档,这里不做过多介绍了,默认你已经装好了 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

<View className={indexClassNames}>
 <View className='index-search_into'>
    <SearchInto placeholder='搜索框' type='index' />
 </View>
 <ScrollView scrollY className='index_list'>
    { floorList.map((floor, index) => {
        return (
            <View key={index} className={floor.className} onClick=  {this.onGotoPage.bind(this, floor.venderId)}>
            <Image mode='widthFix' className='index_item_img' src={floor.image} lazyLoad />
              </View>
            )
          })}
        </ScrollView>
</View>
复制代码

商详部分

从首页进商详的店铺入口,那这里的也是店铺内的搜索加上展示楼层,样式布局也不多说,撸起来。 到这里你可以看到,这两个页面的逻辑只是简单的根据 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项目的代码组织,小程序•云开发,项目的整体搭建思路,以及一些实现细节。 一个完整的电商小程序就算完成了,不过还有很多细节还可以完善。比如,用户的授权登录,数据状态管理器等等,这就算一些课外作业吧~ 最后,感谢大家参与本次课程,谢谢。

直播视频回放地址

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

关注下面的标签,发现更多相似文章
评论