摘要：在這一步，實(shí)例已完成以下的配置數(shù)據(jù)觀測，屬性和方法的運(yùn)算，事件回調(diào)。可以直接寫等標(biāo)簽的寫法之前會的工程師上手框架的成本較低

1.美團(tuán)工程師推出的基于Vue.js封裝的用于開發(fā)小程序的框架
2.融合了原生小程序和Vue.js的特點(diǎn)
3.可完全組件化開發(fā)

1.組件化開發(fā)
2.完成的Vue.js開發(fā)體驗(yàn)(前提是熟悉Vue)
3.可使用Vuex管理狀態(tài)
4.Webpack構(gòu)建項(xiàng)目
5.最終H5轉(zhuǎn)換工具將項(xiàng)目編譯成小程序識別的文件

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

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

import Vue from "vue"
import App from "./App.vue"
// Vue.config.productionTip = false 默認(rèn)為false，用于啟動項(xiàng)目的時候提示信息，設(shè)置為false關(guān)閉提示
Vue.config.productionTip = true
// 這個值是為了與后面要講的小程序頁面組件所區(qū)分開來，因?yàn)樾〕绦蝽撁娼M件和這個App.vue組件的寫法和引入方式是一致的，為了區(qū)分兩者，需要設(shè)置mpType值
App.mpType = "app"
// 生成Vue實(shí)例
const app = new Vue(App)
// 掛載組件
app.$mount()

頁面需要文件介紹

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

main.js 當(dāng)前組件頁面的入口文件，用于生成當(dāng)前組件實(shí)例，并掛載組件

main.json 當(dāng)前頁面的局部配置文件(注意：index.vue組件最終會被轉(zhuǎn)化為main.wxml以及main.wxss文件, 所以當(dāng)前的json文件需命名main)

src源文件

自動打包后的dist文件

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

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

1.在每個組件中都需要使用： 組件實(shí)例.$mount() 去掛載當(dāng)前組件,否則對應(yīng)的頁面不能生效
2.npm run dev 每次會重新打包dist文件，測試只能在小程序工具上
3.mpvue中綁定小程序原生事件不能使用bind + 事件名，需要使用@事件名 且要定義在methods中否則不生效
4.新創(chuàng)建的頁面需要重新執(zhí)行: npm run dev才能將新的頁面打包到dist文件中

**vue實(shí)例聲明周期**

beforeCreate 實(shí)例初始化之后，數(shù)據(jù)觀測(data observer) 和 event/watcher 事件配置之前被調(diào)用。

created 實(shí)例已經(jīng)創(chuàng)建完成之后被調(diào)用。在這一步，實(shí)例已完成以下的配置：數(shù)據(jù)觀測(data observer)，屬性和方法的運(yùn)算， watch/event 事件回調(diào)。然而，掛載階段還沒開始，$el 屬性目前不可見。

beforeMount 在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用。

mounted el 被新創(chuàng)建的 vm.$el 替換，并掛載到實(shí)例上去之后調(diào)用該鉤子。

beforeUpdate 數(shù)據(jù)更新時調(diào)用，發(fā)生在虛擬 DOM 重新渲染和打補(bǔ)丁之前。 你可以在這個鉤子中進(jìn)一步地更改狀態(tài)，這不會觸發(fā)附加的重渲染過程。

updated 由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在這之后會調(diào)用該鉤子。

beforeDestroy 實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。

8.destroyed Vue 實(shí)例銷毀后調(diào)用。調(diào)用后，Vue 實(shí)例指示的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除，所有的子實(shí)例也會被銷毀。 該鉤子在服務(wù)器端渲染期間不被調(diào)用。

onLaunch: 小程序應(yīng)用初始化

onShow: 小程序啟動獲取后臺進(jìn)入前臺

onHide: 小程序應(yīng)用從前臺進(jìn)入

后臺

onLoad 監(jiān)聽頁面加載

onShow: 頁面顯示

onReady: 監(jiān)聽頁面初始化渲染完成

onHide: 監(jiān)聽頁面隱藏，注意當(dāng)前頁面實(shí)例依然存活

onUnload: 監(jiān)聽頁面卸載

onPullDownRefresh: 監(jiān)聽用戶下載動作

onReachBottom: 監(jiān)聽用戶上拉觸底操作

onShareAppMessage: 用戶點(diǎn)擊右上角分享功能

onPageScroll: 頁面滾動

onTabItemTap： 當(dāng)前是 tab 頁時，點(diǎn)擊 tab 時觸發(fā)

除了 Vue 本身的生命周期外，mpvue 還兼容了小程序生命周期，這部分生命周期鉤子的來源于微信小程序的 Page， 除特殊情況外，不建議使用小程序的生命周期鉤子。

vue-router

在mpvue中對vue-router的支持不好,問題較多

進(jìn)行頁面跳轉(zhuǎn)的是可使用小程序提供的API

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

axios

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

原因: 小程序的環(huán)境和瀏覽器的環(huán)境不一樣

解決方法: 使用其他庫: flyio

gitHub地址
https://github.com/wendux/fly
使用步驟
1)下載: npm install flyio
2)引入: import Fly from ‘flyio/dist/npm/wx’ 注意flyio支持很多環(huán)境下使用
3)生成實(shí)例: let fly = new Fly
4)配置: Vue.prototype.$fly = fly
5)使用: 組件中 this.$fly.get()

**原生小程序**

1)在data中初始化狀態(tài)數(shù)據(jù)
2)修改狀態(tài): this.setData({key: value})
3)頁面公共狀態(tài)：
a.App程序?qū)嵗膁ata中定義
b.獲取狀態(tài)數(shù)據(jù): let datas = getApp()
c.修改狀態(tài)數(shù)據(jù): datas.data.xxx = value
4)或者利用storage本地存儲
Mpvue
1)在組件中通過getApp無法拿到對應(yīng)的數(shù)據(jù)
2)mpvue中支持vuex，所以可以使用vuex集中管理狀態(tài)
3)vuex幾個重要的概念:
a.store對象
b.dispatch() 分發(fā)狀態(tài)
c.actions 攜帶參與修改狀態(tài)的數(shù)據(jù)，并觸發(fā)mutations
d.mutations用于修改狀態(tài)，并將狀態(tài)交給store對象
e.getter 用于動態(tài)計算狀態(tài)

1)原生小程序運(yùn)行更穩(wěn)定些, 兼容性好，mpvue可能在某些方面存在兼容性問題（vue-router）
2)mpvue支持vue組件化開發(fā). 效率更高，功能更強(qiáng)大(雙向數(shù)據(jù)綁定, vuex)
3)mpvue可基于webpack組件化, 工程化開發(fā)
4)原生不支持npm安裝包，不支持css預(yù)處理
5)支持 computed 計算屬性和 watcher 監(jiān)聽器；模板語法中只支持簡單的 js 表達(dá)式。可以直接寫 div 、span 等標(biāo)簽?
computed 的寫法
6)之前會vue的工程師上手mpvue框架的成本較低