一、mpvue簡介

mpvue是一個使用 Vue.js開發小程式的前端框架。框架基於 Vue.js核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其可以執行在小程式環境中，從而為小程式開發引入了整套 Vue.js 開發體驗。mp 即mini program的縮寫。

二、mpvue快速入門

① 通過腳手架引入mpvue模板

vue 3.0已經不支援vue init命令了，所以需要單獨安裝@vue/cli-init，安裝好之後，就可以按以下操作步驟引入mpvue模板了

npm install -g @vue/cli-init

vue init mpvue/mpvue-quickstart my-project

cd my-project

npm install

npm run dev
 

npm run dev命令會在專案根目錄下生成一個dist目錄，其就是將vue的專案轉換為微信小程式專案

② 搭建小程式的開發環境

微信提供了一個專門微信開發者工具用於開發小程式，需要下載安裝微信開發者工具，同時還需要申請一個小程式ID，即AppID，因為通過微信開發者工具建立小程式專案需要填入AppID，可以在微信公眾平臺申請得到。

③ 除錯專案

通過微信開發者工具啟動微信小程式專案，選擇的專案目錄是mpvue專案的根目錄，而不是生成的dist目錄，由於微信開發者工具不支援.vue檔案的檢視，所以我們還是要用自己的開發工具除錯原始碼。

三、mpvue的一些使用細節

① mpvue的src目錄下和vue一樣，也有一個App.vue根元件

// App.vue

<script>

export default {
 
}
</script>

<style>
page {
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;
}
</style>
 

// main.js

import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'

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

// app.json

{
  "pages": [
    "pages/index/main"
  ],
  "tabBar": {
    ......
  },
  "window": {
    "backgroundColor":"#00BFFF",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "測試",
    "navigationBarTextStyle": "black"
  }
}

② mpvue中定義的頁面都放在src目錄下的pages目錄裡面，一個頁面對應一個資料夾，每個頁面資料夾內需要有一個.vue檔案和main.js檔案，main.js主要做的就是，引入當前頁面對應的.vue，然後作為Vue建構函式的引數建立Vue例項並mount，並且main.js的名稱不能改變，只能是main.

// main.js

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

// add this to handle exception
Vue.config.errorHandler = function (err) {
  if (console && console.error) {
    console.error(err)
  }
}

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

在mpvue中，一個頁面中的.vue檔案的名字雖然可以任意，但是.js和.json檔名字是固定為main的，通常我們.vue檔案也是固定使用index.vue，所有一個頁面中通常固定包含index.vue、main.js、main.json，通過外層的資料夾來區分不同的頁面，而原生小程式中，也是通過外層資料夾來區分不同的頁面，但是資料夾中的四個頁面的名稱可以和外層資料夾相同，也可以不同，但四個檔案必須統一。

③每次新增了頁面，需要重新啟動專案，即重新執行npm run dev.

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

四、微信小程式基礎與常用API

①點選按鈕提示使用者是否授權並獲取使用者資訊

微信小程式給我們的按鈕<button>提供了一些微信開發的能力，其通過給<button>標籤新增一個open-type屬性，表示要給按鈕開放的能力型別，比如getUserInfo，即點選按鈕獲取使用者資訊的能力，我們需要在<button>上通過監聽getuserinfo事件，mpvue在小程式的基礎上進行了封裝，需要通過e.mp.detail.userInfo才能獲取到使用者資訊

<button open-type="getUserInfo" @getuserinfo="getUserInfo">點選開始</button>
<script>
export default {
    getUserInfo(e) {
      console.log(e.mp.detail.userInfo); // 獲取使用者資訊
    }
}
</script>

②wx全域性物件
就像網頁執行在瀏覽器環境一樣，瀏覽器環境會提供一個全域性的window物件，同樣小程式是執行在小程式環境中，小程式環境也會提供一個全域性的wx物件，wx會提供很多api，比如訪問網路(wx.request({}))、頁面跳轉(wx.redirectTo({}))、顯示loading(wx.showLoading({}))、顯示提示(wx.showToast({}))等

③微信小程式中發起網路請求
在小程式環境中不能像瀏覽器環境一個直接提供ajax，而是提供了一個全域性的網路請求api，即wx.request(),在小程式環境中只能使用wx.request()發起網路請求，不能使用axios等常用的請求類庫，並且wx.request()並不存在跨域問題。使用wx.request()的時候，需要傳遞一個請求引數配置物件，request()方法返回結果並不是一個Promise物件，所以不能通過.then()的方式去處理請求結果，而是在請求配置物件中添加了success、fail、complete等回撥函式，在回撥函式中可以獲取到請求的結果，如:

