­

mpvue開發小程式教程(三)

  • 2019 年 10 月 7 日
  • 筆記

【注意事項】由於mpvue也在不斷的開發演進,大家在不同時間段使用的時候,可能會遇到和文中的做法不一樣的地方。請關注文章的評論區中大家的討論,尋找解決方案,或者及時查閱官方文檔,避免陷入版本更新的坑裡哦。

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

為了清楚起見,我們將要對vue-cli生成的程式碼做一個清理工作,具體如下:

  • 刪掉 src/componentssrc/pagessrc/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中包含了小程式的各種原生生命周期方法,如 onLaunchonShow等等。而在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標籤來寫,比如 divspan等,它們會在編譯的時候被自動轉換成小程式的原生組件 viewtext之類;而那些小程式特有的組件如 swiperrich-text等,可以直接在模板中使用。

在原生小程式的頁面(Page)中包含了很多頁面的生命周期方法,如 onLoadonUnloadonShowonHideonPullDownRefresh等等,mpvue中推薦使用Vue組件生命周期方法,而像 onPullDownRefreshonReachBottom這類特殊功能的生命周期則需直接使用原生的。

回頭再來看,當我們實現了這個 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!