快速搭建美团外卖（第三方）微信小程序（附精选源码32套，涵盖商城团购等）-Toy模板网

这篇具有很好参考价值的文章主要介绍了快速搭建美团外卖（第三方）微信小程序（附精选源码32套，涵盖商城团购等）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

文章来源地址https://www.toymoban.com/news/detail-753322.html

项目使用的技术栈

1、数据请求: [flyio.js]同时支持浏览器、小程序、Node、Weex的基于Promise的跨平台http请求库。可以让您在多个端上尽可能大限度的实现代码复用
2、css预编译器: [stylus]-基于Node.js的CSS的预处理框架
3、数据来源:[EasyMock]-为测试提供模拟数据
4、整体框架: mpvue
5、地图:腾讯地图api

主体页面主要由首页，订单，我的页面组成

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

首页预览：
美团app开发代码,Uniapp,微信小程序,小程序

首页主要代码：

<template>
   <div class="home">
    <div class="mask" v-show="isHidden" @click="mask1Cancel">
        <sortList></sortList>
        <div class="overall-sort-list">
            <div v-for="(item,index) in sortList" :key="index">
                <div class="overall-sort" @click="sortSelected">{{item.sort}}</div>
            </div> 
        </div>
    </div>
     <sprinner v-if="isShow"></sprinner>
    <search></search>
    <h-swiper></h-swiper>
        <div class="title">
            <div class="line"></div>
            <div class="text">附近商家</div>
            <div class="line"></div>
        </div>
        <div class="select">
            <div class="sort-list">
                <div class="sort" @click="onOverallTag">综合排序{{sortSelected}}
                <image src="/static/images/down.png" style="width:20rpx;height:20rpx;"/></div>
                <div :data-index="0" @click="onTapTag" class="sort " :class="{'sort-active': selected == 0}">销量最高</div>
                <div :data-index="1" @click="onTapTag" class="sort" :class="{'sort-active': selected == 1}">距离最近</div>
                <div class="sort" @click="onFilter">筛选
                    <image src="/static/images/screen.png" style="width:22rpx;height:22rpx;"/>
                </div>
            </div>
        </div>
        <scroll-view>
            <div class="restaurantsList">
                    <div class="restaurants-list" v-for="(item,index) in restaurant" :key="index" @click="toIndex">
                        <div class="restaurants-info-image"><image :src="item.src" class="restaurants-image"/></div>
                        <div class="restaurants-info">
                        <div class="restaurants-info-name">{{item.name}}</div>
                        <div class="restaurants-info-rating">
                             <star :size="24" :score="item.score"></star>
                            <div 
                            class="restaurants-info-rating-sales">月售 {{item.sales}}</div>
                        </div>
                        <div class="restaurants-info-price">
                            起送 {{item.initial_price}}￥ | 配送 {{item.distribution_price}}
                        </div>
                    </div>
                    <div class="restaurants-distribution">
                        <span class="restaurants-distribution-time">{{item.time}} 分钟</span>
                        <span class="restaurants-distribution-distance"> {{item.distance}}</span> 
                      
                    </div>
                    </div>
            </div>
        </scroll-view>
   
   </div>
    
</template>

定位预览效果：

美团app开发代码,Uniapp,微信小程序,小程序

使用微信接口进行定位

 getWXLocation(success, fail, complete) {
        wx.getLocation({
            type: 'gcj02',
            success: success,
            fail: fail,
            complete: complete
        });
    },

获取location参数

getLocationParam(location) {
        if (typeof location == 'string') {
            var locationArr = location.split(',');
            if (locationArr.length === 2) {
                location = {
                    latitude: location.split(',')[0],
                    longitude: location.split(',')[1]
                };
            } else {
                location = {};
            }
        }
        return location;
    },

处理用户参数是否传入坐标进行不同的处理

locationProcess(param, locationsuccess, locationfail, locationcomplete) {
        var that = this;
        locationfail = locationfail || function (res) {
            res.statusCode = ERROR_CONF.WX_ERR_CODE;
            param.fail(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg));
        };
        locationcomplete = locationcomplete || function (res) {
            if (res.statusCode == ERROR_CONF.WX_ERR_CODE) {
                param.complete(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg));
            }
        };
        if (!param.location) {
            that.getWXLocation(locationsuccess, locationfail, locationcomplete);
        } else if (that.checkLocation(param)) {
            var location = Utils.getLocationParam(param.location);
            locationsuccess(location);
        }
    }

POI周边检索

 search(options) {
        var that = this;
        options = options || {};

        Utils.polyfillParam(options);

        if (!Utils.checkKeyword(options)) {
            return;
        }

        var requestParam = {
            keyword: options.keyword,
            orderby: options.orderby || '_distance',
            page_size: options.page_size || 10,
            page_index: options.page_index || 1,
            output: 'json',
            key: that.key
        };

        if (options.address_format) {
            requestParam.address_format = options.address_format;
        }

        if (options.filter) {
            requestParam.filter = options.filter;
        }

        var distance = options.distance || "1000";
        var auto_extend = options.auto_extend || 1;

        var locationsuccess = function (result) {
            requestParam.boundary = "nearby(" + result.latitude + "," + result.longitude + "," + distance + "," + auto_extend +")";
            wx.request(Utils.buildWxRequestConfig(options, {
                url: URL_SEARCH,
                data: requestParam
            }));
        }
        Utils.locationProcess(options, locationsuccess);
    }

