美團小程序框架mpvue入門教程

美團小程序框架mpvue入門教程

自打寫了 美團小程序框架mpvue蹲坑指南, 一發不可收拾，今天趁週末空閒，來寫個mpvue(沒朋友)的簡單入門教程，本教程只針對新手，老鳥勿噴。

另外，我還專門爲本文作了一個簡單的項目，若是懶得從頭開始搭項目的童鞋，能夠直接去個人 github上克隆到本地， 安裝一下依賴，便可直接在此基礎在開發，不須要作任何配置。若是你以爲該項目對有幫助， 請順便給我Star,大家的支持是我最大的動力，謝謝!

好了，咱們進入主題，首先，請容許引用一下美團官方對mpvue的介紹

mpvue是一個使用 Vue.js 開發小程序的前端框架。框架基於 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其能夠運行在小程序環境中，從而爲小程序開發引入了整套 Vue.js 開發體驗。

主要特性

使用 mpvue 開發小程序，你將在小程序技術體系的基礎上獲取到這樣一些能力：

1. 完全的組件化開發能力：提升代碼複用性
2. 完整的 Vue.js 開發體驗
3. 方便的 Vuex 數據管理方案：方便構建複雜應用
4. 快捷的 webpack 構建機制：自定義構建策略、開發階段 hotReload
5. 支持使用 npm 外部依賴
6. 使用 Vue.js 命令行工具 vue-cli 快速初始化項目
7. H5 代碼轉換編譯成小程序目標代碼的能力

學習最好的方式就動手，咱們就徒手擼一個demo項目出來跑一跑，看看到底有沒有官方說的那麼好。 若是你有過vue的開發經歷，相信你會對這個過程很是熟悉，甚至你都不須要安裝其餘工具， 直接用vue-cli建立項目，若是你一塊兒沒安裝過vue-cli，那麼你要先運行一下命令

npm install --g vue-cli
複製代碼

安裝完vue-cli之後，咱們就能夠運行一下命令，來自動構建一個項目（期間會詢問你是否使用一些工具/插件， 請根據本身的實際狀況選擇y或n,對於不懂得該選y仍是n的，通通選n）

vue init mpvue/mpvue-quickstart test-wxapp
複製代碼

而後 進入咱們建立的項目，並安裝依賴

cd test-wxapp
npm i
複製代碼

最後，在運行一下咱們的開發服務

npm run dev
複製代碼

項目就跑起來了，這個時候，咱們打開微信開發者工具，選擇小程序，而後新建一個，項目目錄填 咱們項目目錄下的dist目錄 test-wxapp/dist,就能夠看到效果了

到此爲止，一個基本的項目就完成了，可是，本文的目的不是讓你學會搭一個空項目的，空項目的話，我以爲官方教程作的已經夠好了。 接下來，咱們來刪掉幾個示例文件，而後一步步添加頁面. 首先，咱們看一下項目的配置文件 /src/main.js 裏面的初始內容以下：

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue(App)
app.$mount()

export default {
  // 這個字段走 app.json
  config: {
    // 頁面前帶有 ^ 符號的，會被編譯成首頁，其餘頁面能夠選填，咱們會自動把 webpack entry 裏面的入口頁面加進去
    pages: ['pages/logs/main', '^pages/index/main'],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  }
}
複製代碼

這裏的 config 字段下面的內容，就是整個小程序的全局配置了，其中pages是頁面的路由，window則是頁面的一些配置（大部分都是頂部欄的配置） ，這些配置，最終都會被打包到原生小程序的app.json，對這些配置不瞭解的，建議看一下微信方法的小程序文檔，這裏不作贅述。

咱們先把/src/pages 下面的counter和logs兩個文件夾刪掉，只保留一個index ,順便把 /src/components 文件夾下面的文件也全刪掉, 而後把/src/main.js 裏面的 config.pages裏面多餘的路由也刪掉，只保留一條['^pages/index/main'],這樣目前就只有個index頁面，

而後咱們打開/src/pages/index/index.vue 咱們把裏面多餘的代碼刪掉，只保留一個基礎骨架

<template>
  <div class="container">
       我是首頁
  </div>
</template>

<script>

export default {
  data () {
    return { }
  },
  methods: {},

  created () {}
}
</script>

<style scoped>

</style>
複製代碼

tip /src/utils/index.js 是一個公共函數庫，裏面只有一個簡單的格式化日期函數，不要也能夠刪掉

到目前爲止，一個乾淨的空項目就算是ok了，接下來咱們來對微信原生的一些反人類的東西來作一下優化。

1、先用mptoast組件代替官方提供的wx.showToast, wx.showToast諸多不便我就不說了，關鍵是還有坑 小程序基礎庫比較低的，無論你怎麼設置，老是會在彈窗裏面加一個鉤鉤，有時候我想彈出錯誤消息也是打鉤， 嚴重誤導用戶，字數上還有限制有帶icon的不能超過7個字，你說說，你說說 7個字夠幹嗎的， 那咱們來看看mptoast,據官方介紹mptoast具備輕量，配置少，冗餘少，使用簡單，可定製性強等特色

