使用mpvue開發小程序教程（三）

在上一篇文章中，咱們熟悉了一下經過vue-cli生成的mpvue工程代碼骨架的基本結構，大體瞭解了每個部分的代碼到底要放到何處。從本文起咱們就開始涉及真正的編碼部分，學習使用Vue的語法去編寫小程序。

爲了清楚起見，咱們將要對vue-cli生成的代碼作一個清理工做，具體以下：

• 刪掉src/components、src/pages、src/utils三個目錄下的全部代碼文件

• 將src/App.vue文件中的內容重置成：

<script>
export default {}
</script>

<style>
</style>

• 將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 {
  config: {
    pages: [],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: '第一個小程序',
      navigationBarTextStyle: 'black'
    }
  }
}

至此，咱們的代碼就成了一個小程序頁面都沒有的初始狀態。

程序入口

學習過使用小程序原生框架開發的朋友都知道，一個小程序的入口應該包含這三個最重要的部分：
1）app.json
2）app.js
3）首頁

有了這三個部分，才能成功運行起一個最簡單的小程序。

app.json

app.json是小程序的全局配置文件，其包含了小程序的頁面文件路徑配置、窗口的全局樣式信息、底部選項卡式菜單欄的配置，以及一些小程序網絡超時的配置等等。app.json的配置詳情咱們能夠查閱參考小程序的官方文檔來做進一步瞭解。那麼，在mpvue中咱們如何來作與之等價的配置呢？

其實在src/main.js中，咱們就能夠完整的進行這些信息的配置，具體能夠查看該文件的最底部代碼：

export default {
  // 這部分至關於原生小程序的 app.json
  config: {
    pages: [],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: '第一個小程序',
      navigationBarTextStyle: 'black'
    }
  }
}

在該代碼中經過export default導出的對象的config屬性下的值，就是這些小程序的配置信息了。

app.js

app.js中包含了小程序的各類原生生命週期方法，如onLaunch、onShow等等。而在mpvue中，它使用了一個簡單的Vue組件App.vue來實現等價的功能。咱們在這個App.vue組件中能夠編寫小程序的生命週期方法（一般使用Vue的生命週期方法，但也兼容原生的生命週期方法），也能夠在其中加入小程序的全局樣式（等價於原生方式下的app.wxss）：

<script>
/* 這部分至關於原生小程序的 app.js */
export default {
  created () {
    console.log('miniapp created!!!')
  }
}
</script>

<style>
/* 這部分至關於原生小程序的 app.wxss */
.container {
  background-color: #cccccc;
}
</style>

接着，這個 App.vue組件被 src/main.js引入並被設置了一個 mpType的屬性值，其值爲 app。這個值是爲了與後面要講的小程序頁面組件所區分開來，由於小程序頁面組件和這個 App.vue組件的寫法和引入方式是一致的，爲了區分二者，須要設置 mpType值。引入這個 App.vue組件後，會用它做爲參數來建立一個 Vue的實例，並調用 $mount()方法加載。下面是這個過程的關鍵代碼行：

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

首頁、以及其餘頁面

每一個小程序都須要至少有一個頁面，第一個展現的頁面被叫作首頁。由於前面已經把全部的頁面代碼都刪完了，因此咱們如今要新建一個首頁。在src/pages目錄下，咱們新建一個名爲index的子目錄（請遵循每一個頁面放入一個子目錄的良好習慣），而後在該子目錄下，新建2個文件：一個用於實現頁面主體功能的index.vue組件，另外一個則用於將這個頁面組件生成Vue實例並加載的main.js。之後的每個mpvue頁面組件都會擁有這樣的結構。

而後在 main.js中編寫以下代碼，很是簡單的一段代碼，它的功能是引入 index.vue並建立Vue實例：

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

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

固然了，你也能夠像在src/main.js中同樣去導出一個頁面級別的配置，由於小程序的每一個頁面均可以有一些單獨的配置：

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

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

export default {
  config: {
    // 注意，頁面級可配置屬性至關於只是`src/main.js`中配置裏的`window`部分
    "navigationBarTitleText": "文章列表頁面"
  }
}

接着，咱們須要實現index.vue頁面組件，它的寫法是最典型的Vue組件寫法。

<template>
  <div class="container" @click="clickHandle">
    <div class="message">{{msg}}</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello'
    }
  },

  methods: {
    clickHandle () {
      this.msg = 'Clicked!!!!!!'
    }
  }
}
</script>

<style scoped>
.message {
  color: red;
  padding: 10px;
  text-align: center;
}
</style>

能夠看到，這個組件徹底看不到小程序寫法的影子，而是所有由Vue開發Web應用的寫法來完成：數據綁定、事件處理、scoped局部樣式、以及使用HTML標籤來構建界面。這樣最大化的保持和網頁應用開發一致，減小了前端人員切換到小程序的學習理解成本，也爲原先使用Vue開發的網頁應用移植到小程序平臺提供了下降遷移成本的可能。

模板部分咱們一般能夠用HTML標籤來寫，好比div、span等，它們會在編譯的時候被自動轉換成小程序的原生組件view、text之類；而那些小程序特有的組件如swiper、rich-text等，能夠直接在模板中使用。

在原生小程序的頁面（Page）中包含了不少頁面的生命週期方法，如onLoad、onUnload、onShow、onHide、onPullDownRefresh等等，mpvue中推薦使用Vue組件生命週期方法，而像onPullDownRefresh、onReachBottom這類特殊功能的生命週期則需直接使用原生的。

回頭再來看，當咱們實現了這個index.vue頁面組件後，其實還缺最後一個步驟，就是須要將這個頁面組件指定爲首頁。若是咱們的小程序只有一個頁面的話，其實也能夠省略這一步，由於mpvue會自動將src/pages目錄下的頁面組件路徑添加到最終編譯出來的小程序配置文件中去（能夠打開dist/app.json文件觀察一下）：

{
  "pages": [
    "pages/index/main"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "第一個小程序",
    "navigationBarTextStyle": "black"
  }
}

可是，大多數狀況下咱們的小程序會由不少個頁面組成，在src/pages目錄下編寫多個頁面組件後，mpvue也會自動把它們都添加進配置文件，可是因爲小程序有一個機制：配置文件中pages數組裏的第一個page路徑會被當作是首頁

若是你指望的首頁組件並無被mpvue添加到第一個路徑的話，就不會被當作首頁顯示。好比有多個頁面，並在dist/app.json裏生成的是下面的序列，則第一個pages/articles/main頁面會被當作首頁：

"pages": [
  "pages/articles/main",
  "pages/authors/main",
  "pages/index/main",
  "pages/kickstart/main"
]

爲了解決這種狀況，咱們須要顯式的去指定首頁。能夠在src/main.js的配置裏，加入這樣一行配置信息：

pages: [
  '^pages/index/main'
]

注意：以上配置中指定爲首頁的路徑前面有個^符號。

加入這行配置以後，pages/index/main老是會在最終生成的dist/app.json中排在第一個位置，成爲首頁。

小結

今天主要了解了做爲一個最簡單的能夠運行的mpvue小程序所應該包含的各個代碼部分，但願你能夠動手實踐一下，理解和掌握這些內容。Good Luck！

 

使用mpvue開發小程序教程（四）