美团外卖小程序

这个美团外卖的小程序我是从github上面找到的，然后参考他的代码完成的。所以界面和代码还是有点相似，毕竟现在我才刚开始学习，所以我认为参考大牛源码也是一种提升。因为里面有许多的技巧在里面，有的时候就可以不用这么纠结应该如何布局等。

这是一个首页界面，在写代码的时候，只要在app.json的pages的数组的第一行写上你要的首页路径就可以了，因为小程序是将获取到的第一条路径默认为首页。

这些页面都是采用组件写的，而且小程序的组件不多。只要学过前端的都能够很快的上手小程序的前台页面的编写，而且这里的前端都是采用动态的渲染方式的，所以就会有模板的使用出现。这里的模板开始和结束符为{{}}。

然后就是点击商家信息栏进入商家页面了。

这里面的话是采用scroll-view组件写的，因为左边的要滚动，右边的也要滚动。所以要采用scroll-view来写。这里的scroll-view要固定height的值，不然会出不来滚动的效果，不能用百分比的形式。然后按钮的话只要采用bindtap来绑定函数就ok了。这样子的话，只要我们点击图片就会触发事件，这里的bind是可冒泡的，采用catch的话就不会冒泡了。

之后就是订单的提交了，这里的话只要提取静态的购物车数据就ok了。之后直接显示出来，然后再请求url来进行订单的提交。

这个程序大概就是这样子了。

代码在这里：传送门

2017.7.19更新

在使用js的变量的时候，我发现var a=2,b=[]。这样子写有问题，他会说我的变量未定义。

定位添加：

在index.js里面可以使用wx自定义函数getLocation来获取位置数据

