沒朋友(mpvue)，點個外賣，一我的也要好好吃飯

每次寫文章時，總會感慨萬千。面對成功，咱們老是抱以較高的指望，總想急不可耐就能獲得勝利的果實。可每一次成功不可能垂手可得的就來到咱們的面前。幾乎每一次都須要咱們付出極大的耐心和勤奮，甚至於近乎偏執狂般的傻傻堅持。自打小程序推出以來，我便開始轉入這個市場。並非由於他的熱度而是一種學習興趣吧，總想着去探索下新知識。也正是有了這種動力，才能讓我一直堅持下來。距我上一篇文章《滴滴一夏，小程序專車來了》發表至今，已有半月之久。之間結識了好多好朋友。他們樂觀開朗，詼諧。以本身最樸實的熱忱對待他人。他們爲個人徵聯不吝惜筆墨添彩，給我鼓勵和修正。同時也感謝黃軼老師給個人面試機會還有慕課上的精彩課程。迴歸正題，今天給你們帶來的是美團外賣微信小程序，基於mpvue開發。由於mpvue推出至今也才短短3個月，全部我會詳細的講解每個細節，但願幫到在mpvue上步履艱難的你。

前言

學習就比如是座大山，人們沿着不一樣的路爬山，分享着本身看到的風景。你不必定能看到別人看到的風景，體會到別人的心情。只有本身去爬山，才能看到不同的風景，體會更加深入。所以建議仍是必定要去實踐一波。

項目使用的技術棧

• 數據請求: flyio.js- 同時支持瀏覽器、小程序、Node、Weex的基於Promise的跨平臺http請求庫。可讓您在多個端上儘量大限度的實現代碼複用
• css預編譯器: stylus-基於Node.js的CSS的預處理框架
• 數據來源:EasyMock-爲測試提供模擬數據
• 總體框架: mpvue
• 地圖:騰訊地圖api

下載啓動步驟

• 一、git clone https://github.com/WsmDyj/mpvue.git
• 二、安裝啓動

# 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、父子組件間方法的調用能夠經過$on, $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項目,持續關注我吧！！！