詳解 mpvue 小程序框架 及和原生的差別

簡介

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

特色

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

初始化項目

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 啓動初始化項目

註冊小程序

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

入口文件介紹

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

編寫頁面 pages/index

頁面須要文件介紹

1. index.vue 等同於原生中的wxml + wxss + js
2. main.js 當前組件頁面的入口文件，用於生成當前組件實例，並掛載組件
3. main.json 當前頁面的局部配置文件(注意：index.vue組件最終會被轉化爲main.wxml以及main.wxss文件, 因此當前的json文件需命名main)
4. src源文件

1. 自動打包後的dist文件

index/main.js

import Vue from 'vue'
import Index from './index.vue'
const index = new Vue(Index)
index.$mount()

index/main.json

{
"navigationBarTitleText": "主頁",
"navigationBarBackgroundColor": "#8ed145"
}

注意事項

1.在每一個組件中都須要使用： 組件實例.$mount() 去掛載當前組件,不然對應的頁面不能生效
2.npm run dev 每次會從新打包dist文件，測試只能在小程序工具上
3.mpvue中綁定小程序原生事件不能使用bind + 事件名，須要使用@事件名 且要定義在methods中不然不生效
4.新建立的頁面須要從新執行: npm run dev才能將新的頁面打包到dist文件中

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

**vue實例聲明週期**

1. beforeCreate 實例初始化以後，數據觀測(data observer) 和 event/watcher 事件配置以前被調用。

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

8.destroyed Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。 該鉤子在服務器端渲染期間不被調用。

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

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

後臺

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

1. onLoad 監聽頁面加載

1. onShow: 頁面顯示
2. onReady: 監聽頁面初始化渲染完成
3. onHide: 監聽頁面隱藏，注意當前頁面實例依然存活
4. onUnload: 監聽頁面卸載
5. onPullDownRefresh: 監聽用戶下載動做
6. onReachBottom: 監聽用戶上拉觸底操做
7. onShareAppMessage: 用戶點擊右上角分享功能
8. onPageScroll: 頁面滾動
9. onTabItemTap： 當前是 tab 頁時，點擊 tab 時觸發

注意事項

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

mpvue中使用vue-router && axios

vue-router

1. 在mpvue中對vue-router的支持很差,問題較多
2. 進行頁面跳轉的是可以使用小程序提供的API

(1)wx.navigateTo() 保留當前頁面，可回退
(2)wx.redirectTo() 不保留，不能回退
(3)wx.switchTab() 使用於tabBar頁面

axios

1. 小程序中不支持使用axios，會報錯： XMLHttpRequest is not a constructor
2. 緣由: 小程序的環境和瀏覽器的環境不同
3. 解決方法: 使用其餘庫: flyio

fly使用教程

gitHub地址
https://github.com/wendux/fly
使用步驟
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)在data中初始化狀態數據
2)修改狀態: this.setData({key: value})
3)頁面公共狀態：
a.App程序實例的data中定義
b.獲取狀態數據: let datas = getApp()
c.修改狀態數據: datas.data.xxx = value
4)或者利用storage本地存儲
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框架的成本較低