微信小程序项目实例——今日美食

微信小程序项目实例——今日美食

文章目录

• 微信小程序项目实例——今日美食
• 一、项目展示
• 二、首页
• 三、收藏

项目代码见文字底部，点赞关注有惊喜

---

一、项目展示

今日美食是为用户提供各种美食的制作方法，详细介绍了配料和制作流程

二、首页

首页采用垂直布局，由搜索栏、轮播图、宫格三大组件组成
点击搜索栏将跳转到搜索界面，同时展示历史搜索内容

核心代码如下：

<!--index.wxml--><view  class="container" >  <view class="section">   <navigator url="/pages/searchList/searchList" hover-class="navigator-hover">    <view class="search" >搜索从这里开始</view>    <image src="../img/search.png"/>    </navigator>  </view>  <!-- 轮播图片 -->  <view class="swiper-box">    <swiper indicator-dots="{{swiper.indicatorDots}}" indicator-color="{{swiper.indicatorColor}}" indicator-active-color="{{swiper.indicatorActiveColor}}"  autoplay="{{swiper.autoplay}}" interval="{{swiper.interval}}" duration="{{swiper.duration}}" circular="{{swiper.s}}">      <block wx:for="{{swiper.imgUrls}}">        <swiper-item>            <navigator  data-id="{{item.id}}" url="/pages/detailFood/detailFood?id={{item.id}}" hover-class="navigator-hover">                <image src="{{item.name}}" class="slide-image" mode="apsectFit"/>           </navigator>        </swiper-item>              </block>    </swiper>  </view>  <!-- 今日推荐 -->  <view class="todayNew">    <view class="todayTitle">      今日推荐    </view>    <view class="todayList " >       <navigator class="todayItem " wx:for="{{todayListArr}}" data-id="{{item.id}}" url="/pages/detailFood/detailFood?id={{item.id}}" hover-class="navigator-hover">            <image src="{{item.imgUrl}}"/>            <text>{{item.text}}</text>        </navigator>    </view>     </view>  <!-- 上拉加载更多 -->  <view hidden="{{noMore}}">    <view class="loadMore" hidden="{{isLoading}}">上拉加载更多</view>    <view class="loadMore" hidden="{{!isLoading}}">加载中...</view>  </view>  <view class="loadMore" hidden="{{!noMore}}">没有更多数据</view></view>

三、收藏

个人收藏界面是对用户的收藏内容进行列表展示
展现形式和首页的宫格展现形式类似
点击后将展示美食的主要内容：

核心代码如下：

<!--pages/detailFood/detailFood.wxml--><!-- 底部固定喜欢收藏 --><view class="fixed-box">    <view class="{{addLike.add?'add':''}} like" bindtap="funLike"><image src="{{addLike.url}}"></image>点赞</view>    <view class="{{addSave.add?'add':''}} save" bindtap="funSave"><image src="{{addSave.url}}"></image>收藏</view></view><!-- 详情 --><view class="content"><!-- 菜品图片 -->  <view class="title-image">    <image src="{{detail.imgUrl}}"></image>  </view></view><view class="container detail-container">    <!-- 菜品 -->  <text class="title-text">{{detail.title}}</text>    <!-- 菜品收藏点赞量 -->  <view class="like-save-count">    <view class="author">        <image src="../img/tou02.png"></image>        {{detail.author}}    </view>    <view class="like-count">        <image src="../img/like02.png"></image>        {{detail.like}}    </view>    <view class="save-count">        <image src="../img/save04.png"></image>        {{detail.save}}    </view>  </view>  <!-- 菜品描述 -->  <view class="food-text">    {{detail.foodText}}  </view>  <!-- 菜品难度、时间 -->  <view class="food-time">    <view>烹饪难度：<text>{{detail.foodGrade}}</text></view>    <view>烹饪时间：<text>{{detail.foodTime}}</text></view>  </view>  <!-- 食材清单 -->  <view class="food-listbox01">    <view class="food-list-title">——食材清单——</view>    <view class="food-list" >      <view class="food-item" wx:for="{{detail.materialListArr}}">        <text>{{item.name}}</text>        <text>{{item.count}}g</text>      </view>    </view>  </view>  <!-- 做法步骤 -->  <view class="way-listbox">    <view class="food-list-title">——做法步骤——</view>     <view class="way-list">      <view class="way-item" wx:for="{{detail.wayListArr}}">        <text>{{index+1}}</text>{{item}}      </view>     </view>  </view>  <!-- 图片分享 -->  <view class="pic-listbox">     <view class="food-list-title">——图片分享——</view>     <view class="pic-list">      <view class="pic-item" wx:for="{{detail.picListArr}}">        <text>{{index+1}}</text>        <image src="{{item}}"></image>      </view>    </view>  </view>  <!-- 烹饪小窍门 -->  <view class="little-tip">    <view class="food-list-title">——烹饪小窍门——</view>    <view class="tip-content">        {{detail.tipContent}}    </view>  </view></view>

项目代码如下：

项目代码

来源地址：https://blog.csdn.net/ws15168689087/article/details/123192265