mpvue使用過程中注意事項和不支持的語法

通過測試和使用總結出以下幾點

一、總結一下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.動態綁定style樣式
:style="{color:(isTrue?'red':'green')}"
2.三元運算形式（倆種class樣式切換）
:class="[isDisabled ? 'notSend' : 'send']"
3.是否添加 active class類名
:class="{'active':表達式（true或者false）}"

5.mpvue 建議使用 v-model.lazy 綁定方式以優化性能，此外 v-model 在老基礎庫下輸入框輸入時可能存在光標重設的問題。

6.寫頁面跳轉時候傳入動態參數，需要寫成: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)
  },

打印結果如下：

 

image.png

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並且把上述路徑配置在其中了，在使用上述的方式跳轉將會失效
這是因爲已經把當前頁面作業底導航所指定的頁面，不能在使用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')
        }

小程序環境和瀏覽器不一致導致的，不過別慌，我們可以寫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

 

image.png

關於引入iview weapp組件的路徑問題，以i-toast爲例
在main.json中註冊組件 路徑不會被再次編譯 以dist中的文件路徑爲參考

{
  "usingComponents": {
    "i-toast": "../../static/iview/toast/index"
  }
}

參照官網toast的使用規則 需要在頁面中引入

 

image.png

 

在自己工程的mpvue項目中 要改變成vue的引入方式

import { $Toast } from  '../../../static/iview/base/index'
//注意當前的途徑引入的是跟src文件並行的文件夾 static，而不是 打包後文件dist下的static文件夾

如果覺得上述方式不喜歡可以使用小程序的請求方式
小程序的原生API wx.request等來進行
未完待續，更多踩坑記錄會在後續補充

作者：我愛喝可樂123
鏈接：https://www.jianshu.com/p/8aef9d6510f6
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯繫作者獲得授權並註明出處。