sug模糊检索

getSuggestion(options) {
        var that = this;
        options = options || {};
        Utils.polyfillParam(options);

        if (!Utils.checkKeyword(options)) {
            return;
        }

        var requestParam = {
            keyword: options.keyword,
            region: options.region || '全国',
            region_fix: options.region_fix || 0,
            policy: options.policy || 0,
            output: 'json',
            key: that.key
        };
        wx.request(Utils.buildWxRequestConfig(options, {
            url: URL_SUGGESTION,
            data: requestParam
        }));
    }

逆地址解析

reverseGeocoder(options) {
        var that = this;
        options = options || {};
        Utils.polyfillParam(options);
        var requestParam = {
            coord_type: options.coord_type || 5,
            get_poi: options.get_poi || 0,
            output: 'json',
            key: that.key
        };
        if (options.poi_options) {
            requestParam.poi_options = options.poi_options
        }

        var locationsuccess = function (result) {
            requestParam.location = result.latitude + ',' + result.longitude;
            wx.request(Utils.buildWxRequestConfig(options, {
                url: URL_GET_GEOCODER,
                data: requestParam
            }));
        };
        Utils.locationProcess(options, locationsuccess);
    }

地址解析

geocoder(options) {
        var that = this;
        options = options || {};
        Utils.polyfillParam(options);

        if (Utils.checkParamKeyEmpty(options, 'address')) {
            return;
        }

        var requestParam = {
            address: options.address,
            output: 'json',
            key: that.key
        };

        wx.request(Utils.buildWxRequestConfig(options, {
            url: URL_GET_GEOCODER,
            data: requestParam
        }));
    }

获取城市列表

 getCityList(options) {
        var that = this;
        options = options || {};
        Utils.polyfillParam(options);
        var requestParam = {
            output: 'json',
            key: that.key
        };

        wx.request(Utils.buildWxRequestConfig(options, {
            url: URL_CITY_LIST,
            data: requestParam
        }));
    }

获取对应城市ID的区县列表

getDistrictByCityId(options) {
        var that = this;
        options = options || {};
        Utils.polyfillParam(options);

        if (Utils.checkParamKeyEmpty(options, 'id')) {
            return;
        }

        var requestParam = {
            id: options.id || '',
            output: 'json',
            key: that.key
        };

        wx.request(Utils.buildWxRequestConfig(options, {
            url: URL_AREA_LIST,
            data: requestParam
        }));
    }

用于单起点到多终点的路线距离(非直线距离)计算：
* 支持两种距离计算方式：步行和驾车。
* 起点到终点最大限制直线距离10公里。

calculateDistance(options) {
        var that = this;
        options = options || {};
        Utils.polyfillParam(options);

        if (Utils.checkParamKeyEmpty(options, 'to')) {
            return;
        }

        var requestParam = {
            mode: options.mode || 'walking',
            to: Utils.location2query(options.to),
            output: 'json',
            key: that.key
        };

        var locationsuccess = function (result) {
            requestParam.from = result.latitude + ',' + result.longitude;
            wx.request(Utils.buildWxRequestConfig(options, {
                url: URL_DISTANCE,
                data: requestParam
            }));
        }
        if (options.from) {
            options.location = options.from;
        }
        
        Utils.locationProcess(options, locationsuccess);
    }

订单页预览

美团app开发代码,Uniapp,微信小程序,小程序

订单页主要代码

<template>
    <div class="order">
        <div class="empty" v-if="isShow">
          <div class="image">
            <image src="/static/images/orderImg.png"/>
          </div>
          <div class="order" @click="toIndex">
             <span class="text">立即下单</span>
          </div>
         
        </div>
      <scroll-view class="container" :scroll-y="true">
        <div class="orderList" v-for="(item,index) in orderList" :key="index">
          <div class="order-title">
            <div class="order-title-restaurantName">
              <span class="name">{{item.name}}</span>
             <span class="iconfont icon-icon icon"></span>
            </div>
            <div class="order-title-state">商家已接单</div>
          </div>
          <div class="order-content">
            <image class="order-content-restaurantImg" :src="item.icon"/>
            <div class="order-content-info">
              <div class="order-content-info-price">￥ {{item.price}}</div>
              <div class="order-content-info-howToDistribute">美团小助手提供服务</div>
            </div>
          </div>
            <div class="order-desc">共{{item.count}}件商品，实付<span style="font-weight:700;">￥ {{item.count*item.price}}</span></div>
          <div class="order-footer">
            <div class="order-footer-orderAgain">再来一单</div>
            <div class="order-footer-goToComment">去评论</div>
          </div>
        </div>
      </scroll-view>
    </div>
</template>

<script>
   import util from '@/utils/util'
