项目使用的手艺栈

• 数据请求: flyio.js- 同时支持浏览器、小程序、Node、Weex的基于Promise的跨平台http请求库
  。？？？梢匀媚诙喔龆松暇】赡艽笙薅鹊氖迪执敫从
• css预编译器: stylus-基于Node.js的CSS的预处理框架
• 数据泉源:EasyMock-为测试提供模拟数据
• 整体框架: mpvue
• 地图:腾讯地图api

下载启动方法

• 1、git clone https://github.com/WsmDyj/mpvue.git
• 2、装置启动

# 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

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

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

在写美团外卖小程序时
，，，我跟各人一样步履蹒跚
。。总会遇到种种各样的问题以及彷徨在vue写法和mpvue写法中心不可自拔
。。mpvue刚出不久
，，，有用的资源真的甚少
，，，没有一套基本项目流程的介绍
。。以是我便萌发了这篇文章
，，，通过这个完整的项目去构想整套mpvue开发
。。许多问题可能不可逐一枚举
，，，但我会把最常见最常用的地方尽我所能的去叙述
。。乐于分享
，，，资助社区
。。

一、mpvue中数据请求的封装

写项目最主要的即是数据
，，，有了数据整个页面就活起来了
，，，数据的浇灌便需要http的请求
。。微信小程序模范的就javascript运行情形和浏览器不对
，，，页面的剧本逻辑是在JsCore中运行
，，，JsCore是一个没有窗口工具的情形
，，，以是不克缺乏扎剧本中应用window
，，，也无法扎剧本中操作组件
，，，JsCore中也没有XmlhttpRequest工具
，，，以是jquery 、zepto、axios这些在小程序模范中都不克缺乏用
，，，而此时
，，，fly便担当了这一重任
。。

• 1、装置flyio.js

npm install flyio

• 2、在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

• 3、在根目录的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)
     })
  }

封装好了数据的请求
，，，pp电子项目就实现了一泰半了
。。接下来就是怎样使用这些数据来填充pp电子页面完成交互
。。

二、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}}" 动态控制 左侧滑栏的被动转动
。。代码就纷歧一贴出来,项目中有详细的注释
。。点这里审查

三、mpvue组件剖析
，，，组件通讯

做完一个项目并不难
，，，但做好一个项目却要经由无数次的思索
。。其中之一就是看文档
，，，所谓书读百变
，，，其义自现
。。简直
，，，当你一遍又一遍的柯寄档后你会发明你写起来很是的随手
，，，用到即来
。。没事可以点击vue文档多看看
。。

组件剖析

什么是组件剖析？？？对mpvue来讲
，，，组件是组成项目的基本单位
。。只要划分好了组件
，，，项目写起来那是很是的快的
。。为了利便明确
，，，这里界说两类组件：页面组件
，，，功效组件
。。页面组件就是目今你望见的这个网页地点的完整显示
，，，他将包括几个功效组件
。。
美团外卖小程序功效组件许多
，，，大致的列几个:

1. 评分组件
   ，，，需要的props的值为：星星的巨细
   ，，，商家的评分
2. 购物车组件： 需要的props：selectFoods
   ，，，deliveryPrice
   ，，， minPrice等
3. 通告组件：每个项目难免宣布一些通告或者弹窗
   ，，，把它抽出来当一个组件
4. 间距split组件： 组件可以很大许多功效
   ，，，也可能很少
   ，，，只要在项目中经常用的就可以抽出来当一个组件
   。。
5. swiper组件： 轮播图作为一个组件
   ，，，可以镌汰我们一个页面成堆的代码
   ，，，把它抽出来当一个组件
   ，，，日后也更易维护
   。。

组件通讯

一、 组件间可以通过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)
  };

二、父子组件间要领的挪用可以通过$on, $emit

var Event = new Vue();//相当于又new了一个vue实例
，，，Event中含有vue的所有要领
Event.$emit('msg',this.msg);//发送数据
，，，第一个参数是发送数据的名称
，，，吸收时还用这个名字吸收
，，，第二个参数是这个数据现在的位置
Event.$on('msg',function(msg){//吸收数据
，，，第一个参数是数据的名字
，，，与发送时的名字对应
，，，第二个参数是一个要领
，，，
要对数据的操})

---