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

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

 

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

 

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

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

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

 

2.分包機制

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

 

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

 

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

比如：

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

或

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

因為箭頭函數是和父級上下文綁定在一起的，this不會是如你做預期的vue實例，且this.a或this.myMethod也會是未定義的

 

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)
   }
}

 

21.mpvue框架使用場景匯總

mpvue小程序框架包含：

• 運行時JS SDK
• 初始化模板項目（包含推薦的目錄結構，webpack構建，代碼檢查配置等）
• 項目構建所需的npm依賴（已經包含在項目模板中，無需手動引入）

開發者可能會面對的四種典型場景：

• 單獨以mpvue框架構建小程序
  • 推薦的方式，無需額外支持
• mpvue框架為主，同時使用其它框架（原生開發方式或wepy等）
• 已經使用其他框架，引入mpvue做部分模塊的開發
• 只是用mpvue的JS SDK，自定義構建策略

 

 

（完）

以上筆記摘自： mpvue官方文檔 http://mpvue.com/mpvue/