本文主要围绕商城首页 index.js 和 index.wxml 进行讲解，更多项目配置文件代码细节可参见 index.js 配置 和 前端页面 index.wxml。
操作步骤
商城首页效果图如下：
步骤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：配置商品加载完成提示
- 设置一个 bool 变量，初始值为 true，在数据加载函数中，判断从数据库中获取的数据，是否少于限制获取的数据数量。如果少于，则表明数据库中的数据已加载完成，将 bool 变量的值改为 false；反之则没有加载完成。
- 然后在上拉事件处理函数中，在开始位置设置一个监听，当检测到 bool 变量为 false 时，调用 wx.showToast() 提示没有更多数据可加载，直接 return 上拉加载函数。说明
由于 wx.showToast() 的调用可用在很多地方，所以进行封装，在需要的页面处import 就可以直接调用。
步骤5：设置下拉事件刷新页面
- 使用 onPullDownRefresh() 事件处理函数，将所有数值都重新设置成初始值，并重新调用最新数据加载函数。在数据加载函数中，设置手动关闭下拉刷新调用 wx.stopPullDownRefresh()。
//下拉刷新
onPullDownRefresh(){
this.setData({
goods : [],
_page :0,
hasmore :true
})
this.loadListData()
console.log('下拉刷新')
}, - 在此之前还需要将 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 + '',//转换成字符串
})
}