wx.request({
    url: "http://www.baidu.com", // 請求url地址必填
    data: {
        user: "even li"
    },
    method: "get", // 請求方法
    header: {
        "content-type": "application/json" // 預設值
    },
    success(res) {
        console.log(res.data); // 獲取響應資料
    },
    fail(error) {
        console.log(error); // 請求失敗
    }
    complete(res) { // 介面呼叫結束，請求成功或失敗都會執行
        console.log(res); // 如果請求成功則res為響應結果res，如果請求失敗則res為錯誤資訊error
    }
});

需要注意的是，返回狀態碼為404也算請求成功，一般只有網路異常的時候才算請求失敗。

④跳轉頁面非tabBar頁面
如果想要跳轉到某個非tabBar頁面，那麼可以使用一個全域性的api，即wx.redirectTo({})，其作用就是關閉當前頁面，跳轉到應用內的某個頁面。但是不允許跳轉到 tabbar 頁面。需要傳遞一個配置物件，主要屬性為url，即要跳轉頁面的路徑，可帶引數，然後就是success、fail、complete三個回撥函式，請處理跳轉結果，如:

wx.redirectTo({
    url: "../question/main", // 在某個頁面內../相當於pages/
    success() {
    },
    fail() {
    },
    complete() {
    }
});

⑤跳轉到tabBar頁面
在微信小程式中，tabBar頁面是需要特殊的方式跳轉的，即使用wx.switchTab({})的方式，其會跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面，其用法同wx.redirectTo({});

wx.switchTab({
   url: "../learn/main", // 在某個頁面內../相當於pages/
success() {
    },
    fail() {
    },
    complete() {
    }
});

⑥頁面配置檔案
小程式的頁面配置檔案分為全域性配置檔案app.json與即頁面配置main.json. 全域性配置檔案可配置項比較多，整個配置檔案內容要用花括號括起來，也就是說是一個JSON物件，如:

• pages屬性，是一個陣列，用於定義小程式用到的頁面，陣列中每一項對應一個頁面，即路徑+檔名資訊，不需要寫字尾，在mpvue中所有頁面固定使用main，即每個頁面下都會有一個main.js，所以在配置pages時，通常為"pages/頁面名/main"，位於pages陣列第一項表示小程式的初始頁面，即小程式執行時顯示的頁面。
• window屬性，即對小程式的視窗樣式進行配置，其屬性值為一個物件，主要包括backgroundColor(視窗背景顏色，即頁面下拉後漏出的背景視窗顏色)、backgroundTextStyle(設定下拉背景字型、loading圖的樣式，目前只支援dark和light)、navigationBarBackgroundColor(導航欄背景顏色)、navigationBarTextStyle(導航欄標題顏色，目前只支援black和white)、navigationBarTitleText(導航欄標題文字內容)、navigationStyle(值為custom自定義導航欄)

微信小程式設定顏色的時候，只支援十六進位制顏色，不支援RGB格式和顏色英文。

• tarBar屬性，用於配置視窗底部的tabBar，其屬性值為一個物件，主要有color(設定tab未啟用狀態文字的顏色)、selectedColor(設定tab啟用狀態的文字顏色)、borderStyle(設定tabBar上邊框的顏色，目前只支援black和white)、backgroundColor(設定tab的背景顏色)、list(用於配置tab項，最多可配置5項)，list屬性值為一個數組，主要包括text(tab上顯示的文字內容)、iconPath(tab處於未啟用狀態時顯示的圖示路徑)、selectedPath(tab處於啟用狀態時顯示的圖示路徑)、pagePath(tab被點選時要跳轉的頁面路徑，其屬性值為pages中配置的路徑)

頁面配置配置相對於全域性主配置檔案來說要簡單得多，在頁面配置檔案中只能配置視窗的樣式屬性，即只能配置全域性配置檔案中的window屬性中的內容，頁面配置檔案中配置的內容會覆蓋掉全域性配置檔案中window中相同的配置，以決定當前頁面的視窗表現，無需使用window屬性，直接將window配置放到花括號中即可。

⑦小程式頁面與Vue生命週期

小程式給頁面提供了onLoad(頁面載入)、onShow(頁面顯示，但還未渲染完成)、onReady(頁面渲染完成)、onHide(頁面隱藏)、onUnload(頁面解除安裝)，mpvue將小程式提供的頁面生命週期和vue的生命週期結合在了一起，也就是說使用mpvue開發小程式，可以同時使用小程式的生命週期和vue的生命週期，其順序為:beforeCreate --> created --> onLoad --> onShow --> onReady --> beforeMount --> mounted。即Vue首先例項化然後頁面開始載入、顯示、渲染，頁面渲染完成後Vue例項開始掛載。

