學習筆記：mpvue開發小程序——入門

時間 2019-11-13

標籤學習筆記 mpvue 開發程序入門简体版

原文原文鏈接

接下來可能要開發一個小程序，同事推薦使用mpvue，那麼我提早熟悉下。html

官網地址：http://mpvue.com/vue

1.快速上手 http://mpvue.com/mpvue/quickstart/

跟着官網提示走，搭建一個mpvue的小程序項目webpack

注意，這裏我用yarn代替了npm才安裝成功。git

2.分包機制

mpvue-loader 1.1.2-rc.2以後，優化了build後的文件生成結構，生成的目錄結構保持了源文件夾下的目錄結構，有利於對分包的支持。github

3.注意事項：新增的頁面須要從新 npm run dev 或 yarn run dev來進行編譯

4.不要在選項屬性或回調上使用箭頭函數

好比：web

created: () => console.log(this.a)

或typescript

vm.$watch('a', newValue => this.myMethod())

由於箭頭函數是和父級上下文綁定在一塊兒的，this不會是如你作預期的vue實例，且this.a或this.myMethod也會是未定義的npm

5.微信小程序的頁面的query參數是經過onLoad獲取的，mpvue對此進行了優化，直接經過this.$root.$mp.query獲取相應的數據參數，其調用須要在onLoad生命週期出發以後使用，好比onShow等小程序

6.不支持 v-html

7.不支持部分複雜的JavaScript渲染表達式

8.不支持過濾器

9.不支持在template內使用methods中的函數

10.class支持的語法：

<p :class="{ active: isActive }">111</p>
<p class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</p>
<p class="static" :class="[activeClass, errorClass]">333</p>
<p class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</p>
<p class="static" v-bind:class="[{ active: isActive }, errorClass]">555</p>

將分別被轉換成：微信小程序

<view class="_p {{[isActive ? 'active' : '']}}">111</view>
<view class="_p static {{[isActive ? 'active' : '', hasError ? 'text-danger' : '']}}">222</view>
<view class="_p static {{[activeClass, errorClass]}}">333</view>
<view class="_p static {{[isActive ? activeClass : '', errorClass]}}">444</view>
<view class="_p static {{[[isActive ? 'active' : ''], errorClass]}}">555</view>

11.style支持的語法：

<p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</p>
<p v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</p>

將分別被轉換成：

<view class="_p" style=" {{'color:' + activeColor + ';' + 'font-size:' + fontSize + 'px' + ';'}}">666</view>
<view class="_p" style=" {{'color:' + activeColor + ';' + 'font-size:' + fontSize + 'px' + ';'}}">777</view>

不支持vue官網的class和style綁定語法

12.用computed方法生成class或style字符串，插入到頁面中

<template>
    <!-- 支持 -->
    <div class="container" :class="computedClassStr"></div>
    <div class="container" :class="{active: isActive}"></div>

    <!-- 不支持 -->
    <div class="container" :class="computedClassObject"></div>
</template>
<script>
    export default {
        data () {
            return {
                isActive: true
            }
        },
        computed: {
            computedClassStr () {
                return this.isActive ? 'active' : ''
            },
            computedClassObject () {
                return { active: this.isActive }
            }
        }
    }
</script>

13.嵌套列表渲染必須指定不一樣的索引

<!-- 在這種嵌套循環的時候， index 和 itemIndex 這種索引是必須指定，且別名不能相同，正確的寫法以下 -->
<template>
    <ul v-for="(card, index) in list">
        <li v-for="(item, itemIndex) in card">
            {{item.value}}
        </li>
    </ul>
</template>

14.事件處理器，全支持。

// 事件映射表，左側爲 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'
}

在input和textarea中change事件會被轉爲blur事件

小程序能力所致，bind和catch事件同時綁定時，只會觸發bind，catch不會被觸發，要避免踩坑。

事件修飾符：

