跳到主要内容

商店小程序开发实践

概述#

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

说明

本实例教程所涉及到的相关源码材料,均已得到相应授权。

准备工作#

  1. 注册腾讯云
  2. 开通了云开发的小程序,详情请参见 微信小程序端快速入门

操作流程#

具体操作流程可分为以下 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. 进入微信开发者工具 > 云开发控制台 > 数据库页面。创建 cartsgoodsorders 三个集合。

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

    • count:商品数量。
    • imageSrc:商品图片,从云存储中获取。
    • price:商品价格。
    • tags:商品类别标签。
    • title:商品名称。
    说明

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

    步骤 5:云存储导入图片#

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

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

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

    步骤 6:创建云函数#

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

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

    搭建商城首页#

    本文主要围绕商城首页 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('下拉刷新')  },
    1. 在此之前还需要将 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 + '',//转换成字符串    })  }

    搭建详情页#

    本文主要围绕详情页 detail.js进行讲解,更多详情页代码细节可参见 detail.js 配置前端页面 detail.wxml

    步骤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')      }    })

    效果如下:

    搭建购物车#

    本文主要围绕购物车 cart.js 进行讲解,更多购物车代码细节可参见 cart.js 配置前端页面 cart.wxml

    步骤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()  },

    效果如图所示:

    至此,该小程序的全部功能已实现完成。更多详情请参见 示例代码