一、快速搭建基礎專案
官方網站中已經對這一步做了很詳細的介紹，所以這裡就簡單的描述下。
# 1. 全域性安裝 vue-cli
# 一般是要 sudo 許可權的
$ npm install --global vue-cli
# 2. 建立一個基於 mpvue-quickstart 模板的新專案
# 新手一路回車選擇預設就可以了
$ vue init mpvue/mpvue-quickstart my-project
# 3. 安裝依賴
$ cd my-project
$ npm install
$ npm run dev
複製程式碼詳細請訪問mpvue官方網站
1、搭建小程式開發環境
小程式的開發需要配合微信專門的開發工具，當然這一步也是比較簡單的，將開發工具下載後按照提示進行安裝即可。
安裝完畢以後，基本的小程式開發環境就已經準備完畢啦，在開發工具中將上一步建立的專案拉入就可以預覽基礎的demo啦。
二、專案的開發目錄
src 是開發目錄
- main.js中的配置檔案會打包成小程式的app.json配置檔案，所以可以在這裡進行配置相應的資訊，例如：配置導航欄
export default {
config: {
// 頁面前帶有 ^ 符號的，會被編譯成首頁，其他頁面可以選填，
我們會自動把 webpack entry 裡面的入口頁面加進去
pages: ['pages/logs/main', '^pages/index/main'],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#61A2F3',
navigationBarTitleText: '小程式',
navigationBarTextStyle: '#FFF'
},
}
}
複製程式碼- pages 中 的main.js也是配置檔案。例如
export default { // 比如這裡修改頂部的導航欄展示資訊
config: {
navigationBarTitleText: '小程式'
}
}
複製程式碼注：本地 images 需要放到 static 資料夾下 ，會自動打包到dist內，圖片路徑的要用dist 內的圖片路徑才能正常顯示。（解決方式並不唯一）
三、網路請求
在Vue中本人經常用的是axios，不過mpvue雖然是繼承於Vue，但是這裡沒辦法直接使用axios的。網上有推薦使用flyio。不過相比來說我覺得使用小程式官方的api會更舒服一點。mpvue框架搭配小程式的api，在mpvue中還能直接使用小程式中的元件，對像我這樣的新手來說真的是很友好啦。
flyio中也給出了在小程式環境下的基礎配置。詳細的可以去官網檢視。
後來覺得小程式原生的api更適合，不過還是用了一下flyio，列一下我的使用方式。(雖然有湊字數的嫌疑)
// 1. 新建檔案 request.js
// 為了適應小程式
var Fly=require("flyio/dist/npm/wx") //npm引入方式
const request = new Fly();
// 可以進行攔截器、全域性config等等設定
//新增攔截器
request.interceptors.request.use((config,promise)=>{
//給所有請求新增自定義header
config.headers["X-Tag"]="flyio";
return config;
})
fly.config.baseURL="url" // 基礎url配置
export default request;
// 2、在需要使用請求的地方，引入request
import fly from './../../request.js' // 這裡的路徑根據自己建立的檔案修改
// 簡單使用
fly.get("url", {
params: {} // 查詢條件
}).then(response => {
// 根據返回結果進行資料操作
});
複製程式碼四、mpvue中使用小程式原生元件
比如switch元件 在小程式中對switch的描述
在mpvue中也可以直接使用，不過要注意事件繫結，要轉換為mpvue中的事件繫結方式。
mpvue和小程式事件繫結的對映表
// 事件對映表，左側為 WEB 事件，右側為 小程式 對應事件
{
click: 'tap',
touchstart: 'touchstart',
touchmove: 'touchmove',
touchcancel: 'touchcancel',
touchend: 'touchend',
tap: 'tap',
longtap: 'longtap',
input: 'input',
change: 'change',
submit: 'submit',
blur: 'blur',
focus: 'focus',
reset: 'reset',
confirm: 'confirm',
columnchange: 'columnchange',
linechange: 'linechange',
error: 'error',
scrolltoupper: 'scrolltoupper',
scrolltolower: 'scrolltolower',
scroll: 'scroll'
}
複製程式碼對應的小程式中展示的 event.detail 在mpvue中可以在控制檯輸出看到
諾，就是標紅的那個部分， 然後就可以愉快的使用小程式的原生元件啦。
五、生命週期
vue中生命週期就是很重要的知識點，這裡也同樣。因為是小程式框架所以在vue生命週期的基礎上mpvvue也相容了小程式的生命週期。
這個知識點不是很清晰所以就不多說那麼多了
附：小程式生命週期
app 部分：
onLaunch，初始化
onShow，當小程式啟動，或從後臺進入前臺顯示
onHide，當小程式從前臺進入後臺
page 部分：
onLoad，監聽頁面載入
onShow，監聽頁面顯示
onReady，監聽頁面初次渲染完成
onHide，監聽頁面隱藏
onUnload，監聽頁面解除安裝
onPullDownRefresh，監聽使用者下拉動作
onReachBottom，頁面上拉觸底事件的處理函式
onShareAppMessage，使用者點選右上角分享
onPageScroll，頁面滾動
onTabItemTap, 當前是 tab 頁時，點選 tab 時觸發 （mpvue 0.0.16 支援）
複製程式碼詳細內容請訪問官方網站哦。