最近公司開始做小程序項目，因為之前比較熟悉vue，不太想為小程序?qū)ｉT再去學(xué)習(xí)他那套語法了，所以找了美團團隊開源的mpvue作為解決方案
mpvue具體情況可以看github上面的官方文檔：mpvue文檔
mpvue原理：大概原理就是他們改動了compile文件，將我們寫的vue文件重新編譯成wxml等文件比勉，最后的底層實現(xiàn)還是用的小程序語法，mpvue只是能讓你使用比較熟悉的vue語法開發(fā)而已驹止，所以中間肯定有不少vue和小程序之間的差別需要在開發(fā)的時候注意的
下面說說開發(fā)過程中會遇到的問題（持續(xù)更新中）
頁面配置
首先說下頁面配置敷搪，mpvue的默認頁面需要一個xx.vue單頁面組件，同時配合上一個main.js文件幢哨，也就是說每新建一個頁面都需要這樣兩個文件，而且main.js中的東西基本重復(fù)嫂便，顯得比較冗余
這里推薦一個第三方的插件：mpvue-entry
該插件使得我們新建頁面時只需要一個xx.vue文件捞镰，并且將頁面路由通過一個js文件統(tǒng)一配置（符合vue開發(fā)的習(xí)慣），不用再放置在main.js中了
特別提醒：該插件的版本請使用0.xx的版本毙替，1.xx的版本與目前的mpvue有沖突
路由轉(zhuǎn)跳
因為小程序與vue的路由機制的差異岸售，所以我們沒法使用vue-router來實現(xiàn)路由轉(zhuǎn)跳（因為vue頁面轉(zhuǎn)跳后，之前的頁面會銷毀厂画；小程序在頁面轉(zhuǎn)跳后凸丸，之前的頁面不會被銷毀，而是轉(zhuǎn)入后臺袱院；）
如果你需要使用類似vue的api來實現(xiàn)（可能有些項目想將已有vue代碼直接編譯成小程序）
這里推薦一個第三方插件：mpvue-router-patch
不過這個插件只是封裝了基本的用法屎慢，如果想要使用場景比較復(fù)雜可能需要自己封裝
生命周期鉤子
因為小程序的歷史頁面不會銷毀瞭稼，所以在生命周期的使用中有需要注意的點
- created：這個鉤子是有bug的，所有頁面的created函數(shù)會在項目加載的時候被一起調(diào)用腻惠，而且進入頁面的時候不會在被調(diào)用环肘，所以這個函數(shù)基本就不能使用了，用小程序的onLoad鉤子代替吧
- mounted：你如果從頁面B返回頁面A集灌，頁面A的mounted鉤子不會被觸發(fā)悔雹，因為頁面沒有被重新加載，如果有需要每次頁面展示都要調(diào)用的邏輯欣喧，使用小程序的onShow代替吧
其他的鉤子暫時還沒有嘗試過腌零，后續(xù)有坑再補上
組件
- 子組件中更新數(shù)據(jù)后，頁面無法進行相應(yīng)的渲染的情況
解決方法：在你的data中隨便放入一個變量就好了
export default {
return {
data () {
any: ''
}
}
}
原因分析：后來發(fā)現(xiàn)因為我子組件中的數(shù)據(jù)數(shù)組時從父組件傳入的唆阿，只在props中接收益涧，data中一直是空的，隨后無意中發(fā)現(xiàn)只要在data中放入一個變量就能正常更新了酷鸦；懷疑是不是因為將vue組件編譯成小程序組件的過程中饰躲，Vue實例的data與小程序Page實例的data同步的時候存在bug
- slot問題
slot暫時只可以傳遞固定內(nèi)容，父組件那邊傳遞變量臼隔，子組件中無法進行渲染
// 父組件
<children>
<div>slot內(nèi)容<div>
<div>{{list.data}}</div>
</children>
// 子組件
<div>
<slot></slot>
<div>
// 頁面展示效果
<view>
<view>slot內(nèi)容</view>
<view></view> // 此處無法展示出來
</view>
- 使用小程序組件
使用小程序組件的時候嘹裂，變量與方法的綁定需要使用vue的方式，比如點擊事件摔握，小程序是bindtap="btnClick"寄狼，而我們需要使用@click="btnClick"去實現(xiàn)，mpvue文檔也有提到氨淌；實際嘗試下來泊愧，基本上方法綁定就把小程序的bind去掉，前面加上@就好
v-for
列表渲染的時候盛正，微信開發(fā)者工具中可能會出現(xiàn)雙倍的標簽删咱，這個據(jù)說是開發(fā)者工具自身的bug，測試下來暫時不會影響功能
下拉刷新&上拉加載
推薦下拉加載與上拉刷新使用全局的api去實現(xiàn)
export default {
return {
data () {}
},
onPullDownRefresh () {
// 下拉刷新
},
onReachBottom () {
// 上拉加載
}
}
特別注意：
- 全局的下拉加載需要在配置中設(shè)置開啟
- 并且需要在方法中調(diào)用
wx.stopPullDownRefresh()方法結(jié)束下拉動作豪筝，不然在真機上面下拉效果無法收起
如果使用scroll-view標簽實現(xiàn)痰滋，有幾個地方需要說明一下：
- 觸發(fā)方法需要放到
methods中，并且綁定在scroll-view標簽上調(diào)用 - 在scroll-view中下拉的時候续崖，無法觸發(fā)全局的下拉效果敲街，需要自己實現(xiàn)相應(yīng)的動畫（所以建議優(yōu)先使用全局的方法）
- 下拉刷新只有在滑動至頂部的時候才會觸發(fā)，如果你的滾動條已經(jīng)在標簽區(qū)域最頂部了严望，就無法觸發(fā)下拉方法（這點是最后放棄scroll-view的主要原因多艇，處理起來太麻煩了）
請求
和后端的數(shù)據(jù)交互，可以使用flyio這個插件：flyio-github
文檔在這里：flyio文檔
因為該插件兼容多個框架像吻，所以要注意在小程序中的調(diào)用方式
import Fly from "flyio/dist/npm/wx"
const fly = new Fly()
特別說明：
這里說下峻黍，小程序中所有的傳統(tǒng)處理請求的插件复隆，比如axios，$.ajax等等奸披，因為依賴window對象的xmlHttpRequest api昏名，都不可以使用，因為小程序中沒有window對象
flyio重寫了非瀏覽器環(huán)境的Http Engine阵面，所以實現(xiàn)了多端兼容
攔截器：
開發(fā)過程中轻局，經(jīng)常會需要對請求進行攔截，做統(tǒng)一的處理
flyio一樣可以使用攔截器：攔截器文檔
配置說明：
需要在后臺的可信任域名中配置請求的地址样刷，且只支持https請求
如果是開發(fā)調(diào)試的情況仑扑，可以在開發(fā)者工具中，勾選不校驗域名置鼻，就會繞過檢測
數(shù)據(jù)埋點
使用的騰訊MTA镇饮，有天然的小程序支持
下載SDK，根據(jù)文檔使用就行了：騰訊MTA小程序文檔
以上箕母，是我當前使用mpvue的一個階段總結(jié)储藐，后續(xù)會持續(xù)更新，如果喜歡嘶是，不吝點贊钙勃，謝謝??