咱們開根據官方介紹，從npm引入並配置

npm i vuex
npm i mptoast -D
複製代碼

在項目的主配置文件（通常位於src/main.js）加入如下代碼

import mpvueToastRegistry from 'mptoast/registry'
mpvueToastRegistry(Vue)
複製代碼

在你須要彈窗的頁面，引入組件，並註冊，而後在頁面內加入一個你註冊的組件，就能夠在js裏面調用this.$mptoast()了， 如下是一個簡單的實例

<template>
  <div>
    <-- 省略其餘代碼 -->
    <mptoast />
  </div>
</template>

<script>
import mptoast from 'mptoast'

export default {
  components: {
    mptoast
  },
  data () {
    return {}
  },
  methods: {
    showToast () {
      this.$mptoast('我是提示信息')
    },
  }
}
</script>
複製代碼

使用起來仍是蠻簡單的

二，用promise封裝異步請求函數 在小程序的環境下面，要想發送一個外部請求，咱們只能使用小程序官方提供的wx.request方法， 可是該方法的代碼風跟跟Jquery年代的Ajax同樣，都散靠回調來處理請求響應，若是有不少層回調， 就會有不少層嵌套，這讓咱們這些平時被async-await慣壞的人怎麼接受？

因此，建完基本項目，咱們要作的第一件事，就是用wx.request本身封裝一個基於promise的異步請求方法。 咱們先來看一下 wx.request的一個官方示例代碼

wx.request({
  url: 'test.php', //僅爲示例，並不是真實的接口地址
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json' // 默認值
  },
  success: function(res) {
    console.log(res.data)
  }
})
複製代碼

能夠看到，每次請求都要發送一大堆的東西，重點少這些東西里面，極可能對於一個項目來講， 絕大部分都是固定不變的，那這樣，不是冗餘了麼。

tip: 更多wx.request參數，請參考 微信官方文檔

咱們分析一下，第一個參數是url,也就是咱們請求的地址，這個應該是每次都不同的，可是，不同的應該也只是url的最後一部分， 接口名稱的位置不同，前面的服務器地址通常都是同樣的，例如http://www.abc.com/api/member/login 對於同一個項目的全部接口 服務器地址http://www.abc.com/api/應該都是同樣的，不同的只是後媽的接口名稱member/login, 那咱們能夠把url拆分紅 服務器地址 + 接口名稱，這樣作也方便後期上線的時候，切換服務器地址。

第二個參數是請求的參數，請求的參數應該是每次都不同的，因此這個咱們就不作修改（事實上實際應用中， 常常有可能出現須要每一個接口都帶一個token的，咱們也能夠在這裏統一加上去，不過這裏就不作深刻）

第三個參數是 請求頭，這個通常同一個項目裏面，這些都是同樣的，因此咱們就寫死。 這裏還有一個參數method請求方法， 這裏由於使用默認值GET，因此就沒列出，咱們這邊須要作設置，由於如今先後分離的模式，如今基本上大部分都是POST請求，因此咱們這邊也寫死成method:'POST'

最後一個就是處理請求結果回調函數，示例裏面只有一個請求成功的回調，其實咱們應該再加一個請求實例的處理函數， fail，而咱們封裝這個函數的重點，就是要用promise來處理這兩個回調函數，使它們能夠用async-await的語法

// 假設如下代碼在 `/src/utils/requestMethod.js`

let serverPath = 'http://www.abc.com/api/'
export function post(url,body) {
    return new Promise((resolve,reject) => {
        wx.request({
              url: serverPath + url    // 拼接完整的url
              data: body
              method:'POST',
              header: {
                  'content-type': 'application/json'
              },
              success(res) {
                resolve(res.data)  // 把返回的數據傳出去
              },
              fail(ret) {
                reject(ret)   // 把錯誤信息傳出去
              }
            })
    })
}
複製代碼

有了這樣的封裝，咱們就能夠在其餘地方引入 上面這個文件，而後使用post函數請求

import {post} from '/src/utils/requestMethod.js'
// 須要注意的是，這行代碼必需要在async修飾的函數裏面才能正確調用
let res = await post('member/login',{name:myname})
複製代碼

若是你以爲每次都要import這個文件很麻煩,那咱們也能夠把它掛在到Vue(mpvue)的原型(prototype)上，咱們打開/src/main.js文件，而後在裏面加入如下代碼

import {post} from '/src/utils/requestMethod.js'
Vue.prototype.$post = post
複製代碼

這樣，咱們就能夠在Vue(mpvue)的全部實例裏面，直接使用 this.$post()來調用，只要一行代碼，

// 這行代碼一樣須要在async修飾的函數裏面才能正確調用
let res = await this.$post('member/login',{name:myname})
複製代碼

怎麼樣？是否是比原生的方便不少呢？

固然，跑起來之後，你可能還會遇到各類問題，這裏我有對我本身遇到的問題作了一些總結 美團小程序框架mpvue蹲坑指南，但願對你有幫助, 還有官方文檔也是很不錯的哦