在上一篇文章中，我們熟悉了一下通過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()

接著，我們需要實現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！

作者：一斤程式碼
連結：https://www.jianshu.com/p/2c363ea29cda
來源：簡書