项目实战-点餐小程序-16 首页-热门推荐

转载

mob604756ec5243 2021-08-03 16:25:00

一、实现思路

编写热门推荐的页面 home.wxml
美化热门推荐的显示 home.wxss
新建云函数getHotFood() 获取热门推荐菜品列表 home.js
调用云函数获取热门推荐菜品 home.js
将获取到的热门推荐菜品数据渲染到页面上 home.js + home.wxml
菜品名称字数过多的显示处理 home.wxss

二、代码实现

1.home.wxml

1 <!-- 热门推荐 -->
 2 <view class="hotcommentsRoot">
 3 <!-- 热门推荐标题 -->
 4 <view class="hotcommentsTitle">
 5   <text class="title">热门推荐</text>
 6   <text class="more" bindtap="toClassifiedFood">更多></text>
 7 </view>
 8 <!-- 热门推荐菜品列表 -->
 9 <view class="hoeFoodRoot">
10   <view class="hotFoodItem" wx:for="{{hotFoodList}}" bindtap="toClassifiedFood">
11     <image src="{{item.icon}}"></image>
12     <view class="hotFoodText">
13       <view class="itemName">{{item.name}}</view>
14       <view class="itemSell">销量：{{item.sell}}</view>
15       <view class="itemPrice">{{item.price}}</view>
16     </view>
17   </view>
18 </view>
19 </view>

2.home.wxss

1 /*热门推荐*/
 2 .hotcommentsTitle{
 3   color: #FF9966;
 4   margin: 20rpx;
 5   display: flex;
 6   justify-content: space-between;
 7   align-items: center;
 8 }
 9 .hotcommentsTitle .title{
10   font-size: 36rpx;
11 }
12 .hotcommentsTitle .more{
13   font-size: 30rpx;
14 }
15 /*热门推荐列表数据*/
16 .hotFoodItem{
17   display: flex;
18   margin: 20rpx;
19   border-bottom: 1rpx solid rgb(245, 245, 245);
20 }
21 .hotFoodItem image{
22   width: 120rpx;
23   height: 120rpx;
24   margin-right: 20rpx;
25   border-radius: 10rpx;
26   /*防止标题过长把图片挤走*/
27   min-width: 120rpx;
28 }
29 
30 .hotFoodItem .itemName{
31   font-size: 34rpx;
32   /*设置菜品名称超过一行时显示省略号*/
33   width: 500rpx;
34   white-space: nowrap;
35   text-overflow: ellipsis;
36   overflow: hidden;
37 }
38 .hotFoodItem .itemSell{
39   font-size: 30rpx;
40   color: gray;
41 }
42 
43 .hotFoodItem .itemPrice{
44   font-size: 32rpx;
45   color: #FF9966;
46 }
47 .hotFoodItem .itemPrice::before{
48   /*人民币符号*/
49   content: "¥";
50   color:#FF9966;
51 }

3.home.js

使用两种方法获取热门推荐菜品列表，推荐使用方法2（调用云函数）。

方法1：小程序端直接访问数据库

//定义db
  const db = wx.cloud.database()
Page({
    data:{
    //自定义数组，存放热门推荐菜品
    hotFoodList:[]
    },

    onLoad: function (options) {
    //获取热门推荐列表（调用自定义方法）
    this.getHotCommentsList();
      },
    
    //获取热门推荐菜品列表（自定义）
    getHotCommentsList(){
    db.collection("food") 
    .where({
      status:"上架"   //查询条件：状态为上架
    })
    .orderBy("sell","desc") //根据销量降序
    .limit(5) //取前5个
    .get()
    .then(res=>{
      console.log("获取热门推荐成功",res);
    }).catch(err=>{
      console.log("获取热门推荐失败",err);
    })
}
})

方法2：调用云函数

第一步：创建云函数，命名为getHotFood

1 // 云函数入口文件
 2 const cloud = require('wx-server-sdk')
 3 
 4 cloud.init({
 5   env: cloud.DYNAMIC_CURRENT_ENV
 6 })
 7 const db = cloud.database()
 8 // 云函数入口函数
 9 exports.main = async (event, context) => {
10   return await db.collection("food") 
11   .where({
12     status:"上架"   //查询条件：状态为上架
13   })
14   .orderBy("sell","desc") //根据销量降序
15   .limit(5) //取前5个
16   .get()
17 }

第二步：调用云函数

1 //定义db
 2   const db = wx.cloud.database()
 3 Page({
 4     data:{
 5     //自定义数组，存放热门推荐菜品
 6     hotFoodList:[]
 7     },
 8 
 9     onLoad: function (options) {
10     //获取热门推荐列表（调用自定义方法）
11     this.getHotCommentsList();
12       },
13     
14     //获取热门推荐菜品列表（自定义）
15     getHotCommentsList(){
16     //方法2：调用云函数
17         wx.cloud.callFunction({
18       name:"getHotFood"
19     }).then(res=>{
20         console.log("调用云函数获取热门推荐成功",res);
21         this.setData({
22           hotFoodList:res.result.data
23         })
24       }).catch(err=>{
25         console.log("调用云函数获取热门推荐失败",err);
26       })
27 }
28 })