没朋友(mpvue)，点个外卖，一我的也要好好吃饭

每次写文章时，总会感慨万千。面对成功，咱们老是抱以较高的指望，总想急不可耐就能获得胜利的果实。可每一次成功不可能垂手可得的就来到咱们的面前。几乎每一次都须要咱们付出极大的耐心和勤奋，甚至于近乎偏执狂般的傻傻坚持。自打小程序推出以来，我便开始转入这个市场。并非由于他的热度而是一种学习兴趣吧，总想着去探索下新知识。也正是有了这种动力，才能让我一直坚持下来。距我上一篇文章《滴滴一夏，小程序专车来了》发表至今，已有半月之久。之间结识了好多好朋友。他们乐观开朗，诙谐。以本身最朴实的热忱对待他人。他们为个人征联不吝惜笔墨添彩，给我鼓励和修正。同时也感谢黄轶老师给个人面试机会还有慕课上的精彩课程。回归正题，今天给你们带来的是美团外卖微信小程序，基于mpvue开发。由于mpvue推出至今也才短短3个月，全部我会详细的讲解每个细节，但愿帮到在mpvue到道路上步履阑珊的你。天气热了，让咱们一块儿点个外卖吧！！

前言

学习就比如是座大山，人们沿着不一样的路爬山，分享着本身看到的风景。你不必定能看到别人看到的风景，体会到别人的心情。只有本身去爬山，才能看到不同的风景，体会更加深入。所以建议仍是必定要去实践一波。

项目使用的技术栈

• 数据请求: flyio.js- 同时支持浏览器、小程序、Node、Weex的基于Promise的跨平台http请求库。可让您在多个端上尽量大限度的实现代码复用
• css预编译器: stylus-基于Node.js的CSS的预处理框架
• 数据来源:EasyMock-为测试提供模拟数据
• 总体框架: mpvue
• 地图:腾讯地图api

下载启动步骤

• 一、git clone github.com/WsmDyj/mpvu…
• 二、安装启动

# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
复制代码

• 三、小程序开发工具指向下面的dist目录

效果图

即便在优美的语言描述，仍是也抵不过图片来的实际。一块儿欣赏下美团外卖吧！

mpvue与小程序擦出的火花(采坑之旅)

在写美团外卖小程序时，我跟你们同样步履蹒跚。总会遇到各类各样的问题以及徘徊在vue写法和mpvue写法中间不能自拔。mpvue刚出不久，有效的资源真的甚少，没有一套基本项目流程的介绍。因此我便萌发了这篇文章，经过这个完整的项目去构思整套mpvue开发。不少问题可能不能一一列举，但我会把最多见最经常使用的地方尽我所能的去阐述。乐于分享，帮助社区。

1、mpvue中数据请求的封装

写项目最重要的即是数据，有了数据整个页面就活起来了，数据的浇灌便须要http的请求。微信的javascript运行状况和浏览器不一样，页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的状况，JsCore中也没有XmlhttpRequest对象，因此jquery、zepto、axios这些都没法涉足微信开发中来，而此时，fly便担任了这一重任。

• 一、安装flyio.js

npm install flyio

• 二、在util建立一个fly.js用于封装

import Vue from 'vue' 
var Fly=require("flyio/dist/npm/wx.js") //wx.js为flyio的微信小程序入口文件
var fly=new Fly(); //建立fly实例
//添加拦截器
fly.interceptors.request.use((config,promise)=>{
    config.headers["X-Tag"]="flyio";  //给全部请求添加自定义header
    return config;
})
//配置请求基地址
fly.config.baseURL="https://www.easy-mock.com/mock/5aded45053796b38dd26e970/"
Vue.prototype.$http=fly  //将fly挂载在vue上供全局使用
export default fly
复制代码

• 三、在根目录的main.js下封装一个getList方法.用到请求数据的页面直接调用这个方法便可。提升代码复用率

Vue.prototype.getList = function () {
     wx.showLoading({
       title: '加载中',
   })
   this.$http.get('sell#!method=get').then((res)=>{
       this.restaurant = res.data.data.restaurant;  //商家数据
       this.goods = res.data.data.goods; //商品数据
       this.seller = res.data.data.seller; //商家详细数据
       this.ratings= res.data.data.ratings //评论数据
       wx.hideLoading();
     }).catch((e)=>{
     console.log(e)
   })
}
复制代码

封装好了数据的请求，咱们的项目就实现了一大半了。接下来就是如何利用这些数据来填充咱们的页面完成交互。

2、mpvue实用功能的详解

接下来我将会一一介绍在mpvue中如何实现定位，位置搜索，上拉加载下拉刷新，物品之间的二级联动。让咱们打起精神，一块儿focus下面的知识点。

mpvue定位及位置搜索

mpvue中定位及位置搜索跟小程序相似，你们能够先看看我上篇文章，那里又详细的地址解析，逆地址解析，关键词搜索等。

官方拷贝下来的js放在utils下,这里要注意的是必定要将他的输出更改成

export default QQMapWX;

这样才能够在页面中使用，这里配合微信小程序提供的 wx.getLocation()和 wx.chooseLocation()API使用。

import QQMapWX from "../../utils/map"; //导入刚引入的js
    var qqmapsdk;
    qqmapsdk = new QQMapWX({
    key:'DHNBZ-2ZLKK-T7IJJ-AXSQW-WX5L6-A6FJZ'
    });
复制代码

mpvue上拉加载下拉刷新

