GitHub

微信小程序（仿美团外卖）

初识小程序，为它的小巧玲珑所吸引，不由得心血来潮。这不正是用户所需要的吗？既方便快捷，又不占手机内存。所以我下定决心一定要做出一个自己的小程序，然后赚钱、赚钱、赚钱...当然现在只是学习阶段，所以先仿一个高端产品来挑战自我吧。说到高端，自然然而的就想到了美团。之后噼里啪啦一顿忙乎，终于做出了一点样子来，希望能为同为小白的同学们提供一点帮助和参考，现在我们进入正题。

开发工具

微信web开发者工具：官网就可以下载，相信大家早就安装好了吧。
小程序 API：官网提供的文档，不懂得地方多看两遍基本上就可以解决了。
Easy Mock：一个能够提供虚拟数据接口的网站，在前端独自开发的情况下，实在是再好不过的工具了。

功能

已经实现的功能：

主界面
订单界面
用户界面
点菜界面
定位界面

未实现的功能：

数都数不清，毕竟大企业的产品，不是说模仿就模仿的，所以只实现了一些主要的功能，和一些能力之内的功能...

项目启动

创建界面：

  "pages":[
    "pages/home/home",
    "pages/menu/menu",
    "pages/location/location",
    "pages/my/my",
    "pages/order/order"
  ],

只要编辑app.js中的pages属性，就会在项目目录下的pages文件夹里自动生成一个文件夹，里面包扩了.wxml 、 .wxss 、 .json 、 .js这样四个文件。wxml就是界面结构文件， .wxss就是样式文件, .js是用来存放js代码并实现界面逻辑的地方，至于 .json就是用来配置页面属性的地方，如：修改标题栏的颜色，和文字。

配置标题栏的样式：

  "window":{
    "navigationBarTitleText": "美团外卖+",
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#FFC640"
  },

同样是在app.json中配置，其他页面的标题栏都以此为例。

添加底栏：

"tabBar": {
    "color": "#272636",
    "selectedColor": "#FFD161",
    "backgroundColor": "#fff",
    "borderStyle": "#a8a8a8",
    "list": [
      {
        "pagePath": "pages/home/home",
        "iconPath": "pages/images/home.png",
        "selectedIconPath": "pages/images/home-selected.png",
        "color":"white",
        "text": "首页"
      },
      {
        "pagePath": "pages/order/order",
        "iconPath": "pages/images/order.png",
        "selectedIconPath": "pages/images/order-selected.png",
        "text": "订单"
      },
      {
        "pagePath": "pages/my/my",
        "iconPath": "pages/images/my.png",
        "selectedIconPath": "pages/images/my-selected.png",
        "text": "我的"
      }
    ]
  }

在app.json中编写以上代码，这是小程序自带的功能，只需要照搬照抄就可以了，极其方便，效果如下：

数据请求

