前言

學習就好比是座大山，人們沿著不同的路登山，分享著自己看到的風景。你不一定能看到別人看到的風景，體會到別人的心情。只有自己去登山，才能看到不一樣的風景，體會更加深刻。因此建議還是一定要去實踐一波。

項目使用的技術棧

下載啟動步驟

# 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、小程序開發(fā)工具指向下面的dist目錄

效果圖

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

在寫美團外賣小程序時，我跟大家一樣步履蹣跚?？倳龅礁鞣N各樣的問題以及徘徊在vue寫法和mpvue寫法中間不能自拔。mpvue剛出不久，有效的資源真的甚少，沒有一套基本項目流程的介紹。所以我便萌發(fā)了這篇文章，通過這個完整的項目去構(gòu)思整套mpvue開發(fā)。很多問題可能不能一一列舉，但我會把最常見最常用的地方盡我所能的去闡述。樂于分享，幫助社區(qū)。

一、mpvue中數(shù)據(jù)請求的封裝

寫項目最重要的便是數(shù)據(jù)，有了數(shù)據(jù)整個頁面就活起來了，數(shù)據(jù)的澆灌便需要http的請求。微信小法度榜樣的就javascript運行情況和瀏覽器不合，頁面的腳本邏輯是在JsCore中運行，JsCore是一個沒有窗口對象的情況，所以不克不及裹足本中應用window，也無法裹足本中操作組件，JsCore中也沒有XmlhttpRequest對象，所以jquery 、zepto、axios這些在小法度榜樣中都不克不及用，而此時，fly便擔任了這一重任。

• 1、安裝flyio.js

npm install flyio

• 2、在util創(chuàng)建一個fly.js用于封裝

import Vue from 'vue' 
var Fly=require("flyio/dist/npm/wx.js") //wx.js為flyio的微信小程序入口文件
var fly=new Fly(); //創(chuàng)建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方法.用到請求數(shù)據(jù)的頁面直接調(diào)用這個方法即可。提高代碼復用率

  Vue.prototype.getList = function () {
       wx.showLoading({
         title: '加載中',
     })
     this.$http.get('sell#!method=get').then((res)=>{
         this.restaurant = res.data.data.restaurant;  //商家數(shù)據(jù)
         this.goods = res.data.data.goods; //商品數(shù)據(jù)
         this.seller = res.data.data.seller; //商家詳細數(shù)據(jù)
         this.ratings= res.data.data.ratings //評論數(shù)據(jù)
         wx.hideLoading();
       }).catch((e)=>{
       console.log(e)
     })
  }

封裝好了數(shù)據(jù)的請求，我們的項目就實現(xiàn)了一大半了。接下來就是如何利用這些數(shù)據(jù)來填充我們的頁面完成交互。

二、mpvue實用功能的詳解

接下來我將會一一介紹在mpvue中如何實現(xiàn)定位，位置搜索，上拉加載下拉刷新，物品之間的二級聯(lián)動。讓我們打起精神，一起focus下面的知識點。

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方法實現(xiàn)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]//請求的新數(shù)據(jù)，解構(gòu)出來渲染頁面
        }).catch((e)=>{
        console.log(e)
        })
    },
onPullDownRefreash(){
  this.isShow = !this.isShow 
}

mpvue中實現(xiàn)二級聯(lián)動

實現(xiàn)該功能的思路：

• 1 左到右:通過點擊左側(cè)滑欄的某一項，獲取到該元素攜帶的 id ，然后動態(tài)傳給右側(cè)滑欄的 scroll-into-view ，從而實現(xiàn)右側(cè)滑欄對應的該元素運動置頂。
• 2 右到左:通過計算整個右側(cè)滑欄滾動上去的高度 與右側(cè)滑欄中每一個分類距頂部的距離做比對，獲取到該滾動置頂?shù)姆诸惖?index 。然后用獲取到的 index 乘以左側(cè)滑欄中某一項的高度，動態(tài)賦值給左側(cè)滑欄內(nèi)的 scrollTop ，控制左側(cè)滑欄的聯(lián)動。

注意這幾點：
(1) 小程序 wxss 中使用 rpx，而 js 中 scrollTop 獲取到的值是 px，所以存在rpx 轉(zhuǎn) px 的問題。以 iPhone6 為基準，轉(zhuǎn)換公式：

// percent 為當前設備1rpx對應的px值
var percent = res.windowWidth / 750;

三、mpvue組件分析，組件通信

組件分析

什么是組件分析？對mpvue來講，組件是構(gòu)成項目的基本單元。只要劃分好了組件，項目寫起來那是非常的快的。為了方便理解，這里定義兩類組件：頁面組件，功能組件。頁面組件就是當前你看見的這個網(wǎng)頁地址的完整顯示，他將包含幾個功能組件。
美團外賣小程序功能組件很多，大致的列幾個:

1. 評分組件，需要的props的值為：星星的大小，商家的評分
2. 購物車組件： 需要的props：selectFoods，deliveryPrice， minPrice等
3. 公告組件：每個項目難免發(fā)布一些公告或者彈窗，把它抽出來當一個組件
4. 間距split組件： 組件可以很大很多功能，也可能很少，只要在項目中經(jīng)常用的就可以抽出來當一個組件。
5. swiper組件： 輪播圖作為一個組件，可以減少我們一個頁面成堆的代碼，把它抽出來當一個組件，日后也更易維護。

組件通信

一、 組件間可以通過props傳遞數(shù)據(jù),這里以選物品 -> 選擇組件 -> 購物車 -> 訂單詳情一條線來詳細描述組件間數(shù)據(jù)怎么傳遞的。

• • 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') //拿到存儲的數(shù)據(jù)，使用同步的概念
    if (value) {
      this.isShow = false; // 判斷訂單也是否有數(shù)據(jù)，沒有數(shù)據(jù)則用v-show引用一個組件去渲染頁面
      this.orderList=value; //數(shù)據(jù)渲染頁面
    }
  } catch (e) {
    console.log(e)
  };

二、父子組件間方法的調(diào)用可以通過$on, $emit

var Event = new Vue();//相當于又new了一個vue實例，Event中含有vue的全部方法
Event.$emit('msg',this.msg);//發(fā)送數(shù)據(jù)，第一個參數(shù)是發(fā)送數(shù)據(jù)的名稱，接收時還用這個名字接收，第二個參數(shù)是這個數(shù)據(jù)現(xiàn)在的位置
Event.$on('msg',function(msg){//接收數(shù)據(jù)，第一個參數(shù)是數(shù)據(jù)的名字，與發(fā)送時的名字對應，第二個參數(shù)是一個方法，
要對數(shù)據(jù)的操})

---
 

寄語