我們熟悉了一下通過vue-cli生成的mpvue工程代碼骨架的基本結(jié)構(gòu)杆融，大致了解了每一個部分的代碼到底要放到何處燃乍。從本文起我們就開始涉及真正的編碼部分唆樊，學(xué)習(xí)使用Vue的語法去編寫小程序。

image

為了清楚起見刻蟹，我們將要對vue-cli生成的代碼做一個清理工作逗旁，具體如下：

• 刪掉src/components、src/pages舆瘪、src/utils三個目錄下的所有代碼文件

• 將src/App.vue文件中的內(nèi)容重置成：

<script>
export default {}
</script>

<style>
</style>

• 將src/main.js文件中的內(nèi)容重置成：

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'
    }
  }
}

至此片效，我們的代碼就成了一個小程序頁面都沒有的初始狀態(tài)红伦。

程序入口

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

有了這三個部分淀衣，才能成功運(yùn)行起一個最簡單的小程序昙读。

app.json

app.json是小程序的全局配置文件，其包含了小程序的頁面文件路徑配置膨桥、窗口的全局樣式信息蛮浑、底部選項卡式菜單欄的配置，以及一些小程序網(wǎng)絡(luò)超時的配置等等只嚣。app.json的配置詳情我們可以查閱參考小程序的官方文檔來作進(jìn)一步了解沮稚。那么，在mpvue中我們?nèi)绾蝸碜雠c之等價的配置呢介牙？

其實(shí)在src/main.js中壮虫，我們就可以完整的進(jìn)行這些信息的配置，具體可以查看該文件的最底部代碼：

export default {
  // 這部分相當(dāng)于原生小程序的 app.json
  config: {
    pages: [],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: '第一個小程序',
      navigationBarTextStyle: 'black'
    }
  }
}

在該代碼中通過export default導(dǎo)出的對象的config屬性下的值环础，就是這些小程序的配置信息了囚似。

app.js

app.js中包含了小程序的各種原生生命周期方法，如onLaunch线得、onShow等等饶唤。而在mpvue中，它使用了一個簡單的Vue組件App.vue來實(shí)現(xiàn)等價的功能贯钩。我們在這個App.vue組件中可以編寫小程序的生命周期方法（通常使用Vue的生命周期方法募狂，但也兼容原生的生命周期方法），也可以在其中加入小程序的全局樣式（等價于原生方式下的app.wxss）：

<script>
/* 這部分相當(dāng)于原生小程序的 app.js */
export default {
  created () {
    console.log('miniapp created!!!')
  }
}
</script>

<style>
/* 這部分相當(dāng)于原生小程序的 app.wxss */
.container {
  background-color: #cccccc;
}
</style>

接著角雷，這個App.vue組件被src/main.js引入并被設(shè)置了一個mpType的屬性值祸穷，其值為app。這個值是為了與后面要講的小程序頁面組件所區(qū)分開來勺三，因為小程序頁面組件和這個App.vue組件的寫法和引入方式是一致的雷滚，為了區(qū)分兩者，需要設(shè)置mpType值吗坚。引入這個App.vue組件后祈远，會用它作為參數(shù)來創(chuàng)建一個Vue的實(shí)例，并調(diào)用$mount()方法加載商源。下面是這個過程的關(guān)鍵代碼行：

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

首頁车份、以及其他頁面

每個小程序都需要至少有一個頁面，第一個展示的頁面被叫做首頁牡彻。因為前面已經(jīng)把所有的頁面代碼都刪完了扫沼，所以我們現(xiàn)在要新建一個首頁。在src/pages目錄下，我們新建一個名為index的子目錄（請遵循每個頁面放入一個子目錄的良好習(xí)慣）充甚，然后在該子目錄下以政，新建2個文件：一個用于實(shí)現(xiàn)頁面主體功能的index.vue組件霸褒，另一個則用于將這個頁面組件生成Vue實(shí)例并加載的main.js伴找。以后的每一個mpvue頁面組件都會擁有這樣的結(jié)構(gòu)。

image

然后在main.js中編寫如下代碼废菱，非常簡單的一段代碼技矮，它的功能是引入index.vue并創(chuàng)建Vue實(shí)例：

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

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

當(dāng)然了，你也可以像在src/main.js中一樣去導(dǎo)出一個頁面級別的配置殊轴，因為小程序的每個頁面都可以有一些單獨(dú)的配置：

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

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

export default {
  config: {
    // 注意衰倦，頁面級可配置屬性相當(dāng)于只是`src/main.js`中配置里的`window`部分
    "navigationBarTitleText": "文章列表頁面"
  }
}

接著，我們需要實(shí)現(xiàn)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>

可以看到，這個組件完全看不到小程序?qū)懛ǖ挠白幽跷模侨坑蒝ue開發(fā)Web應(yīng)用的寫法來完成：數(shù)據(jù)綁定驻襟、事件處理、scoped局部樣式芋哭、以及使用HTML標(biāo)簽來構(gòu)建界面沉衣。這樣最大化的保持和網(wǎng)頁應(yīng)用開發(fā)一致，減少了前端人員切換到小程序的學(xué)習(xí)理解成本减牺，也為原先使用Vue開發(fā)的網(wǎng)頁應(yīng)用移植到小程序平臺提供了降低遷移成本的可能豌习。

模板部分我們通常可以用HTML標(biāo)簽來寫拔疚，比如div肥隆、span等，它們會在編譯的時候被自動轉(zhuǎn)換成小程序的原生組件view稚失、text之類栋艳；而那些小程序特有的組件如swiper、rich-text等墩虹，可以直接在模板中使用嘱巾。

在原生小程序的頁面（Page）中包含了很多頁面的生命周期方法，如onLoad诫钓、onUnload旬昭、onShow、onHide菌湃、onPullDownRefresh等等问拘，mpvue中推薦使用Vue組件生命周期方法，而像onPullDownRefresh、onReachBottom這類特殊功能的生命周期則需直接使用原生的骤坐。

回頭再來看绪杏，當(dāng)我們實(shí)現(xiàn)了這個index.vue頁面組件后，其實(shí)還缺最后一個步驟纽绍，就是需要將這個頁面組件指定為首頁蕾久。如果我們的小程序只有一個頁面的話，其實(shí)也可以省略這一步拌夏，因為mpvue會自動將src/pages目錄下的頁面組件路徑添加到最終編譯出來的小程序配置文件中去（可以打開dist/app.json文件觀察一下）：

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

但是僧著，大多數(shù)情況下我們的小程序會由很多個頁面組成，在src/pages目錄下編寫多個頁面組件后障簿，mpvue也會自動把它們都添加進(jìn)配置文件盹愚，但是由于小程序有一個機(jī)制：

配置文件中pages數(shù)組里的第一個page路徑會被當(dāng)做是首頁

如果你期望的首頁組件并沒有被mpvue添加到第一個路徑的話，就不會被當(dāng)做首頁顯示站故。比如有多個頁面皆怕，并在dist/app.json里生成的是下面的序列，則第一個pages/articles/main頁面會被當(dāng)做首頁：

"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中排在第一個位置寸爆，成為首頁礁鲁。

小結(jié)

今天主要了解了作為一個最簡單的可以運(yùn)行的mpvue小程序所應(yīng)該包含的各個代碼部分，希望你可以動手實(shí)踐一下赁豆，理解和掌握這些內(nèi)容仅醇。Good Luck！

作者：一斤代碼
鏈接：http://www.reibang.com/p/2c363ea29cda
來源：簡書
著作權(quán)歸作者所有魔种。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)析二，非商業(yè)轉(zhuǎn)載請注明出處。