修飾符	說明
.stop	阻止冒泡，可是同時綁定了一個非冒泡事件，會致使該元素上的catchEventName失效
.prevent	能夠直接幹掉，由於小程序裏沒有什麼默認事件，好比submit並不會跳轉頁面
.capture
.self	沒有能夠判斷的標識
.once	也不能作，由於小程序沒有removeEventListener，雖然能夠直接在handleProxy中處理，但很是的不優雅，違背了意願，暫不考慮
鍵值修飾符	在小程序中沒有鍵盤，因此...

15.表單控件綁定，幾乎全支持。

建議直接使用微信小程序表單組件。用法示例：

select組件用picker組件進行代替

<template>
  <div>
    <picker @change="bindPickerChange" :value="index" :range="array">
      <view class="picker">
        當前選擇：{{array[index]}}
      </view>
    </picker>
  </div>
</template>

<script>
export default {
  data () {
    return {
      index: 0,
      array: ['A', 'B', 'C']
    }
  },
  methods: {
    bindPickerChange (e) {
      console.log(e)
    }
  }
}
</script>

表單元素radio用radio-group組件進行代替

<template>
  <div>
    <radio-group class="radio-group" @change="radioChange">
      <label class="radio" v-for="(item, index) in items" :key="item.name">
        <radio :value="item.name" :checked="item.checked"/> {{item.value}}
      </label>
    </radio-group>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: [
        {name: 'USA', value: '美國'},
        {name: 'CHN', value: '中國', checked: 'true'},
        {name: 'BRA', value: '巴西'},
        {name: 'JPN', value: '日本'},
        {name: 'ENG', value: '英國'},
        {name: 'TUR', value: '法國'}
      ]
    }
  },
  methods: {
    radioChange (e) {
      console.log('radio發生change事件，攜帶value值爲：', e.target.value)
    }
  }
}
</script>

16.詳細的不支持列表：

暫不支持在組件引用時，在組件上定義click等原生事件、v-show(可用v-if代替)和class style等樣式屬性
例：<card class="class-name"> </card>樣式時不會生效的，由於編譯到wxml，小程序不會生成節點，建議寫在內部頂級元素上
Slot(scoped暫時還沒作支持)
動態組件
異步組件
inline-template
X-Templates
keep-alive
transition
class
style

17.mpvue能夠支持小程序的原生組件

好比picker,map等等。須要注意的是原生組件上的事件綁定，須要以vue的事件綁定語法來綁定，如 bindchange="eventName"事件須要寫成@change="eventName"

示例代碼：

<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
    <view class="picker">
      當前選擇: {{date}}
    </view>
</picker>

18.TypeScript支持

配置方法 http://mpvue.com/build/mpvue-loader/#typescript， Demo見 mpvue-ts-demo

19.最佳實踐

（1）精簡data數據

（2）優化長列表性能

避免在v-for中嵌套子組件，這樣能夠優化大部分setData時的冗餘數據
直接經過樣式display來展現和隱藏

（3）合理使用雙向綁定，建議使用 v-model.lazy綁定方式以優化性能

（4）謹慎選擇直接使用小程序的API，若是你有小程序和H5福永代碼的須要，業務代碼須要保持對WEB Vue.js的兼容性。可經過橋接適配層屏蔽兩端差別。

20.常見問題

（1）如何獲取小程序在page onLoad時候傳遞的options

this.$root.$mp.query

（2）如何獲取小程序在app onLaunch/onShow的時候傳遞的options

this.$root.$mp.appOptions

（3）如何捕獲app的onError

因爲onError不是完整意義的生命週期，因此只提供一個捕獲錯誤的方法，在app的根組件上添加名爲onError的回調函數便可，以下：

export default {
   // 只有 app 纔會有 onLaunch 的生命週期
   onLaunch () {
       // ...
   },

   // 捕獲 app error
   onError (err) {
       console.log(err)
   }
}