微信小程序（初学篇）——仿美团外卖

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

开发工具

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

已经实现的功能：

主界面 
订单界面 
用户界面 
点菜界面 
定位界面 
未实现的功能：

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

创建界面

1."pages":[
 2."pages/home/home",
 3."pages/menu/menu",
 4."pages/location/location",
 5."pages/my/my",
 6."pages/order/order"
 7.],

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

配置标题栏的样式

1."window":{
 2."navigationBarTitleText": "美团外卖+",
 3."navigationBarTextStyle": "white",
 4."navigationBarBackgroundColor": "#FFC640"
 5.},

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

添加底栏

1."tabBar": {
 2."color": "#272636",
 3."selectedColor": "#FFD161",
 4."backgroundColor": "#fff",
 5."borderStyle": "#a8a8a8",
 6."list": [
 7.{
 8."pagePath": "pages/home/home",
 9."iconPath": "pages/images/home.png",
 10."selectedIconPath": "pages/images/home-selected.png", 
 11."color":"white",
 12."text": "首页"
 13.},
 14.{
 15."pagePath": "pages/order/order",
 16."iconPath": "pages/images/order.png",
 17."selectedIconPath": "pages/images/order-selected.png",
 18."text": "订单"
 19.},
 20.{
 21."pagePath": "pages/my/my",
 22."iconPath": "pages/images/my.png",
 23."selectedIconPath": "pages/images/my-selected.png",
 24."text": "我的"
 25.}
 26.]
 27.}

在app.json中编写以上代码，这是小程序自带的功能，只需要照搬照抄就可以了，极其方便，效果如下：

image 
数据请求

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

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

1.{
 2."succes