⑧導航到某個頁面
所謂導航到某個頁面，就是跳轉到某個頁面，但是其會保留當前頁面，跳轉的目的頁面導航欄左側中自帶一個返回按鈕，點選可以回到之前的頁面，但是這個跳轉的目的頁面不能是tabbar中的頁面，其使用的是wx.navigateTo({})

wx.navigateTo({
    url: "../myLesson/main" // 導航到我的課程頁面，目標頁面自帶返回按鈕，點選可返回之前的頁面
});

⑨動態設定頁面導航欄標題
當我們點選列表中的某個具體項時，通常需要在其對應頁面動態顯示出當前點選項的具體導航欄標題，微信小程式提供了wx.setNavigationBarTitle({})用於動態設定導航欄欄標題，同樣有success、fail、complete三個回撥函式，如:

wx.setNavigationBarTitle({
     title: "動態標題內容",
     success() {
     },
     fail() {
     },
     complete() {
     }
});

⑩本地快取資料
微信小程式提供了setStorage({})方法，可以將資料儲存在本地快取中指定的 key 中，除非使用者主動刪除或因儲存空間原因被系統清理，否則資料都一直可用。單個 key 允許儲存的最大資料長度為 1MB，所有資料儲存上限為 10MB。如:

wx.setStorage({
    key:"key",
    data:"value"
});

同樣，微信小程式也提供了getStorage({})方法，用於獲取對應key中儲存的資料，其還有success、fail、complete三個回撥函式，如:

wx.getStorage({
    key: "key",
    success (res) { // 成功獲取到對應key中的資料
    },
    fail() { // 未成功獲取到對應key中的資料
    },
    complete() { // 獲取對應key資料結束，不管成功還是失敗都會執行
    }
});

getStorage()和setStorage()方法本身是非同步的，但是微信小程式提供了對應的同步方法，即getStorageSync("key")和setStorageSync("key", "value");

⑪輪播圖元件
微信小程式提供了一個<swiper>輪播圖元件，其中只可放置swiper-item元件，swiper有一些常用的屬性，如:

• indicator-dots: 是否顯示面板指示點;
• autoplay: 是否自動切換;
• interval: 設定自動切換時間間隔;
• duration: 滑動動畫時長;
• circular: 是否迴圈播放;
• indicator-active-color: 設定當前選中的指示點顏色;

<swiper :indicator-dots="indicatorDots" 
        :autoplay="autoPlay" 
        :interval="interval" 
        :duration="duration" 
        :circular="circular" 
        indicator-active-color="rgba(255,255,255, 0.6)">
        <block v-for="(item, index) in imgUrls" :key="index">
            <swiper-item>
                <img :src="item" class="slide-item"/>
            </swiper-item>
        </block>
</swiper>

當然，<swiper>元件不僅僅能實現圖片的輪播，還可以實現其他輪播，比如列表內容的輪播(導航和內容的聯動)，我們不給其新增indicator-dots、autoplay、interval、duration、circular等屬性，而是通過手進行滑動，swiper元件還有一個current屬性，屬性值為滑動塊的索引值，用於顯示對應的滑動item，從而實現導航和內容的聯動，即點選導航，自動切換到對應內容。swiper元件也提供了change事件，當我們手動滑動滑動item的時候，就會觸發change事件，可以在事件物件中拿到對應滑塊的索引，從而更新導航位置，實現滑動內容，自動高亮導航位置。

⑫可滾動區域元件
微信提供了一個<scroll-view>可滾動區域元件，用於設定該區域中的內容是可以滾動的，通常用於實現可滾動的導航標籤欄，其常用屬性為:

• scroll-x: 是否允許橫向滾動;
• scroll-y: 是否允許縱向滾動;
• scroll-into-view: 屬性值為對應滾動item的id，表示自動滾動到對應id元素位置;
• scroll-with-animation: 在設定滾動條位置時使用動畫過渡;

要實現點選某個滾動item後，自動滾動到對應滾動item位置，那麼需要給每個滾動item新增一個id，然後動態改變scroll-into-view的值為對應的滾動item的id即可。

<scroll-view class="btns_wrap" 
             scroll-x :scroll-into-view="toChildView" 
             scroll-with-animation>
    <span :class="{active: currentIndex === index}" 
          class="btn_scroll" 
          v-for="(item, index) in allLessons" 
          :key="index" 
          :id="item.id" 
          @click="switchItem(index)">
          {{item.name}}
    </span>
</scroll-view>