mpVue學習筆記整理

第一章： mpVue(Vue in Mini Program)

---

1.1 簡介

1. 美團工程師推出的基於Vue.js封裝的用於開發小程序的框架
2. 融合了原生小程序和Vue.js的特色
3. 可徹底組件化開發

1.2 特色

1. 組件化開發
2. 完成的Vue.js開發體驗(前提是熟悉Vue)
3. 可以使用Vuex管理狀態
4. Webpack構建項目
5. 最終H5轉換工具將項目編譯成小程序識別的文件

1.3 初始化項目

1. npm install vue-cli -g 下載vue腳手架
2. vue init mpvue/mpvue-quickstart my-project 初始化項目
3. cd my-project 進入項目根目錄
4. npm install 根據package.json安裝項目依賴包
5. npm start || npm run dev 啓動初始化項目

第二章 開啓項目

---

2.1 註冊小程序

1. src/app.json 全局配置文件
2. src/App.vue 等同於原生小程序中的app.js, 可再次寫小程序應用實例的聲明週期 函數 || 全局樣式(style中編寫)
3. main.js應用入口文件, 聲明組件類型，掛載組件

2.2 入口文件介紹

1. import Vue from 'vue'
2. import App from './App.vue'
3. // Vue.config.productionTip = false 默認爲false，用於啓動項目的時候提示信息，設置爲false關閉提示 Vue.config.productionTip = true
4. // 這個值是爲了與後面要講的小程序頁面組件所區分開來，由於小程序頁面組件和這個App.vue組件的寫法和引入方式是一致的，爲了區分二者，須要設置mpType值 App.mpType = 'app'
5. // 生成Vue實例 const app = new Vue(App)
6. // 掛載組件 app.$mount()

2.3 編寫頁面 pages/index

2.3.1 頁面須要文件介紹

1. index.vue 等同於原生中的wxml + wxss + js

2. main.js 當前組件頁面的入口文件，用於生成當前組件實例，並掛載組件

3. main.json 當前頁面的局部配置文件(注意：index.vue組件最終會被轉化爲main.wxml以及main.wxss文件, 因此當前的json文件需命名main)

   4. src源文件

5. 自動打包後的dist文件

2.4 注意事項

1. 在每一個組件中都須要使用： 組件實例.$mount() 去掛載當前組件,不然對應的頁面不能生效


2. npm run dev 每次會從新打包dist文件，測試只能在小程序工具上


3. mpvue中綁定小程序原生事件不能使用bind + 事件名，須要使用@事件名 且要定義在methods中不然不生效


4. 新建立的頁面須要從新執行: npm run dev才能將新的頁面打包到dist文件中

2.5 vue實例聲明週期 && 小程序聲明週期

2.5.1 vue實例聲明週期

1. beforeCreate 實例初始化以後，數據觀測(data observer) 和 event/watcher 事件配置以前被調用。
2. created 實例已經建立完成以後被調用。在這一步，實例已完成如下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。
3. beforeMount 在掛載開始以前被調用：相關的 render 函數首次被調用。
4. mounted el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用該鉤子。
5. beforeUpdate 數據更新時調用，發生在虛擬 DOM 從新渲染和打補丁以前。 你能夠在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。
6. updated 因爲數據更改致使的虛擬 DOM 從新渲染和打補丁，在這以後會調用該鉤子。
7. beforeDestroy 實例銷燬以前調用。在這一步，實例仍然徹底可用。 8.destroyed Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。 該鉤子在服務器端渲染期間不被調用。

2.5.2 小程序應用App實例聲明週期

1. onLaunch: 小程序應用初始化
2. onShow: 小程序啓動獲取後臺進入前臺
3. onHide: 小程序應用從前臺進入後臺

 

2.5.3 小程序頁面Page實例生命週期

1. onLoad 監聽頁面加載


2. onShow: 頁面顯示


3. onReady: 監聽頁面初始化渲染完成


4. onHide: 監聽頁面隱藏，注意當前頁面實例依然存活


5. onUnload: 監聽頁面卸載


6. onPullDownRefresh: 監聽用戶下載動做


7. onReachBottom: 監聽用戶上拉觸底操做


8. onShareAppMessage: 用戶點擊右上角分享功能


9. onPageScroll: 頁面滾動


10. onTabItemTap： 當前是 tab 頁時，點擊 tab 時觸發

2.5.4 注意事項

除了 Vue 自己的生命週期外，mpvue 還兼容了小程序生命週期，這部分生命週期鉤子的來源於微信小程序的 Page， 除特殊狀況外，不建議使用小程序的生命週期鉤子。

第三章 mpvue中使用vue-router && axios

---

3.1 vue-router

1. 在mpvue中對vue-router的支持很差,問題較多

2. 進行頁面跳轉的是可以使用小程序提供的API

   (1) wx.navigateTo() 保留當前頁面，可回退

   (2) wx.redirectTo() 不保留，不能回退

   (3) wx.switchTab() 使用於tabBar頁面

3.2 axios

1. 小程序中不支持使用axios，會報錯： XMLHttpRequest is not a constructor

2. 緣由: 小程序的環境和瀏覽器的環境不同

3. 解決方法: 使用其餘庫: flyio

3.3 fly使用教程

3.3.1 gitHub地址

https://github.com/wendux/fly

3.3.2 使用步驟

1) 下載: npm install flyio

2) 引入: import Fly from ‘flyio/dist/npm/wx’ 注意flyio支持不少環境下使用

3) 生成實例: let fly = new Fly

4) 配置: Vue.prototype.$fly = fly

5) 使用: 組件中 this.$fly.get()

第四章 mpvue VS 小程序 狀態管理

---

1.1 原生小程序

1) 在data中初始化狀態數據

2) 修改狀態: this.setData({key: value})

3) 頁面公共狀態：

a. App程序實例的data中定義

b. 獲取狀態數據: let datas = getApp()

c. 修改狀態數據: datas.data.xxx = value

4) 或者利用storage本地存儲

1.2 Mpvue

1) 在組件中經過getApp沒法拿到對應的數據

2) mpvue中支持vuex，因此可使用vuex集中管理狀態

3) vuex幾個重要的概念:

a. store對象

b. dispatch() 分發狀態

c. actions 攜帶參與修改狀態的數據，並觸發mutations

d. mutations用於修改狀態，並將狀態交給store對象

e. getter 用於動態計算狀態

第五章 原生小程序 VS mpvue 對比總結

---

1) 原生小程序運行更穩定些, 兼容性好，mpvue可能在某些方面存在兼容性問題（vue-router）

2) mpvue支持vue組件化開發. 效率更高，功能更強大(雙向數據綁定, vuex)

3) mpvue可基於webpack組件化, 工程化開發

4) 原生不支持npm安裝包，不支持css預處理

5) 支持 computed 計算屬性和 watcher 監聽器；模板語法中只支持簡單的 js 表達式。能夠直接寫 div 、span 等標籤 computed 的寫法

6) 以前會vue的工程師上手mpvue框架的成本較低