wx_project_meitua 仿美团外卖的微信小程序

wx_project_meitua 仿美团外卖的微信小程序

微信小程序（仿美团外卖）

初识小程序，为它的小巧玲珑所吸引，不由得心血来潮。这不正是用户所需要的吗？既方便快捷，又不占手机内存。所以我下定决心一定要做出一个自己的小程序，然后赚钱、赚钱、赚钱...当然现在只是学习阶段，所以先仿一个高端产品来挑战自我吧。说到高端，自然然而的就想到了美团。之后噼里啪啦一顿忙乎，终于做出了一点样子来，希望能为同为小白的同学们提供一点帮助和参考，现在我们进入正题。

开发工具

微信web开发者工具： 官网就可以-，相信大家早就安装好了吧。小程序 API： 官网提供的文档，不懂得地方多看两遍基本上就可以解决了。Easy Mock： 一个能够提供虚拟数据接口的网站，在前端独自开发的情况下，实在是再好不过的工具了。

功能

已经实现的功能：

主界面订单界面用户界面点菜界面定位界面

未实现的功能：

数都数不清，毕竟大企业的产品，不是说模仿就模仿的，所以只实现了一些主要的功能，和一些能力之内的功能...

项目启动

创建界面：

"pages":[ "pages/home/home", "pages/menu/menu", "pages/location/location", "pages/my/my", "pages/order/order" ],

只要编辑app.js中的pages属性，就会在项目目录下的pages文件夹里自动生成一个文件夹，里面包扩了.wxml 、 .wxss 、 .json 、 .js这样四个文件。wxml就是界面结构文件， .wxss就是样式文件, .js是用来存放js代码并实现界面逻辑的地方，至于 .json就是用来配置页面属性的地方，如：修改标题栏的颜色，和文字。

配置标题栏的样式：

"window":{ "navigationBarTitleText": "美团外卖+", "navigationBarTextStyle": "white", "navigationBarBackgroundColor": "#FFC640" },

同样是在app.json中配置，其他页面的标题栏都以此为例。

添加底栏：

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

数据请求

/** * 生命周期函数--监听页面显示 */ onShow: function () { var that = this; wx.request({      url: "https://easy-mock.com/mock/596257bc9adc231f357c4664/restaurant/info",//easy-mock生成的虚拟数据接口链接      method: "GET",      success: function (res) {//成功得到数据，对数据进行处理        that.setData({//将数据发送到data中          restaurant: res.data.data.restaurant, location: wx.getStorageSync('location') }) } }); },

data是每个页面.js文件中都存在的一个键，用来储存本页面需要用到的数据。具体使用，可在wxml文件中用{{'data中的键名'}}的形式调用数据。 虚拟数据大致如下：

{ "success": true, "data": { "restaurant": [{ "name": "御膳房", "src": "http://i2.kiimg.com/601998/a955867016875a41.jpg", "star": 4.5, "sales": 641, "initial_price": 0, "distribution_price": 0, "distance": "156m", "time": 33 }, { "name": "韩式炸鸡啤酒屋", "star": 4.5, "sales": 731, "src": "http://i4.piimg.com/601998/9ce47f2f19d7717d.jpg", "initial_price": 15, "distribution_price": 0, "distance": "1.3km", "time": 52 },{    //略去    },{    //略去    },{    //... }] }}

主界面

swiper控件应用

首先是两页标签的滑动切换,这里使用的是swiper，它是一款小程序自带的滑块组件，使用掌握起来非常简单，具体代码如下：

{{item.name}}

swiper标签就是滑块组件的主体，表示可以滑动的区域，其中indicator-dots属性是设置设置点是否显示。接下来swiper-item标签在swiper之中表示的是每一个用来作为滑动的页面。这里用包裹着swiper-item表示的是使用categoryList对象数组中数据来循环渲染swiper-item，swiper-item的数量取决于categoryList中有多少组数据。之后在swiper-item中的block标签表示的是在一个页面中用categoryList.item中的数据循环渲染多个类似的标签，这些标签就是效果图中的类别项，总共两页，每页八个。这就是swiper和循环渲染的一些基本用法。

弹出层的实现