摘要：在這一步，實(shí)例已完成以下的配置數(shù)據(jù)觀(guān)測(cè)，屬性和方法的運(yùn)算，事件回調(diào)?？梢灾苯訉?xiě)等標(biāo)簽的寫(xiě)法之前會(huì)的工程師上手框架的成本較低

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

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

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)目依賴(lài)包
5.npm start || npm run dev 啟動(dòng)初始化項(xiàng)目

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

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

頁(yè)面需要文件介紹

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

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

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

src源文件

自動(dòng)打包后的dist文件

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

{
"navigationBarTitleText": "主頁(yè)",
"navigationBarBackgroundColor": "#8ed145"
}

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

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

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

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

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

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

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

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

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

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

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

onShow: 小程序啟動(dòng)獲取后臺(tái)進(jìn)入前臺(tái)

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

后臺(tái)

onLoad 監(jiān)聽(tīng)頁(yè)面加載

onShow: 頁(yè)面顯示

onReady: 監(jiān)聽(tīng)頁(yè)面初始化渲染完成

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

onUnload: 監(jiān)聽(tīng)頁(yè)面卸載

onPullDownRefresh: 監(jiān)聽(tīng)用戶(hù)下載動(dòng)作

onReachBottom: 監(jiān)聽(tīng)用戶(hù)上拉觸底操作

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

onPageScroll: 頁(yè)面滾動(dòng)

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

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

vue-router

在mpvue中對(duì)vue-router的支持不好,問(wèn)題較多

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

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

axios

小程序中不支持使用axios，會(huì)報(bào)錯(cuò)： XMLHttpRequest is not a constructor

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

解決方法: 使用其他庫(kù): 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)頁(yè)面公共狀態(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本地存儲(chǔ)
Mpvue
1)在組件中通過(guò)getApp無(wú)法拿到對(duì)應(yīng)的數(shù)據(jù)
2)mpvue中支持vuex，所以可以使用vuex集中管理狀態(tài)
3)vuex幾個(gè)重要的概念:
a.store對(duì)象
b.dispatch() 分發(fā)狀態(tài)
c.actions 攜帶參與修改狀態(tài)的數(shù)據(jù)，并觸發(fā)mutations
d.mutations用于修改狀態(tài)，并將狀態(tài)交給store對(duì)象
e.getter 用于動(dòng)態(tài)計(jì)算狀態(tài)

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