mpvue開發小程序教程（三）
- 2019 年 10 月 7 日
- 筆記
【注意事項】由於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 = falseApp.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' } }}
在該代碼中通過 exportdefault導出的對象的 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！
