資訊專欄INFORMATION COLUMN
摘要：在這一步，實例已完成以下的配置數據觀測，屬性和方法的運算，事件回調。可以直接寫等標簽的寫法之前會的工程師上手框架的成本較低
簡介
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()
頁面需要文件介紹
index.vue 等同于原生中的wxml + wxss + js
main.js 當前組件頁面的入口文件，用于生成當前組件實例，并掛載組件
main.json 當前頁面的局部配置文件(注意：index.vue組件最終會被轉化為main.wxml以及main.wxss文件, 所以當前的json文件需命名main)
src源文件
自動打包后的dist文件
index/main.jsimport Vue from "vue"
import Index from "./index.vue"
const index = new Vue(Index)
index.$mount()
{
"navigationBarTitleText": "主頁",
"navigationBarBackgroundColor": "#8ed145"
}
1.在每個組件中都需要使用： 組件實例.$mount() 去掛載當前組件,否則對應的頁面不能生效
2.npm run dev 每次會重新打包dist文件，測試只能在小程序工具上
3.mpvue中綁定小程序原生事件不能使用bind + 事件名，需要使用@事件名 且要定義在methods中否則不生效
4.新創建的頁面需要重新執行: npm run dev才能將新的頁面打包到dist文件中
**vue實例聲明周期**
beforeCreate 實例初始化之后，數據觀測(data observer) 和 event/watcher 事件配置之前被調用。
created 實例已經創建完成之后被調用。在這一步，實例已完成以下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。
beforeMount 在掛載開始之前被調用：相關的 render 函數首次被調用。
mounted el 被新創建的 vm.$el 替換，并掛載到實例上去之后調用該鉤子。
beforeUpdate 數據更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。 你可以在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。
updated 由于數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鉤子。
beforeDestroy 實例銷毀之前調用。在這一步，實例仍然完全可用。
8.destroyed Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。 該鉤子在服務器端渲染期間不被調用。
小程序應用App實例聲明周期onLaunch: 小程序應用初始化
onShow: 小程序啟動獲取后臺進入前臺
onHide: 小程序應用從前臺進入
后臺
小程序頁面Page實例生命周期onLoad 監聽頁面加載
onShow: 頁面顯示
onReady: 監聽頁面初始化渲染完成
onHide: 監聽頁面隱藏，注意當前頁面實例依然存活
onUnload: 監聽頁面卸載
onPullDownRefresh: 監聽用戶下載動作
onReachBottom: 監聽用戶上拉觸底操作
onShareAppMessage: 用戶點擊右上角分享功能
onPageScroll: 頁面滾動
onTabItemTap： 當前是 tab 頁時，點擊 tab 時觸發
注意事項除了 Vue 本身的生命周期外，mpvue 還兼容了小程序生命周期，這部分生命周期鉤子的來源于微信小程序的 Page， 除特殊情況外，不建議使用小程序的生命周期鉤子。
mpvue中使用vue-router && axiosvue-router
在mpvue中對vue-router的支持不好,問題較多
進行頁面跳轉的是可使用小程序提供的API
(1)wx.navigateTo() 保留當前頁面，可回退
(2)wx.redirectTo() 不保留，不能回退
(3)wx.switchTab() 使用于tabBar頁面
axios
小程序中不支持使用axios，會報錯： XMLHttpRequest is not a constructor
原因: 小程序的環境和瀏覽器的環境不一樣
解決方法: 使用其他庫: 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()
**原生小程序**
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 用于動態計算狀態
1)原生小程序運行更穩定些, 兼容性好，mpvue可能在某些方面存在兼容性問題（vue-router）
2)mpvue支持vue組件化開發. 效率更高，功能更強大(雙向數據綁定, vuex)
3)mpvue可基于webpack組件化, 工程化開發
4)原生不支持npm安裝包，不支持css預處理
5)支持 computed 計算屬性和 watcher 監聽器；模板語法中只支持簡單的 js 表達式。可以直接寫 div 、span 等標簽?
computed 的寫法
6)之前會vue的工程師上手mpvue框架的成本較低
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109716.html
摘要：業內開發框架層出不窮，，，等等，都在朝著更快，更強大的方向發展，有統一微信支付寶百度和頭條小程序的大趨勢。最近升級為版本，支持微信支付寶百度和頭條小程序。 原文鏈接 最近小程序的發展越來越火了，作為各個產品線的extra服務入口，以輕便、快速、強大的社交鏈吸引著大量的用戶和開發者。業內開發框架層出不窮，wepy，mpvue，taro等等，都在朝著更快，更強大的方向發展，有統一 H5、微...
摘要：業內開發框架層出不窮，，，等等，都在朝著更快，更強大的方向發展，有統一微信支付寶百度和頭條小程序的大趨勢。最近升級為版本，支持微信支付寶百度和頭條小程序。 原文鏈接 最近小程序的發展越來越火了，作為各個產品線的extra服務入口，以輕便、快速、強大的社交鏈吸引著大量的用戶和開發者。業內開發框架層出不窮，wepy，mpvue，taro等等，都在朝著更快，更強大的方向發展，有統一 H5、微...
摘要：目前支持哪些平臺的搬家目前對外開放版本釋放了微信小程序轉支付寶小程序的功能，這也是我們在調研中發現需求最多的。從筆者的了解來看，微信小程序框架原理更接近于，而支付寶小程序更接近于。 原文地址： https://ant-move.github.io/we... 螞蟻搬家工具（Antmove）是一個小程序開發輔助工具，致力于解決小程序跨平臺開發的難題，借助于 Antmove，你只需要編寫...
摘要：所以在小程序出現之后，一股框架之風也很快的出現，微信小程序剛推出之后，就出現了兩個比較出名的小程序開發框架，。 原文地址：https://ant-move.github.io/we... 這里說的去除小程序框架其實并不嚴謹，因為小程序本身也算是一個框架，而且是一個功能更加完善的框架系統。在前端的概念中，我們一般說一個框架是指一個用來幫助開發者構建用戶界面的框架，而小程序框架本身不僅僅包...
閱讀 1061·2023-04-26 02:02
閱讀 2401·2021-09-26 10:11
閱讀 3553·2019-08-30 13:10
閱讀 3743·2019-08-29 17:12
閱讀 719·2019-08-29 14:20
閱讀 2187·2019-08-28 18:19
閱讀 2230·2019-08-26 13:52
閱讀 954·2019-08-26 13:43
