精华内容
下载资源
问答
  • 微信小程序项目
    万次阅读 多人点赞
    2022-02-28 21:04:12

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

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


    一、项目展示

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

    在这里插入图片描述


    二、首页

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

    核心代码如下:

    <!--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>
    
    

    项目代码如下:

    项目代码


    在这里插入图片描述

    更多相关内容
  • 微信小程序项目实例zip(微信小程序开发实例源码汇总 完整项目源代码) 微信小程序 实例汇总 完整项目源代码
  • 微信小程序项目计划书.pdf微信小程序项目计划书.pdf微信小程序项目计划书.pdf微信小程序项目计划书.pdf微信小程序项目计划书.pdf微信小程序项目计划书.pdf微信小程序项目计划书.pdf微信小程序项目计划书.pdf
  • 微信小程序大作业,里面有十个项目,有微信商城小程序,微信播放器小程序,微信旅游小程序,微信电影小程序等等,都适合初学者学习,都有登录(登录账号和密码为abc和123),轮播图,导航栏,部分有搜索功能。
  • 微信小程序项目计划书-小程序项目计划书.pdf微信小程序项目计划书-小程序项目计划书.pdf微信小程序项目计划书-小程序项目计划书.pdf微信小程序项目计划书-小程序项目计划书.pdf微信小程序项目计划书-小程序项目计划...
  • 微信小程序项目计划规划优质方案书--精选.doc.pdf微信小程序项目计划规划优质方案书--精选.doc.pdf微信小程序项目计划规划优质方案书--精选.doc.pdf微信小程序项目计划规划优质方案书--精选.doc.pdf微信小程序项目...
  • 微信小程序项目计划书.docx微信小程序项目计划书.docx微信小程序项目计划书.docx微信小程序项目计划书.docx微信小程序项目计划书.docx微信小程序项目计划书.docx微信小程序项目计划书.docx微信小程序项目计划书.docx
  • 微信小程序项目实施计划书 (2).docx微信小程序项目实施计划书 (2).docx微信小程序项目实施计划书 (2).docx微信小程序项目实施计划书 (2).docx微信小程序项目实施计划书 (2).docx微信小程序项目实施计划书 (2).docx...
  • 微信小程序项目实例——家居团购微信小程序项目实例——家居团购微信小程序项目实例——家居团购微信小程序项目实例——家居团购微信小程序项目实例——家居团购微信小程序项目实例——家居团购微信小程序项目实例...
  • 微信小程序项目计划清单书-小程序项目计划清单书.docx微信小程序项目计划清单书-小程序项目计划清单书.docx微信小程序项目计划清单书-小程序项目计划清单书.docx微信小程序项目计划清单书-小程序项目计划清单书.docx...
  • 微信小程序项目计划书-小程序项目计划书.docx微信小程序项目计划书-小程序项目计划书.docx微信小程序项目计划书-小程序项目计划书.docx微信小程序项目计划书-小程序项目计划书.docx微信小程序项目计划书-小程序项目...
  • 微信小程序 备忘录(截图+源码)微信小程序 备忘录(截图+源码)微信小程序 备忘录(截图+源码)微信小程序 备忘录(截图+源码)微信小程序 备忘录(截图+源码)微信小程序 备忘录(截图+源码)微信小程序 备忘录...
  • 主要介绍了微信小程序项目总结之记账小程序功能的实现方法(包括后端),需要的朋友可以参考下
  • 微信小程序项目实施计划书.pdf微信小程序项目实施计划书.pdf微信小程序项目实施计划书.pdf微信小程序项目实施计划书.pdf微信小程序项目实施计划书.pdf微信小程序项目实施计划书.pdf微信小程序项目实施计划书.pdf微信...
  • 微信小程序项目实施计划书.docx.pdf微信小程序项目实施计划书.docx.pdf微信小程序项目实施计划书.docx.pdf微信小程序项目实施计划书.docx.pdf微信小程序项目实施计划书.docx.pdf微信小程序项目实施计划书.docx.pdf...
  • 微信小程序 实例汇总 完整项目源代码 微信小程序 实例汇总 完整项目源代码
  • 微信小程序开发图解案例教程第4章 必备的微信小程序API.pptx
  • 微信小程序项目计划清单书-小程序项目计划清单书.pdf微信小程序项目计划清单书-小程序项目计划清单书.pdf微信小程序项目计划清单书-小程序项目计划清单书.pdf微信小程序项目计划清单书-小程序项目计划清单书.pdf微信...
  • 微信小程序项目计划书小程序项目计划书e.docx微信小程序项目计划书小程序项目计划书e.docx微信小程序项目计划书小程序项目计划书e.docx微信小程序项目计划书小程序项目计划书e.docx微信小程序项目计划书小程序项目...
  • 微信小程序项目计划书小程序项目计划书e.pdf微信小程序项目计划书小程序项目计划书e.pdf微信小程序项目计划书小程序项目计划书e.pdf微信小程序项目计划书小程序项目计划书e.pdf微信小程序项目计划书小程序项目计划书...
  • 亲测好用,挺不错的资源,大家快来下载吧!挺有用的!需要的话可以来下载哦!微信小程序 实例汇总 完整项目源代码
  • 项目利用基于Python开发的Django框架作为服务器,开发一款微信小程序版本的短视频应用。
  • 微信小程序 实例汇总 完整项目源代码 微信小程序 实例汇总 完整项目源代码 微信小程序 实例汇总 完整项目源代码 微信小程序 实例汇总 完整项目源代码

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 164,783
精华内容 65,913
关键字:

微信小程序项目

微信小程序 订阅
友情链接: image.rar