这个美团外卖的小程序我是从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
})
}
})
功能上还是比较少，所以等到有时间再补吧