经过onPullDownRefresh和onReachBottom方法实现mpvue小程序下拉加载和上拉刷新

// 局部开启下拉刷新,就在文件下的main.js
export default {
  config: {
    "enablePullDownRefresh": true,
  }
}
复制代码

onReachBottom() {
        let nextPage = this.page +1; //定义每一页page，下来刷新新的一页+1
        this.page = nextPage  //更新page
        this.$http.get('sell#!method=get').then((res)=>{
        this.restaurant =[...res.data.data.restaurant,...this.restaurant]//请求的新数据，解构出来渲染页面
        }).catch((e)=>{
        console.log(e)
        })
    },
onPullDownRefreash(){
  this.isShow = !this.isShow 
}
复制代码

mpvue中实现二级联动

实现该功能的思路：

• 1 左到右:经过点击左侧滑栏的某一项，获取到该元素携带的 id ，而后动态传给右侧滑栏的 scroll-into-view ，从而实现右侧滑栏对应的该元素运动置顶。

• 2 右到左:经过计算整个右侧滑栏滚动上去的高度 与右侧滑栏中每个分类距顶部的距离作比对，获取到该滚动置顶的分类的 index 。而后用获取到的 index 乘以左侧滑栏中某一项的高度，动态赋值给左侧滑栏内的 scrollTop ，控制左侧滑栏的联动。

  

注意这几点： (1) 小程序 wxss 中使用 rpx，而 js 中 scrollTop 获取到的值是 px，因此存在rpx 转 px 的问题。以 iPhone6 为基准，转换公式：

// percent 为当前设备1rpx对应的px值
var percent = res.windowWidth / 750;
复制代码

(2) 微信自带scroll-view UI组件，经过 bindscroll="scroll" 绑定滚动事件；经过 scroll-top="{{scrollTop}}" 动态控制 左侧滑栏的被动滚动。代码就不一一贴出来,项目中有详细的注释。点这里查看

3、mpvue组件分析，组件通讯

作完一个项目并不难，但作好一个项目却要通过无数次的思考。其中之一就是看文档，所谓书读百变，其义自现。的确，当你一遍又一遍的看文档后你会发现你写起来很是的顺手，用到即来。没事能够点击vue文档多看看。

组件分析

什么是组件分析？对mpvue来说，组件是构成项目的基本单元。只要划分好了组件，项目写起来那是很是的快的。为了方便理解，这里定义两类组件：页面组件，功能组件。页面组件就是当前你看见的这个网页地址的完整显示，他将包含几个功能组件。 美团外卖小程序功能组件不少，大体的列几个:

1. 评分组件，须要的props的值为：星星的大小，商家的评分
2. 购物车组件： 须要的props：selectFoods，deliveryPrice， minPrice等
3. 公告组件：每一个项目不免发布一些公告或者弹窗，把它抽出来当一个组件
4. 间距split组件： 组件能够很大不少功能，也可能不多，只要在项目中常常用的就能够抽出来当一个组件。
5. swiper组件： 轮播图做为一个组件，能够减小咱们一个页面成堆的代码，把它抽出来当一个组件，往后也更易维护。

组件通讯

1、 组件间能够经过props传递数据,这里以选物品 -> 选择组件 -> 购物车 -> 订单详情一条线来详细描述组件间数据怎么传递的。

• 1 选择组件

props: {
      food: {  //接受一个food，表明选择的是哪一个商品
          type: Object,
      }
  },
  addCart(event) {
      if(!this.food.count){
          this.$set(this.food, 'count', 1)  //点击事件传递给父组件
          this.food.count = 1; 
      }else{
          this.food.count++  // 商品++
      }
  },
复制代码

• 2 购物车

经过props接受一个selectFood，这里把它放入小程序的本地中提供给订单页面
 try {
            wx.setStorageSync('selectFoods', this.selectFoods)
        } catch (e) {   
            console.log(e) 
        }
复制代码

• 3 订单页面

try {
    var value = wx.getStorageSync('selectFoods') //拿到存储的数据，使用同步的概念
    if (value) {
      this.isShow = false; // 判断订单也是否有数据，没有数据则用v-show引用一个组件去渲染页面
      this.orderList=value; //数据渲染页面
    }
  } catch (e) {
    console.log(e)
  };
复制代码

2、父子组件间方法的调用能够经过emit

var Event = new Vue();//至关于又new了一个vue实例，Event中含有vue的所有方法
Event.$emit('msg',this.msg);//发送数据，第一个参数是发送数据的名称，接收时还用这个名字接收，第二个参数是这个数据如今的位置
Event.$on('msg',function(msg){//接收数据，第一个参数是数据的名字，与发送时的名字对应，第二个参数是一个方法，
要对数据的操})
复制代码

---

寄语

不少东西想聊出来，好比mpvue小程序中引用图片必定要放在static文件目录下，组件的属性计算computed。以及vuex在全局数据的使用等等。可是一我的的精力真的有限，本人也是一个大三的学生，最近忙于找实习公司，同时也在研究下vue底层源码分析。全部可能到这里差很少就结束了。对其中一些内容比较喜欢的能够去个人github上下载，慢慢研究。这里附上我项目的地址mpvue美团外卖小程序。也但愿有志同道和的能够加入一块儿讨论，若是有什么不懂得能够直接评论我，或者发我qq：972774037我也会第一时间帮你解答。也但愿经过这个为我找实习增添色彩吧，下期将推出更加精彩的vue项目,持续关注我吧！！！