引言：外賣已經成為了都市人的必備，在無數(shù)個來不及（懶得）做飯的時刻拯救孤單寂寞的胃。美團外賣無疑是外賣屆的領頭羊，它的很多功能與設計都值得我們學習。本文將從五個方面，對美團外賣展開產品分析，希望對你有幫助。

一.首頁

部分代碼：

<view class="container"><view class="header {{scrollDown?'scrolled':''}}"><view class="location ellipsis" bindtap="toNearby"><image class="icon" src="/imgs/index/icon_location.png"/>{{address}}</view><view class="search" bindtap="tapSearch"><image class="icon" src="/imgs/index/icon_search.png"/><i class="fa fa-home"></i>烤鴨</view></view><scroll-view scroll-y="true" scroll-into-view="{{scrollIntoView}}" bindscroll="onScroll"><swiper class="banner" indicator-dots="true" autoplay="true" interval="3000" duration="500"><block wx:for="{{banners}}" wx:key="id"><swiper-item><image bindtap="tapBanner" data-id="{{index}}" src="{{item.img}}"/></swiper-item></block></swiper><swiper class="section icons" indicator-dots="true" autoplay="" interval="" duration="500"><swiper-item wx:for="{{icons}}" wx:for-item="list" wx:key="id"><view class="icon" wx:for="{{list}}" wx:for-item="icon" wx:key="id" bindtap="toNearby"><image src="{{icon.img}}"/><text>{{icon.name}}</text></view></swiper-item></swiper><view class="section section-big discount"><view class="title">優(yōu)惠專區(qū)</view><image class="content" bindtap="toNearby" src="http://wxapp.im20.com.cn/impublic/waimai/imgs/index/dicount.jpg"/></view><view class="section section-big preferred"><view class="title">為你優(yōu)選</view><image class="content" bindtap="toNearby" src="http://wxapp.im20.com.cn/impublic/waimai/imgs/index/preferred.jpg"/></view><view class="section section-big special"><view class="title">特色頻道</view><image class="content" bindtap="toNearby" src="http://wxapp.im20.com.cn/impublic/waimai/imgs/index/special.jpg"/></view><view id="nearby" class="section section-big nearby"><view class="title">附近商家</view><view class="filters"><view class="filter {{filterId==1?'active':''}}" data-id="1" bindtap="tapFilter">綜合排序<text class="v">↓</text></view><view class="filter {{filterId==2?'active':''}}" data-id="2" bindtap="tapFilter">銷量最高<text class="v">↓</text></view><view class="filter {{filterId==3?'active':''}}" data-id="3" bindtap="tapFilter">距離最近<text class="v">↓</text></view></view><view class="shop" wx:for="{{shops}}" wx:key="id"><navigator url="/page/shop/shop?id={{item.id}}"><image src="{{item.img}}"/></navigator></view></view><view class="loading">努力加載中…</view></scroll-view>
</view>

效果圖：

下拉：

二.詳情頁

部分代碼：

<view class="container"><view class="header {{scrollDown?'hidden':''}}"><image class="logo" src="{{shop.logo}}"/><view class="name ellipsis">{{shop.name}}</view><view class="welcome ellipsis">公告：歡迎光臨{{shop.name}}！</view><view class="follow" bindtap="follow">{{followed?'已收藏':'收藏'}}</view><view class="line"></view><view class="desc">{{shop.desc}}</view></view><view class="content-container"><scroll-view class="classify-container" scroll-y="true"><view class="classify {{classifySeleted==classify.id?'active':''}}" wx:for="{{goodsList}}" wx:for-item="classify" wx:key="id" data-id="{{classify.id}}" bindtap="tapClassify"><view class="name">{{classify.classifyName}}</view></view></scroll-view><scroll-view class="goods-container" scroll-y="true" scroll-into-view="{{classifyViewed}}" bindscroll="onGoodsScroll"><view wx:for="{{goodsList}}" wx:for-item="classify" wx:key="id" id="{{classify.id}}"><view class="title">{{classify.classifyName}}</view><view class="goods" wx:for="{{classify.goods}}" wx:for-item="id" wx:key="*this"><image class="pic" src="{{goods[id].pic}}"></image><view class="name ellipsis">{{goods[id].name}}</view><view class="sold">月售{{goods[id].sold}}</view><view class="price">￥{{goods[id].price}}</view><view class="addCart" bindtap="tapAddCart" data-id="{{id}}"><image src="/imgs/shop/plus.png"></image></view></view></view></scroll-view></view><view class="cart-detail" hidden="{{!showCartDetail||!cart.count}}"><view class="mask" bindtap="hideCartDetail"></view><view class="list"><view class="item" wx:for="{{cart.list}}" wx:for-index="id" wx:for-item="num" wx:key="id"><view class="name ellipsis">{{goods[id].name}}</view><view class="total">￥{{goods[id].price*cart.list[id]}}</view><view class="reduce" data-id="{{id}}" bindtap="tapReduceCart">-</view><view class="num">{{num}}</view><view class="add" data-id="{{id}}" bindtap="tapAddCart">+</view></view></view></view><view class="cart"><view class="data" bindtap="showCartDetail"><view class="icon"><image src="/imgs/shop/cart.png"></image><view class="count">{{cart.count}}</view></view><view class="total">￥{{cart.total}}</view></view><form bindsubmit="submit" report-submit="true"><!--<view formType="submit" class="submit">去結算</view>--><button class="yellow {{cart.count?'':'disabled'}}" formType="submit" disabled="{{!cart.count}}">去結算</button></form></view>
</view>

效果圖：

三.我的

部分代碼：

<!--index.wxml-->
<view class="container"> <view class="login-icon"> <image class="login-img" src="/imgs/index/lb.jpg"></image> </view> <view class="login-from"> <!--賬號--> <view class="inputView"> <image class="nameImage" src="/imgs/index/lb.jpg"></image> <label class="loginLab">賬號</label> <input class="inputText" placeholder="請輸入賬號" 
bindinput="phoneInput" /> </view> <view class="line"></view> 
<!--密碼--> 
<view class="inputView"> <image class="keyImage" src="/imgs/index/lb.jpg"></image> <label class="loginLab">密碼</label> <input class="inputText" password="true" placeholder="請輸入密碼" bindinput="passwordInput" /> </view> <!--相關協(xié)議--><checkbox-group bindchange="bindAgreeChange"><label class="weui-agree" for="weuiAgree"><view class="weui-agree__text"><checkbox class="weui-agree__checkbox" id="weuiAgree" value="agree" checked="{{}}" /><view class="weui-agree__checkbox-icon"><icon class="weui-agree__checkbox-icon-check" type="success_no_circle" size="9" wx:if="{{isAgree}}"></icon></view>閱讀并同意<navigator url=""class="weui-agree__link">《相關條款》</navigator></view></label></checkbox-group><!--按鈕--> <view class="loginBtnView"> <button class="loginBtn" type="primary" size="{{primarySize}}" 
loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" 
bindtap="login">登錄</button> </view> </view> 
</view> 

今天就分享到此，感謝預覽~

有源碼