实战丨云开发商城小程序（附源码）

腾讯云开发TCB

修改于 2022-03-16 17:20:55

5.6K0

修改于 2022-03-16 17:20:55

文章被收录于专栏：云开发云开发

* 本文包含较多代码片段，PC端浏览推荐前往：https://cloud.tencent.com/document/product/876/70253

本文以一个商城小程序开发项目为例，介绍了在微信小程序开发的项目过程中的准备工作，小程序的创建过程、目录中各个文件的功能，以及在开发过程中要使用的云开发功能，如云存储、云数据库和云函数。

准备工作

前往微信开发者工具中开通云开发。

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/quick-start/miniprogram.html

操作流程

具体操作流程可分为以下4步。

1环境配置
2搭建商城首页
3搭建详情页
4搭建购物车

项目目录

文件	说明
配置文件 .json	项目配置文件 app.json：用于配置各个页面的路径，设置窗口和底部的导航栏。页面的配置文件如 index.json：用于实现所属页面的个性化设置。
模板文件 .wxml	常用的是页面模板文件如 index.wxml，类似于 HTML，使用的是标签语言，用于设计界面的各个组件、事件系统，进而构建出页面的结构。
样式文件 .wxss	项目样式文件 app.wxss：用于配置全局的样式。页面样式文件如 index.wxss：用于配置页面的个性化样式，在所在页面中可以覆盖掉全局样式。
逻辑文件 .js	逻辑文件是用来实现页面的业务逻辑功能的，例如数据的获取、判定，页面提示等功能，都是由逻辑文件中编写方法来实现的。

一、环境配置

主要围绕项目配置文件 app.json 和 app.js 进行讲解，更多项目配置文件代码细节可参见 app.json 配置和 app.js 配置。

步骤1：创建项目所需页面

首先进行需求分析：

一个商城至少需要一个首页用来给用户展示商城有的商品。
一个商品详情页用来介绍单个商品的信息。
一个购物车用来给用户存放自己想要的商品。

所以我们需要在小程序项目配置文件 app.json 中编写 pages 中的内容，输入相应的路径后，开发者工具就会生成对应路径上的页面文件。

"pages":[  "pages/index/index",  "pages/cart/cart",  "pages/detail/detail"],

步骤2：配置商城的导航栏

生成步骤1 页面后，需要将页面添加到导航栏中，方便用户使用。在 app.json 里，添加一个 tabBar 属性，因为商城的两大块分为首页和购物车。所以在 tarBar 里的 list 属性添加两个按钮，并将它们的页面地址、标题、图标配置好。

"tabBar": {  "selectedColor": "#f00",  "list": [    {    "pagePath":  "pages/index/index",    "text": "首页",    "iconPath": "./汤圆酱/1.jpeg",    "selectedIconPath": "./汤圆酱/3.jpeg"  },  {    "pagePath": "pages/cart/cart",    "text": "购物车",    "iconPath": "./汤圆酱/2.jpeg",    "selectedIconPath": "./汤圆酱/4.jpeg"  }]}

效果图如下：

步骤3：配置云开发环境

1、进入微信开发者工具 > 云开发控制台页面，复制环境 ID。

2、在 app.js 里面调用 API，wx.cloud.init 传入云开发控制台中的云环境 ID，方便项目调用控制台中的数据和资源。

// app.jsApp({  onLaunch: function () {    wx.cloud.init({      env:'xxxxx' //输入您的环境 ID    })  },  globalData: {    userInfo: null  }})

步骤4：创建数据库

将商城的商品使用数据库来存储，方便后面页面使用数据库进行商品的展示。

1、进入微信开发者工具 > 云开发控制台 > 数据库页面。创建 carts、goods 和 orders 三个集合。

2、进入 goods 集合，单击添加记录添加一些初始信息，每个数据记录的属性如下：

说明：商品图片要在云存储中先导入才能生成图片的位置，便于开发时图片数据的调用。

步骤5：云存储导入图片

1、进入微信开发者工具 > 云开发控制台 > 存储页面。

2、单击新建文件夹并命名为 goods。

3、进入 goods 文件夹，单击上传文件并传入所需要的图片，这些文件可以使用 FileID 在项目中进行调用。

步骤6：创建云函数

1、在目录中创建云函数的文件夹 cloudfunction，然后在 project.config.json 中设置云函数的 cloudfunctionRoot 属性值为“cloudfunction/”。

2、当文件夹 cloudfunction 目录下的文件变成绿色，就代表云函数的初始化完成。可右击文件夹单击新建 Node.js 云函数，即可创建一个云函数。创建结果如下图：

二、搭建商城首页

操作步骤

商城首页效果图如下：

步骤1：访问云端数据库

在商城页面的 index.js 中，调用 wx.cloud.database().collection() 获取当前云开发环境商品数据库的引用。