wx.getLocation({      type: "wgs84",      success: function (res) {        var lat = res.latitude;//纬度          var lng = res.longitude;//经度          console.log("lat:" + lat);        console.log("lng:" + lng);        that.getCity(lat, lng);//调用自己写的函数获得城市信息      },    }) 

获取到数据之后就要利用百度的api来将具体的经纬度转为位置的信息了。所以这里的话可以自己封装一个函数来使用，这里就是上面代码所用到的getCity函数。

//获得城市    getCity: function (lat, lng) {    var that = this;    var url = "http://api.map.baidu.com/geocoder/v2/";    var param = {      ak: 'QgDjg59KnbdsL14plwnoP5rUAGKyDYPe',      location: lat + ',' + lng,      output: 'json'    };    wx.request({      url: url,      data: param,      success: function (res) {        console.log(res);        var city = res.data.result.addressComponent.district;        var street = res.data.result.addressComponent.street;        that.setData({          city: city,          street: street        });      }    })  }

这样子就可以获取到城市和街道的数据了，之后只要自己在前端页面调用就ok了。

然后就是对数据的动态加载，因为这里的数据是假的，所以做出来的也是假的加载条。

这里面其实是利用

scroll-view组件的bindscrolltolower事件来做的，这里面首先给出一个分组数据，然后等到滑到底部就会触发这个函数，就可以在里面做数据动态添加和动画效果出来了。这个函数会出现抖动的现象，所以要使用一个变量来控制只能进行一次。具体代码如下：

shop.js:

具体的更改代码在onLoading和addGoods和timeOut函数里面。

var app = getApp();var server = require('../../utils/server.js');Page({  /**   * 页面的初始数据   */  data: {    cart:{      count:0,      total:0    },    cartList:[],    localList:[],    isFreshing:false,    loding:false,    count:1,    sum : 0,    showCartDetail:false,    defaultImg: 'http://global.zuzuche.com/assets/images/common/zzc-logo.png',  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    var shopId = options.id;    var shop = server.selectedShopDetail(shopId);    this.setData({      shopId : shopId,      shop : shop,      sum : shop.menu.length    });    var menu = Array(shop.menu[0]);    this.setData({      menu: menu    });    console.log("myShop");    console.log(this.data.shop);    console.log(this.data.menu);    //加载静态订单数据    var res = wx.getStorageSync('orderList');    if(res){      if(res.count<0)res.count=0;      this.setData({        cart:{          count:res.count==null?0:res.count,          total:res.total        }      });            console.log("shop---Loading");      console.log(res.count,res.total,res.cartList);      console.log(this.data.cart.count, this.data.cart.total);      console.log("shop---end");      if(!server.isEmptyObject(res.cartList)){        this.setData({          cartList:res.cartList,          localList:server.filterEmptyObject(res.cartList)        });      }    }    //防止未定义数组的形式    if (typeof this.data.cartList[this.data.shopId] == 'undefined' || server.isEmptyObject(this.data.cartList[this.data.shopId])) {      var cartList = this.data.cartList;      cartList[this.data.shopId] = [];      this.setData({        cartList: cartList      })    }    console.log(this.data.localList, this.data.cartList)  },  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function () {      },  /**   * 生命周期函数--监听页面显示   */  onShow: function () {      },  /**   * 生命周期函数--监听页面隐藏   */  onHide: function () {      },  /**   * 生命周期函数--监听页面卸载   */  onUnload: function () {      },  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function () {      },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function () {      },  /**   * 用户点击右上角分享   */  onShareAppMessage: function () {      },  /**   * 商品展示滚动   */  onGoodsScroll:function(e){    var that = this;    var scare = e.detail.scrollWidth / 250,    scrollTop = e.detail.scrollTop,    h = 0,    selectOrder,    len = this.data.shop.menu.length;    this.data.shop.menu.forEach(function(classify,i){        var _h = 37.5 + 94 * classify.menu.length;        //console.log("srcollTop:" + scrollTop);        //console.log(h - 100 / scare);        if (scrollTop + 500 >= h ){          selectOrder = classify.id;                 }               h += _h;    });    this.setData({      selectOrder: selectOrder    });  },  /*    增加商品  */  addGoods:function(e){    var that = this;    if (!this.data.isFreshing && that.data.count < that.data.sum){      this.setData({        loding: true,        isFreshing:true      });      setTimeout(this.timeOut, 2000);    }  },  //定时增加  timeOut:function(){    var that = this;     {      var menu = that.data.menu;      menu.push(that.data.shop.menu[that.data.count]);      //console.log(that.data.count);      that.setData({        menu: menu,        count: that.data.count + 1,        loding:false,        isFreshing:false      });      //console.log("jinrulimiandeshuju");    }  },  showCartDetailf:function(){    this.setData({      showCartDetail : !this.data.showCartDetail    });    console.log(this.data.showCartDetail);  },  hiddenCartDetailf:function(){    this.setData({      showCartDetail : false    });    console.log(this.data.showCartDetail);  },  //检查下标  checkOrderSame: function (name) {    var list = this.data.cartList[this.data.shopId];    for (var index in list) {      if (list[index].name === name) {        return index;      }    }    return false;  },  //将饭菜加入购物车  tapAddCart:function(e){    var price = parseFloat(e.target.dataset.price);    var name = e.target.dataset.name;    var img = e.target.dataset.pic;    var list = this.data.cartList;    var sortedList = [];    var index;    if (index = this.checkOrderSame(name)){      sortedList = list[this.data.shopId][index];      var num = list[this.data.shopId][index].num;      list[this.data.shopId][index].num = num + 1;      list[this.data.shopId][index].pay = (num+1)*sortedList.price;    }else{      //console.log(this.data.cartList);      //console.log(list);      //console.log(this.data.shopId);      var order={        'price' : price,        'name' : name,        "num": 1,        'img' : img,        'shopId': this.data.shopId,        'shopName': this.data.shop.restaurant_name,        'pay': price,      };      list[this.data.shopId].push(order);      sortedList = order;    }    this.setData({      cartList : list,      localList :  server.filterEmptyObject(list)    });    this.addCount(sortedList);    console.log(this.data.localList);  },  //删除购物车上的饭菜  tapReduceCart:function(e){    var name = e.target.dataset.name;    var price = e.target.dataset.price;    var list = this.data.cartList;    var index,sortedList = [];    if(index = this.checkOrderSame(name)){      var num = list[this.data.shopId][index].num;      if(num>1){        sortedList = list[this.data.shopId][index];        list[this.data.shopId][index].num = num - 1;      }else{        sortedList = list[this.data.shopId][index];        list[this.data.shopId].splice(index,1);      }    }    this.setData({      cartList : list,      localList : server.filterEmptyObject(list)    });    this.deduceCount(list);  },  //增加数量  addCount: function (list) {    var count = this.data.cart.count + 1,      total = this.data.cart.total + list.price;    total = Math.round(parseFloat(total));    this.saveCart(count, total);  },  //减少数量  deduceCount: function (list) {    var count = this.data.cart.count - 1,      total = this.data.cart.total - list.price;    total = Math.round(parseFloat(total));    this.saveCart(count, total);  },  //保存购物车的东西  saveCart: function (count, total) {    console.log(typeof total, total);    if (isNaN(total))      total = 0;      console.log(typeof total,total);    total = Math.round(parseFloat(total));    this.setData({      cart: {        count: count,        total: total      }    });    wx.setStorage({      key: 'orderList',      data: {        cartList: this.data.cartList,        count: this.data.cart.count,        total: this.data.cart.total      }    });  },  submit: function (e) {    var total = this.data.cart.total    wx.navigateTo({      url: '/pages/order/order?pay=1&total=' + total    })  }})

功能上还是比较少，所以等到有时间再补吧