开发指南

API 文档

步骤2:搭建商城首页

最近更新时间:2022-03-04 15:27:14

本文主要围绕商城首页 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:配置商品加载完成提示

  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 + '',//转换成字符串
})
}
目录