使用mpvue開發小程序教程（五）

時間 2019-11-12

標籤使用 mpvue 開發程序教程简体版

原文原文鏈接

在上一章節中，咱們瞭解了組件的三個基本特性以及組件的基本使用方法。在實際的小程序開發中，咱們應該以組件的思惟去設計每一個小程序的功能頁面，對其進行合理的組件拆分，讓每一個部分都保持功能簡潔、條理清楚、各司其職，這樣會讓代碼變得更易理解和維護，間接的也提高了代碼的健壯性，下降出現Bug的概率，即便出現Bug，也會更容易進行定位和調試。

因爲mpvue採用的是Vue框架的基礎設施，因此大部分的功能都是和Vue一致的。可是，mpvue的代碼畢竟最終仍是要轉譯成小程序原生框架下的代碼的，因爲小程序框架自己存在的一些功能限制，致使有些功能不能被翻譯過去，也就是說有些標準的Vue功能在mpvue下是不可使用或有特殊限制的。html

今天咱們就來羅列一下，在使用mpvue的時候那些須要特別注意的點。vue

1. 在模板中，動態插入HTML的`v-html`指令不可用

這條很好理解，小程序的界面並非基於瀏覽器的BOM/DOM的，因此不能動態的在界面模板裏直接插入HTML片斷來顯示。ios

題外話，若是有在小程序裏插入html片斷的需求怎麼辦？能夠用<rich-text>組件或者wxParse(https://github.com/icindy/wxParse)來實現。git

2. 在模板中，用於數據綁定的雙括號語法`{{}}`中的表達式功能存在諸多限制

在Vue自己的模板內雙括號語法中，咱們能夠對綁定變量進行比較豐富的處理，好比：github

能夠調用methods下的函數，例如：

<template>
  <div>{{ formatMessage(msg) }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello,World"
    }
  },
  methods: {
    formatMessage(str) {
      return str.trim().split(',').join('#')
    }
  }
}
</script>

若是變量是對象的話，也能夠調用對象的成員方法

<div>{{ msg.trim().split(',').join('#') }}</div>

可使用過濾器來處理變量，最有用的場景算是格式化數據了

<div>{{ msg | format }}</div>

以上這些好用的功能，在mpvue中，記得都是統統不能用的哦！！！ajax

咱們只能在雙括號中使用一些簡單的運算符運算（+ - * % ?: ! == === > < [] .）。vue-router

可是也得找些可用的替代方案吶，大夥先考慮使用計算屬性(computed)來作吧。axios

3. 在模板中，除事件監聽外，其他地方都不能調用`methods`下的函數

在Vue中，模板裏調用methods部分定義的函數是很是常見的，好比下面這段代碼所示，在v-if指令中調用函數getErrorNum()：小程序

<div v-if="getErrorNum() > 0  && code == 10001" class="error">{{ errorMsg }}</div>

但是，在mpvue裏就是不能夠用！由於在小程序原生模板wxml裏就不支持這種函數調用，致使mpvue沒有很好的方式轉譯過去（雖然小程序有wxs，可是感受翻譯過去mpvue要作的工做會比較複雜）。後端

因此，可用的替代方案可能仍是計算屬性了。

4. 在模板中，不支持直接綁定一個對象到`style`或`class`屬性上

在Vue中咱們能夠爲HTML元素的class或style綁定一個對象，並按照對象內的屬性值來決定是否添加對應的屬性名到HTML元素的樣式名。示例以下：

<template>
  <div :class="classObject"></div>
</template>

<script>
export default {
  data() {
    return {
      classObject: {
        active: true,
        'text-danger': false
      }
    }
  }
}
</script>

上面這段代碼的運行後生成的HTML將是：

<div class="active"></div>

可是在mpvue下面這個特性也不能用，按官方說法是因爲涉及到一些性能相關的緣由。那若是要動態改變組件的class該怎麼寫呢？官方給出的方式是這樣的：

<div :class="{ active: classObject.active, 'text-danger': classObject['text-danger']}"></div>

其實改動不大，稍微多打了一些字而已，至關於在模板的class裏再定義一個對象罷了。可是據文檔中說這樣會提高性能。好吧，爲了性能，這點麻煩仍是能忍受的。可是它又說了：從性能考慮，建議不要過分依賴此......看來即便這樣，也仍是有性能問題。

看來最好一點的方案，仍是得使用計算屬性，直接生成一串樣式的字符串，綁定到class或style上：

<template>
  <div :class="classStr"></div>
</template>

<script>
export default {
  data() {
    return {
      classObject: {
        active: true,
        'text-danger': false
      }
    }
  },
  computed: {
    classStr() {
      let arr = []
      for (let p in this.classObject) {
        if (this.classObject[p]) {
          arr.push(p)
        }
      }
      return arr.join(' ') 
    }
  }
}
</script>

5. 在模板中，嵌套使用`v-for`時，必須指定索引`index`

一般，咱們在Vue模板中嵌套循環渲染數組的時候，通常是這個樣子的：

<template>
  <ul v-for="category in categories">
    <li v-for="product in category.products">{{product.name}}</li>
  </ul>
</template>

但在mpvue中使用這種嵌套結構的v-for時，則必須每層的v-for上都給出索引，且索引需取不一樣名字：

<template>
  <ul v-for="(category, index) in categories">
    <li v-for="(product, productIndex) in category.products">{{product.name}}</li>
  </ul>
</template>

6. 事件處理中的注意點

在mpvue中，通常可使用Web的DOM事件名來綁定事件，mpvue會將Web事件名映射成對應的小程序事件名，對應列表以下：

// 左側爲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'
}

除了上面的以外，Web表單組件<input>和<textarea>的change事件會被轉爲blur事件。

而後，像keydown、keypress之類的鍵盤事件也沒有了，由於小程序沒有鍵盤，因此不須要這些事件。

還有，Vue裏面綁定事件的時候，能夠指定事件修飾符，可是在mpvue裏，官方給出了一些注意信息：

.stop 的使用會阻止冒泡，可是同時綁定了一個非冒泡事件，會致使該元素上的 catchEventName 失效！【這個親測了一下，感受是最新版本里修復了仍是怎麼的，沒有文檔裏說的這個問題了】

.prevent 能夠直接幹掉，由於小程序裏沒有什麼默認事件，好比submit並不會跳轉頁面【也就是不須要支持】

.capture 支持 1.0.9 【也就是在 mpvue 1.0.9及之後版本支持】

.self 沒有能夠判斷的標識【也就是不支持】

.once 也不能作，由於小程序沒有 removeEventListener, 雖然能夠直接在 handleProxy 中處理，但很是的不優雅，違背了原意，暫不考慮【也就是不支持】

因此呢，總之當你在遇到事件相關的問題，請回來查看一下文檔，看看本身是否已經掉在坑裏了。

7. 對於表單，請直接使用小程序原生的表單組件

一句話，表單組件又多又複雜，框架可能Hold不住。因此在實際開發中，推薦直接使用小程序的表單組件標籤來寫，而不是使用Web的表單組件標籤來寫。固然了，在mpvue中使用了小程序的組件標籤，數據綁定功能仍是徹底能夠用的。給個示例：

<template>
  <div>
    <picker @change="handlePickerChange" :value="selectedIndex" :range="messages">
      <view class="picker">當前消息：{{ messages[selectedIndex] }}</view>
    </picker>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selectedIndex: 0,
      messages: ['Hello', 'World', 'Haha']
    }
  },
  methods: {
    handlePickerChange (e) {
      console.log(e)
    }
  }
}
</script>