//获取数据库const db = wx.cloud.database()//获取集合const goods_col = db.collection('goods')const carts_col = db.collection('carts')

说明：

在访问数据库数据时经常报错，或者在控制台更改数据一直报错的情况，一般为云端数据库的权限问题，通过自定义规则权限把数据库的所有权限全部设置成true，即可解决该类报错。

步骤2：加载商品列表数据

在首页页面的 index.js 中编写加载商品数据列表的逻辑，设置隐藏加载的动画以及列表一次展示的商品，访问 good_col 来读取商品的数据。

//加载列表数据async loadListData(){  const LIMIT = 5  let{_page,goods}=this.data//0   /*wx.showLoading({//加载    title: 'Loading...',  })*/  await ml_showLoading   let res = await goods_col.limit(LIMIT).skip(_page * LIMIT).get()   //wx.hideLoading()//隐藏加载  await ml_hideLoading  //手动停止下拉刷新  wx.stopPullDownRefresh()
  console.log('列表数据',res.data)  this.setData({    goods :[...goods,...res.data],//追加，与之前数据拼接    _page: ++_page,    hasmore : res.data.length === LIMIT  })},

代码说明

res：存放查询商品数据库的返回值的变量。
limit()：限制一次性显示的商品的数量。
LIMIT：初始值数值为5。
_page：初始为0，后面会迭代加一。
_page*LIMIT：指示从数据库中跳过几个元素开始获取数据。
setData()：把每次取出来的商品数据进行拼接。

步骤3：设置上拉事件商品加载数据

先限制数据加载函数中一次获取数据的数量，可定义为一次从云端访问五条商品信息；每次加载新数据时，可调用 wx.showLoading() 进行一个加载提示，当加载完成后为了提高用户的使用体验，添加一个 onReachBottom() 事件处理函数，在里面调用商品数据加载函数。

onReachBottom(){  //没有跟多数据可以刷新  if(!this.data.hasmore)  {    /*wx.showToast({      title: '没有更多数据了',      icon : "none"    })*/    ml_showToast('没有更多数据了')    return console.log('没有数据了')  }  console.log('上拉刷新')  this.loadListData()},

说明：

数据加载函数中由于一次加载只有五条信息，所以需要在数据加载函数的末尾，将之前加载的数据与本次函数调用加载的数据，用 setData 进行一个拼接，保障用户在下滑时还可以看到前面的商品数据。

步骤4：配置商品加载完成提示

1、设置一个 bool 变量，初始值为 true，在数据加载函数中，判断从数据库中获取的数据，是否少于限制获取的数据数量。如果少于，则表明数据库中的数据已加载完成，将 bool 变量的值改为 false；反之则没有加载完成。

2、然后在上拉事件处理函数中，在开始位置设置一个监听，当检测到 bool 变量为 false 时，调用 wx.showToast() 提示没有更多数据可加载，直接 return 上拉加载函数。

说明：

由于 wx.showToast() 的调用可用在很多地方，所以进行封装，在需要的页面处import 就可以直接调用。

步骤5：设置下拉事件刷新页面

1、使用 onPullDownRefresh() 事件处理函数，将所有数值都重新设置成初始值，并重新调用最新数据加载函数。在数据加载函数中，设置手动关闭下拉刷新调用 wx.stopPullDownRefresh()。

//下拉刷新onPullDownRefresh(){  this.setData({    goods : [],    _page :0,    hasmore :true  })  this.loadListData()  console.log('下拉刷新')},

2、在此之前还需要将 index.json 里设置配置，将"enablePullDownRefresh"改成默认为 true；再设置刷新加载的背景白点（默认）改为灰色。

{  "usingComponents": {},  "enablePullDownRefresh" : true,  "backgroundTextStyle" : "dark"}

步骤6：注册下单点击事件

在商城首页的下单按钮使用 catchtap 属性，设置加入购物车的功能函数。

注意：

其中不能使用 bindtap 属性，因为使用 bindtap 会在点击时冒泡进入商品详情页；catchtap 则不会跳转，而是直接触发将商品加入购物车的功能函数，再将首页点击下单的商品数据传入购物车页面。

加入购物车功能的实现，还需判断要下单的商品在购物车中是否已经存在。使用从首页下单传入的 ID 在购物车数据库中进行数据获取：

获取成功则表示该商品已经加入购物车，调用 update() 让 num 累加一，调用封装的 wx.showToast() 提示商品已添加过。
获取失败则表示该商品还未加入购物车，需将该商品数据加入到购物车数据库中，调用 add() 添加购物车数据库的商品数据。数据属性包括：
- _id：商品 ID
- imageSrc：商品图片
- price：商品价格
- title：商品名称

添加成功调用之前封装的 wx.showToast() 提示添加成功。代码实现如下：

//加入购物车async addCart(e){  //拿到商品  let { item }=e.currentTarget.dataset  console.log('item' ,item)  //判断商品在不在购物车里面  try{    let res =await carts_col.doc(item._id).get()    console.log('有数值',res)    //有值    await carts_col.doc(item._id).update({      data:{        num :db.command.inc(1)      }    })  }  catch(err){    console.log('没有值')    //把该商品加到购物车里面    await carts_col.add({      data :{        _id :item._id,        imageSrc : item.imageSrc,        price : item.price,        title : item.title,        num :1      }    })  } this.setTabBar()  await ml_showSuccess('下单成功')},

步骤7：修改导航栏右上角的数值

在首页下单调用 wx.setTabBarBadge() 方法，index 属性指定购物车页面，text 指定数值（字符串类型），获取购物车数据库中的数据，调用 forEach() 函数将购物车数据库里面的商品的 num 值相加，如果 num 累加的结果为0，则直接返回 return 函数，不为零则将结果给 text 赋值（强制转换为字符串类型）。调用点击触发事件函数 onTabItemTap()，当点击购物车时，调用 wx.setTabBarBadge() 方法，给 text 赋值为空字符，达到隐藏右上角数值的效果。

//修改tebbar右上角数值async setTabBar(){  let total=0  let res=await carts_col.get()   res.data.forEach(v => {    total += v.num  })  if(total === 0) return  //console.log('123333333333')  wx.setTabBarBadge({    index: 1,    text: total + '',//转换成字符串  })}

三、搭建详情页

操作步骤

步骤1：设置跳转

在 index.wxml 处使用 navigator 导航组件跳转到商品详情页。

<navigator hover-class='hcls' class='goods' url="/pages/detail/detail?id={{item._id}}">

步骤2：获取点击商品信息

根据跳转详情页传入的商品 ID，在商品数据库中获取商品的详细信息，同样是调用 wx.cloud.database().collection()，再调用 doc() 通过传入 ID 过滤商品。

const db = wx.cloud.database()const goods_col = db.collection('goods')Page({  data : {    detail : {}  },  onLoad(options){    let { id } =options    console.log('id',id)    this.loadDetailData(id)  },  //加载数据详情  async loadDetailData(id){    //拿到数据库商品    let ins = goods_col.doc(id)    //累计    await ins.update({      data: {        count : db.command.inc(1)        //log('123')      }    })    //获取    let res =await ins.get()    //赋值    this.setData({      detail : res.data    })  }})

步骤3：修改商品访问量

通过从首页传入的 ID 过滤出商品，然后调用 update 修改 count 的值，使其每次被访问时累加一。

//累计await ins.update({  data: {    count : db.command.inc(1)    //log('123')  }})

效果如下：

四、搭建购物车

操作步骤

步骤1：加载购物车列表

调用 wx.cloud.database().collection() 方法访问云端购物车数据库，将数据显示出来。

async loadCartsData(){  let res = await carts_col.get()  console.log('carts' , res)  this.setData({    carts : res.data  })  this.setCart(res.data)//统计总数},

步骤2：设置商品总价格和个数

将加载购物车数据库函数中，购物车的数据传入计算商品总价格与总个数的函数中，调用 forEach() 方法计算商品总价格与总个数。总价格是通过遍历购物车数据库中的元素，计算每一个商品的个数与其单价的乘积的总和得到的；总个数是通过遍历购物车数据库中每个商品的个数的总和来得到的。最后通过 setData() 来设置购物车页面中显示的总价格与总商品个数。

//统计总数setCart(carts){  let totalCount=0  let totalPrice=0   carts.forEach(v =>{    totalCount += v.num    totalPrice += v.num*v.price  })    this.setData({    totalCount,    totalPrice,  })},

步骤3：修改商品数量

通过点击购物车页面的加减号按钮，调用 bindtap 属性触发对应添加购物车商品与减少购物车商品的功能函数，传入被点击商品的 ID，在功能函数中通过 ID 过滤购物车数据库中的商品，再调用 update() 方法，对指定商品的 num 的值进行加减操作。

//加一async addCount(e){  //获取id  let id = e.currentTarget.dataset.id  //修改num数量  let res =await carts_col.doc(id).update({    data:{      num :db.command.inc(1)    }  })  this.loadCartsData()  await ml_showSuccess('添加成功')},//删除商品async deleteCount(e){  //获取商品id  let id = e.currentTarget.dataset.id  //修改num数量  let res =await carts_col.doc(id).update({    data:{      num :db.command.inc(-1)    }  })  console.log('res ----',res)  console.log('id-------',e.currentTarget.dataset.num)  await ml_showSuccess('删除成功')  let num=await carts_col.doc(id).num  console.log('num的值',num)  if( num === 0 )  {    console.log('商品数量为0')  }  this.loadCartsData()},

效果如图所示：