/**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var that = this;
    wx.request({
      url: "https://www.easy-mock.com/mock/596257bc9adc231f357c4664/restaurant/info",//easy-mock生成的虚拟数据接口链接
      method: "GET",
      success: function (res) {//成功得到数据，对数据进行处理
        that.setData({//将数据发送到data中
          restaurant: res.data.data.restaurant,
          location: wx.getStorageSync('location')
        })
      }
    });
  },

data是每个页面.js文件中都存在的一个键，用来储存本页面需要用到的数据。具体使用，可在wxml文件中用{{'data中的键名'}}的形式调用数据。

虚拟数据大致如下：

{
  "success": true,
  "data": {
    "restaurant": [{
      "name": "御膳房",
      "src": "http://i2.kiimg.com/601998/a955867016875a41.jpg",
      "star": 4.5,
      "sales": 641,
      "initial_price": 0,
      "distribution_price": 0,
      "distance": "156m",
      "time": 33
    }, {
      "name": "韩式炸鸡啤酒屋",
      "star": 4.5,
      "sales": 731,
      "src": "http://i4.piimg.com/601998/9ce47f2f19d7717d.jpg",
      "initial_price": 15,
      "distribution_price": 0,
      "distance": "1.3km",
      "time": 52
    },{
    //略去
    },{
    //略去
    },{
    //...
    }]
  }
}

主界面

效果图：

swiper控件应用

首先是两页标签的滑动切换,这里使用的是swiper，它是一款小程序自带的滑块组件，使用掌握起来非常简单，具体代码如下：

  <swiper class="categoryList" indicator-dots="true" 
  indicator-color="rgba(228,228,228,1)" 
  indicator-active-color="#FECA49">
    <block wx:for="{{categoryList}}" wx:key="">
    <swiper-item>
    <block wx:for="{{item}}" wx:key="">
      <view class="category-info">
        <image src="{{item.src}}" 
        class="category-image"></image>
        <view class="category-text">{{item.name}}</view>
      </view>
    </block>
    </swiper-item>
    </block>
  </swiper>

swiper标签就是滑块组件的主体，表示可以滑动的区域，其中indicator-dots属性是设置设置点是否显示。接下来swiper-item标签在swiper之中表示的是每一个用来作为滑动的页面。这里用包裹着swiper-item表示的是使用categoryList对象数组中数据来循环渲染swiper-item，swiper-item的数量取决于categoryList中有多少组数据。之后在swiper-item中的block标签表示的是在一个页面中用categoryList.item中的数据循环渲染多个类似的标签，这些标签就是效果图中的类别项，总共两页，每页八个。这就是swiper和循环渲染的一些基本用法。

弹出层的实现

<view class="mask"
hidden="{{mask2Hidden}}" bindtap="mask2Cancel">
 <template is="sort_list" data="{{selected,sortSelected}}"/>
 <scroll-view class="filterList" scroll-y="true" >
   <view class="filterList-characteristic-title">商家特色</view>
   <view class="filterList-characteristic-items">
     <block wx:for="{{characteristicList}}" wx:key="">
       <view class="filterList-characteristic-item {{characteristicSelected[index]==true?'characteristic-selected':''}}"
       catchtap="characteristicSelected" data-index="{{index}}">{{item.text}}</view>
     </block>
   </view>
   <view class="filterList-discount-title">优惠活动(单选)</view>
   <view class="filterList-discount-items">
     <block wx:for="{{discountList}}" wx:key="">
       <view class="filterList-discount-item {{discountSelected==index?'discount-selected':''}}"
       catchtap="discountSelected" data-index="{{index}}">
         <text class="filterList-discount-item-icon"
         style="background:{{item.iconColor}}">{{item.icon}}</text>
       {{item.text}}</view>
     </block>
   </view>
 </scroll-view>
 <view class="filterList-footer">
   <view class="filterList-footer-delect"
   catchtap="clearSelectedNumb">清除筛选</view>
   <view class="filterList-footer-finish" bindtap="finish">完成 
   <view class="filterList-footer-finish-number" hidden="{{selectedNumb==0}}">{{selectedNumb}}
   </view>
   </view>
 </view>
</view>

最外层的mask类的view就是一个遮罩层，用来覆盖之前的界面形成遮罩的效果，并在上面显示新的界面也就是弹出层。以上的代码就是效果图中点击筛选按钮所呈现出来的内容了。其中bindtap属性就是点击事件的绑定了，具体的点击事件需要在.js文件中设置。值得一提的是，bindtap事件是会把当前标签受到的点击冒泡给它的父容器，这就相当与同时点击了他的父容器，如果想阻止冒泡的话就需要使用catchtap。

定位界面

先上效果图：

页面结构：

<view class="header">
<view class="search-input">
  <input placeholder="请输入收货地址"
   bindinput="input"></input>
   </view>
  <view class="search-btn">搜索</view>
</view>
<view class="result-container" hidden="{{hidden}}">
<scroll-view scroll-y="true"class="search-result-list" hidden="{{hidden}}">
  <block wx:for="{{locationList}}" wx:key="">
    <view class="search-result" bindtap="onTap" data-key="{{item.address}}">{{item.name}}
      <view class="search-result-desc">{{item.address}}</view>
    </view>
  </block>
</scroll-view>
</view>
<view class="getLocation"
bindtap="getLocation">点击定位当前位置</view>
<view class="addLocation">新增收货地址
  <view class="addLocation-icon">+</view>
</view>
<view class="myLocation">我的收货地址</view>
<view class="LocatonInfo"></view>
<view class="userTel"></view>

这个界面主要涉及到的就是弹出层和百度地图API的调用，调用方法可以查看百度地图API，具体点击事件代码如下：

getLocation: function () {
    wx.getLocation({
      type: 'gcj02',
      success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude
        wx.request({
          url: 'http://api.map.baidu.com/geocoder/v2/?ak=btsVVWf0TM1zUBEbzFz6QqWF&coordtype=gcj02ll&location=' + latitude + ',' + longitude + '&output=json&pois=0',
          method: "get",
          success: function (res) {
            console.log(res.data.result.formatted_address)
            wx.setStorageSync('location', 
            res.data.result.formatted_address.substr(res.data.result.formatted_address.indexOf('市') + 1, 10))
          }
        })
      }
    })
    wx.switchTab({
      url: '/pages/home/home'
    })
  },
input: function (e){
    if(e.detail.value){
      this.setData({
        hidden: false
      })
      this.search(e.detail.value);
    }else{
      this.setData({
        hidden: true
      })
    }
  },
search: function (text){
    var that = this;
    wx.request({
      url: 'http://api.map.baidu.com/place/v2/search?query=' + text +'&page_size=20&page_num=0&scope=2&region=南昌&output=json&ak=btsVVWf0TM1zUBEbzFz6QqWF',
      success: function(res){
        console.log(res);
        that.setData({
          locationList:res.data.results
        })
      }
    })
  },

点菜界面

效果图如下：

页面结构如下：

<import src = "../common/orderPage.wxml"/>
<import src = "../common/commentPage.wxml"/>
<view class="container" disable-scroll="true">
 <view class="header">
   <block wx:for="{{swiperTitle}}" wx:key="">
     <view class="title {{index==currentPage?'selected':''}}" data-index="{{index}}"
     bindtap="turnPage">{{item.text}}</view>
   </block> 
 </view>
 <swiper class="swiper" current="{{currentPage}} 
 bindchange="turnTitle">
   <swiper-item id="orderPage">
     <template is="orderPage" data="{{menu,selected,howMuch,cost,pullBar}}"/>
   </swiper-item>
   <swiper-item id="commentPage">
     <template is="commentPage" data="{{categoryList}}"/>
   </swiper-item>
   <swiper-item id="restaurantPage"></swiper-item>
 </swiper>
</view>

菜单页面如下：

<template name="orderPage">
   <scroll-view class="orderPage-sideBar" 
   bindscrolltolower="lower" 
   scroll-y="true">
     <block wx:for="{{menu}}" wx:key="">
       <view class="menuList">
         <view class="menu {{index==selected?'selected':''}}" 
         data-index="{{index}}" 
         catchtap="turnMenu">{{item.typeName}}</view>
       </view>
     </block>
   </scroll-view>
   <scroll-view class="foodList" scroll-y="true">
     <view class="title">{{menu[selected].typeName}}</view>
     <block wx:for="{{menu[selected].menuContent}}" wx:key="">
       <view class="food">
         <image class="img" src="{{item.src}}"></image>
         <view class="food-info">
           <view class="name">{{item.name}}</view>
           <view class="sales">月售 {{item.sales}} 赞 {{item.rating}}
           </view>
           <view class="price">￥  {{item.price}}</view>
         </view>
         <view class="food-numb">
           <view class="remove" 
           bindtap="removeFromTrolley"
           hidden="{{item.numb==0}}" 
           data-index="{{index}}">-</view>
           <text class="text" 
           hidden="{{item.numb==0}}">{{item.numb}}</text>
           <view class="add" 
           bindtap="addToTrolley" data-index="{{index}}">+</view>
         </view>
       </view>
     </block>
   </scroll-view>
   <view class="footer {{cost!=0?'active':''}}">
     <view class="howMuch">
       <view class="img" style="background:{{cost!=0?'#FFD161':'#E7E7E7'}};">
         <image src="/pages/images/trolley.png" style="width:60rpx;height:60rpx;"></image>
       </view>
       <view class="cost" hidden="{{cost==0}}">￥{{cost}}</view>
       <view class="free">免配送费</view>
     </view>
     <view class="pay">{{cost!=0?'去结算':'15元起送'}}</view>      
   </view>
</template>

tab切换

这个界面最主要的功能就是tab切换，和点菜功能。其中tab切换其实用的还是swiper，因为swiper有一个current属性表示的是swiper当下显示的页面的序号，只需要将tab中被激活的项与swiper的页面互相绑定就可以了，具体代码如下：

  turnPage: function (e) {
    this.setData({
      currentPage: e.currentTarget.dataset.index
    })
  },
  turnTitle: function (e) {
    if(e.detail.source=="touch"){//判断是否是滑动引起的界面切换
      this.setData({
        currentPage: e.detail.current
      })
    }
  },

当点击title中的项时获取当前序号，再将它赋值给current，当手指滑动swiper时触发bindchange事件，获取当前页面序号，使相应序号的title处于被选中的状态。有一个值得注意的地方是当点击title中的项时也会触发swiper的bindchange事件，但是我们只想让它在滑动swiper时触发，否则就会出现setData过于频繁的警告，所以我们需要在turnTitle中加一段判断语句，判断页面滑动的原因是否为滑动，如果不是则不执行下面的语句。点菜功能只是数据绑定界面的更加复杂的应用，而且还有许多不妥之处，这里就不作说明了，有兴趣的朋友可以去我的GitHub看详细的代码。

总结

这次项目是本人的第一个微信小程序项目，希望能给大家提供一些参考价值，有什么问题和想说的都可以在评论区告诉我，文章和代码中诸多不妥当的地方也劳烦各位不吝言辞，多多斧正。这样才能帮助我更快的进步，感谢！

项目地址：https://github.com/tzc123/wx_project_meituan

Name		Name	Last commit message	Last commit date
Latest commit History 22 Commits
gif		gif
meituan/workspace		meituan/workspace
README.md		README.md

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

微信小程序（仿美团外卖）

开发工具

功能

已经实现的功能：

未实现的功能：

项目启动

创建界面：

配置标题栏的样式：

添加底栏：

数据请求

主界面

swiper控件应用

弹出层的实现

定位界面

点菜界面

tab切换

总结

About

Releases

Packages

Languages

tzc123/wx_project_meituan

Folders and files

Latest commit

History

Repository files navigation

微信小程序（仿美团外卖）

开发工具

功能

已经实现的功能：

未实现的功能：

项目启动

创建界面：

配置标题栏的样式：

添加底栏：

数据请求

主界面

swiper控件应用

弹出层的实现

定位界面

点菜界面

tab切换

总结

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages