通過測試和使用總結出以下幾點
一、總結一下vue中不支持的語法 和已經被支持的
1.在mpvue中 不可以在template中 使用methods中的方法 如下所示
不支持使用filters過濾
<template>
<div>
<p>{{ genter(name) }}</p>
</div>
</template>
methods: {
genter (val) {
return val + 'aa'
},
}
以上方式是不支持的，應該使用 計算屬性 computed 以下是正確的使用方式
<template>
<div>
<p>{{ fullname}}</p>
</div>
</template>
computed: {
fullname() {
return val + 'aa'
},
}
2.不支持ElmentUI和Vue-router
3.已經支持 v-html和v-text
4.已經支持在組件上使用 Class 與 Style 綁定
1.動態(tài)綁定style樣式
:style="{'color':(isTrue?'red':'green')}"
2.三元運算形式（倆種class樣式切換）
:class="[isDisabled ? 'notSend' : 'send']"
3.是否添加 active class類名
:class="{'active':表達式（true或者false）}"
5.mpvue 建議使用 v-model.lazy 綁定方式以優(yōu)化性能，此外 v-model 在老基礎庫下輸入框輸入時可能存在光標重設的問題。
6.寫頁面跳轉時候傳入動態(tài)參數，需要寫成:url，如：
bindViewCount () {
let id = 10
const url = '../counter/main?id=' + id
wx.navigateTo({ url })
}
7.通過 this.$root.$mp.query 進行獲取小程序在 page onLoad 時候傳遞的 options。通過 this.$root.$mp.appOptions 進行獲取小程序在 app onLaunch/onShow 時候傳遞的 options。
mounted () {
console.log(this.$root.$mp)
},
打印結果如下：
8.使用this.$root.$mp.query獲取參數需要在monted中獲取，在created中會報Cannot read property 'query' of undefined 。
二、關于mpvue中頁面跳轉問題
由于mpvue中不支持vue-router，所以在處理頁面之間關系的時候需要使用小程序的相關功能 navigator
參考小程序api 有標簽屬性 open-type指定跳轉方式 默認值為 navigate方式
在小程序中如果遷徙原來的項目時候 可以在標簽上綁定方法，使用js進行調整代碼如下
methods: {
bindViewTap () {
const url = '../logs/main'
wx.navigateTo({ url })
},
}
如果使用了小程序的底導航 tabBar并且把上述路徑配置在其中了，在使用上述的方式跳轉將會失效
這是因為已經把當前頁面作業(yè)底導航所指定的頁面，不能在使用navigateTo方式進行調整，需要更改為switchTab方式，代碼如下
methods: {
bindViewTap () {
const url = '../logs/main'
wx.switchTab({ url })
},
}
三、mpvue使用時候的一些小坑
1.新添加的頁面有時候不會渲染出來
因為 webpack 編譯的文件使用配置的 entry決定的，新增的頁面并沒用添加進 entry，所以需要手動 npm run dev 一下
2.相對路徑的圖片不顯示。
解決是:把路徑import進來,或者是把圖片放在static目錄下引用,然而作為css background-image引用時,只能選擇引用遠程圖片,或者相對目錄小于8k(webpck配置有關)的圖片,不然編譯器會報錯
四、關于在mpvue中使用 axios的方式 以及配置
基于mpvue使用axios
通過webpack別名（alias）將axios指向axios/dist/axios，如下
alias: {
'vue': 'mpvue',
'axios':'axios/dist/axios',
'@': resolve('src')
}
小程序環(huán)境和瀏覽器不一致導致的，不過別慌，我們可以寫adapter
axios.defaults.adapter = function (config) {
return new Promise((resolve, reject) => {
console.log(config)
// TODO wx.request(...)
})
}
五、在mpvue中引入小程序 ui框架 這里以iview weapp 為例
在官網上下載全部組件兵將 dist文件下的文件拷貝到自己的項目中
一定要放在 static 文件夾下，我是這么放的，方便分辨，將原來的dist文件名稱改成了iview
關于引入iview weapp組件的路徑問題，以i-toast為例
在main.json中注冊組件 路徑不會被再次編譯 以dist中的文件路徑為參考
{
"usingComponents": {
"i-toast": "../../static/iview/toast/index"
}
}
參照官網toast的使用規(guī)則 需要在頁面中引入
在自己工程的mpvue項目中 要改變成vue的引入方式
import { $Toast } from '../../../static/iview/base/index'
//注意當前的途徑引入的是跟src文件并行的文件夾 static，而不是 打包后文件dist下的static文件夾
如果覺得上述方式不喜歡可以使用小程序的請求方式
小程序的原生API wx.request等來進行
未完待續(xù)，更多踩坑記錄會在后續(xù)補充
