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

noahlam發表於2018-04-03
框架Vue

美團小程式框架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了，接下來我們來對微信原生的一些反人類的東西來做一下優化。

一、先用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蹲坑指南，希望對你有幫助, 還有官方文件也是很不錯的哦

相關文章