仿美团外卖源码加自己做了个模拟数据加载的效果

最新推荐文章于 2026-04-27 08:37:45 发布

原创

最新推荐文章于 2026-04-27 08:37:45 发布 · 1w 阅读

本文介绍了作者使用微信小程序实现仿美团外卖的功能，包括顶部定位（结合微信API和百度地图API）以及模拟数据加载。通过监听scroll-view的滚动事件，动态加载数据并展示进度条。在实现过程中遇到数据动态增加的问题，由于对象赋值导致的错误，通过对象克隆方法解决了问题。

入门了微信小程序之后，跟着视频做了个入门的“天气预报”简易版小程序，自己做了一个仿“豆瓣电影”的小程序，之前博文都写了，又在网上搜到一份“美团外卖”小程序的源码，所以就马上动手跟着做了起来，使用了它给的素材资源，然后自己仿照着界面效果，自己写样式，除了小部分样式可能是参考源码的，其余是自己写的，感觉这样很能锻炼样式布局的能力，虽然css比较恶心。然后逻辑上的话基本是照着源码理解，先写“死”数据，后来再根据它的逻辑参考着代码一步一步做出模拟数据效果，大概理解它的逻辑代码之后，自己跟着敲，再自己调错等。做完之后，我这次主要讲我自己做的功能：

1、顶部的定位功能（借助微信小程序 api 请求经纬度并提供给百度地图 api 再去请求获取具体地理位置）

2、模拟数据加载的过程（在点餐时，查看店家信息时，店家比较多需要下拉查看，我就固定一次只显示固定的条数，再当鼠标这几条记录被查看完之后，再去请求新的数据，每次加载跟之前一样固定的记录条数，具体看下面解释吧！）

先上几张效果图吧：

当然上面支付是假的，并未实现此功能。

现在来讲下“顶部的定位功能如何实现”（效果如上面第一张图）：

主要运用微信小程序自带的 api 和百度地图 api 来一起先后进行请求即可获取所在地理位置：

微信自带 api 代码如下：

requestLocation: function () {
    var that = this;
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        var latitude = res.latitude/**纬度 */
        var longitude = res.longitude /**经度 */
        console.log(res);
        that.getAddress(latitude, longitude);/**调用自定义函数获取地理we */
      }
    })
  },

百度地图 api 代码如下：

getAddress: function (lat, lng) {
    var url = 'https://api.map.baidu.com/geocoder/v2/';/**最后记得加"/" */
    var params = { /**传递的参数集合 *
      location: lat + ',' + lng,
      output: 'json',
      ak: 'MKABLw7PZssnQPy0BmnV2e6vcUyKWZxf' /**注册百度地图 api 之后就能获取 ak 了 */
    };
    var that = this;/**获取句柄 */
    wx.request({
      url: url,
      data: params,
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        console.log(res);
        var address = res.data.result.formatted_address; /**具体要到哪个地址可以查看res对象数组内容再去获取 */
        console.log(address);
        that.setData({
          address: address /**给wxml页面分配地址数据 */
        });