export default {
    data() {
        return {
             orderList:[],
             isShow: true
        }
    },
    onShow(){
       
         try {
            var value = wx.getStorageSync('selectFoods')
            if (value) {
              this.isShow = false;
              this.orderList=value;
            }
          } catch (e) {
            console.log(e)
          };

         
    },
    methods: {
      toIndex() {
          wx.switchTab({
            url: '/pages/home/main',
          })
        
      }

    }
}
</script>

<style lang="stylus" scoped>
  .empty
    display flex
    flex-direction column
    justify-content center
    align-items center
    margin-top 25%
    .order
      height 68rpx
      width 240rpx
      background-color #ffd300
      text-align center
      margin-top 40rpx
      line-height 68rpx
      border-radius 5rpx

  .container
    height: 100%
    .orderList
      width 100%
      padding 15rpx
      border 100rpx 0
      border-style solid
      border-color #ECECEC
      .order-title
        width 100%
        height 70rpx
        line-height 70rpx
        border-bottom 1rpx solid #ECECEC
        .order-title-restaurantName
          width 200rpx
          float left
          height 100%
          font-size 30rpx
          .name 
            padding-right 10rpx
          .icon
            color #b4b4b4
        .order-title-state
          width 200rpx
          float right
          color #ffc648
          margin-right -15rpx
          font-size 28rpx
      .order-content
        height 250rpx
        display flex
        align-items center
        .order-content-restaurantImg
          width 125rpx
          height 125rpx
        .order-content-info
          font-size 25rpx
          flex 1
          display flex
          flex-direction column
          .order-content-info-price,.order-content-info-howToDistribute
            height 42rpx
            line-height 42rpx
            margin-left 30rpx
          .order-content-info-price
            color: red
            font-size: 30rpx
      .order-desc
        float right 
        font-size 30rpx
        width 335rpx
        margin-bottom 40rpx
        line-height 30rpx
        margin-right 10rpx
      .order-footer
        width 100%
        height 90rpx
        display flex
        justify-content flex-end
        font-size 28rpx
        .order-footer-goToComment,.order-footer-orderAgain
          margin-top 15rpx
          margin-right: 40rpx
          height 70rpx
          line-height 70rpx
          width 200rpx
          text-align center
          border 1rpx solid #ECECEC
        .order-footer-orderAgain
          margin-right 20rpx
        .order-footer-goToComment
          background #FFD161
        
</style>

精选32套源码目录：

IT之家小程序版客户端(使用 Mpvue 开发，兼容 Web)ithome-lite-master.zip

mpvue 仿网易严选mpvue-shop-master.zip

mpvue-音乐播放器mpvue-music-master.zip

mpvue性能测试与体验miniweibo-master.zip

mpvue改造的日历.zip

mpvue框架仿滴滴出行didi-master.zip

mpVue高仿美团小程序教程mpvue-meituan-master.zip

uni APP自动更新并安装.vue

uni-app nvue沉浸式状态栏(线性渐变色).vue

uni-app 二维码生成器分享wxqrcode.zip

uni-app 侧边导航分类,适合商品分类页面uni-app-left-navigation-master.zip

uni-app 自定义底部导航栏uni-app-bottom-navigation-master.zip

uni-app全局变量的几种实现方式.zip

uni-app的markdown富文本编辑器插件uniapp-markdown-master.zip

uni-app自定义导航栏title-custom.zip

uniapp聊天实例，支持图片，语音，表情.zip

uniapp选择器,包含一级,二级级联,三级级联uniapp-picker-master.zip

vue-mpvue-ChatRobot聊天机器人vue-mpvue-ChatRobot-master.zip

【小程序】CNode社区mpvue-cnode-master.zip

【插件、图表】7种图表漂亮丰富uniCharts.zip

一款播课类小程序, 基于 mpvue 构建mp-podcast-mpvue-master.zip

云档新版小程序端，基于mpvue开发cloud-doc-v2-master.zip

仿uc浏览器列表.vue

仿扎克新闻mpZAKER-master.zip

仿网易云UImusic播放器mpvue-music-master.zip

仿追书神器的小说阅读器小程序wx-book-master.zip

参照米家APP布局和样式,编写的一款智能家居小程序smart-home-master.zip

商城实例mpvue-xbyjShop-master.zip

基于 mpvue 实现豆瓣电影微信小程序mpvue-douban-master.zip

基于mpvue的优酷mpvue-youku-master.zip

校园助手示例SHUhelper-master.zip

类似mui中的chat(聊天窗口)实现uniapp-chat-master.zip

美团外卖(第三方)开源程序mpvue-master.zip

美食搜索mpvue-FG-master.zip

豆瓣平分mpvue-douban-pingfen-master.zip

顶部tabbar.vue

源码截图：
美团app开发代码,Uniapp,微信小程序,小程序

说明

如果本项目对您有帮助，欢迎 “点赞，关注” 支持一下谢谢~

源码获取关注公众号「码农园区」，回复【uniapp源码】

到了这里，关于快速搭建美团外卖（第三方）微信小程序（附精选源码32套，涵盖商城团购等）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

快速搭建美团外卖（第三方）微信小程序（附精选源码32套，涵盖商城团购等）

项目使用的技术栈

定位预览效果：

订单页预览

精选32套源码目录：

说明

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2