一、实现思路
- 编写热门推荐的页面 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 })
三、效果展示
