赞
踩
这个美团外卖的小程序我是从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
- });
- }
- })
- }
然后就是对数据的动态加载,因为这里的数据是假的,所以做出来的也是假的加载条。
这里面其实是利用
- 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
- })
- }
- })
功能上还是比较少,所以等到有时间再补吧
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。