第一次接觸小程序大概是17年初,當(dāng)時(shí)小程序剛剛內(nèi)側(cè),當(dāng)時(shí)就被各種限制折騰的死去活來的,單向綁定, 沒有promise,請(qǐng)求數(shù)限制,包大小限制,各種反人類,...反正我是感受到了滿滿的惡意. 最近接到一個(gè)工程類的小程序項(xiàng)目,做技術(shù)選型的時(shí)候,又把以前的東西撿起來看了看,重新熟悉了一下, 感覺小程序還是有在努力的,支持大部分es6語法了,還出了一個(gè)類Vue的mvvm框架wepy,還支持redux狀態(tài)管理, 就大致建了個(gè)demo,跑了起來,趕緊雖然沒有vue那么酸爽,但是還是挺ok的,至少比原生的小程序語法親民很多.

然后就開始用wepy搭項(xiàng)目,寫靜態(tài)頁(yè)面(由于公司的開發(fā)模式是先寫靜態(tài)頁(yè)面, 等待后端的同學(xué)接口出來了再綁定數(shù)據(jù)),雖然wepy用起來比原生的順手, 但是還是有很多坑的,這里就不列舉了.....

就在我們靜態(tài)頁(yè)面快寫完的時(shí)候,某天晚上論壇的時(shí)候看到一條消息, 美團(tuán)出了個(gè)小程序框架mpVue （不知道為什么，每次看到這個(gè)名字，我只想到3個(gè)字，沒朋友,哈哈）, 大致看了一下官方的介紹,主要有一下亮點(diǎn):

1. 跟vue一樣的開發(fā)體驗(yàn),包括vuex
2. H5代碼轉(zhuǎn)換編譯成小程序目標(biāo)代碼的能力

也就是說,不但可以用我們熟悉的vue語法開發(fā),還有可能直接把你的h5頁(yè)面編譯成小程序. 該項(xiàng)目到目前位置，開源不到20天，已經(jīng)收到將近7000個(gè)star,可見天下苦秦已久。

建了個(gè)demo,跑了一下,感覺簡(jiǎn)直就是開發(fā)界的良心之作啊.順便把之前寫的wepy的靜態(tài)頁(yè)面代碼復(fù)制過來看了一下, 發(fā)現(xiàn)只要改動(dòng)一點(diǎn)點(diǎn),就可以順利從wepy切換到mpvue上來(整個(gè)項(xiàng)目的切換時(shí)間在半天左右). 說做就做,當(dāng)天就切到mpvue.一直到現(xiàn)在項(xiàng)目接近尾聲了,整個(gè)開發(fā)過程,真是令人愉悅.

Bug....我今天好像不是來給mpvue做廣告的,我是來找茬的..

下面就盤點(diǎn)一下我最近用mpvue開發(fā),遇到的一些需要需要注意的細(xì)節(jié).(或者說跟vue不同的地方)

一,這個(gè)個(gè)人感覺是最大的坑,除了缺少文件會(huì)報(bào)錯(cuò)外,其他的代碼語法錯(cuò)誤等, 控制臺(tái)大部分時(shí)間都是安靜的(偶爾也會(huì)報(bào)一個(gè)xxx is undefined) 比較經(jīng)常碰到的是這樣 this.xxx =5 有些情況下會(huì)報(bào)錯(cuò),而有些情況下則沒有任何反應(yīng), 具體什么情況下會(huì),什么情況下不會(huì),我現(xiàn)在還沒摸出規(guī)律來..

有一次我把

this.dataObject.map(() => { ...這里省略... })

結(jié)果map前面的 . 不小心給露掉了,實(shí)際代碼變成

this.dataObjectmap(() => { ...這里省略... })

結(jié)果找了半天沒找到問題的原因

二,這個(gè)也是比較難受的地方,就是模板的數(shù)據(jù)綁定里面,沒辦法在模板語法里面調(diào)用methods方法 (或者說沒辦法調(diào)用computed以外的函數(shù)),有人也許會(huì)說,那可以用computed屬性,那如果我想給函數(shù)傳參怎么辦? 看下面代碼:

<template>
  <view v-for="item in costList" >
    {{formatCost(item)}}
  </view>
</template>

<script>
export default {
  data(){
    return{
      costList:[]
    }
  },
  methods: {
    formatCost(item){
    return item.toFixed(2)
    },
    getData(){
    let arr = [3.255,4.1,5,15]
    this.costList = arr
    }
  }
</script>

這個(gè)時(shí)候 {{formatCost(item)}} 里面的內(nèi)容,會(huì)渲染成空字符串,理由就是因?yàn)椴恢С趾瘮?shù),而且這中情況, 也無法使用computed屬性,除非你想為每個(gè)數(shù)組元素寫一個(gè)computed

這種情況,我的解決方案是在在獲取到數(shù)據(jù)的時(shí)候,就先把數(shù)據(jù)改了.如上面的例子,我們可以在 getData方法里面這樣寫

let arr = [3.255,4.1,5,15]
// 遍歷數(shù)組里面的元素,然后格式化一下,添加到 costList里去
arr.map(item => {
    this.costList.push = this.formatCost(item)
})

三,所有頁(yè)面里面的created生命周期函數(shù) 都會(huì)在小程序加載的時(shí)候， 一次性執(zhí)行，而不是每進(jìn)入一個(gè)頁(yè)面執(zhí)行一次，如，我有3個(gè)頁(yè)面

pageA

...省略一些代碼...
creatted(){
    console.log('pageA 的 created函數(shù)執(zhí)行')
}

pageB

...省略一些代碼...
creatted(){
    console.log('pageB 的 created函數(shù)執(zhí)行')
}

pageC

...省略一些代碼...
creatted(){
    console.log('pageC 的 created函數(shù)執(zhí)行')
}

然后，啟動(dòng)小程序，不進(jìn)入這3個(gè)頁(yè)面，假設(shè)我現(xiàn)在有一個(gè)index頁(yè)面，我們打開這個(gè)頁(yè)面，會(huì)有一下輸出

pageA 的 created函數(shù)執(zhí)行
pageB 的 created函數(shù)執(zhí)行
pageC 的 created函數(shù)執(zhí)行

這個(gè)其實(shí)很好解決，用mounted或者onLoad或者onReady代替，說到這幾個(gè)函數(shù)，那就順便提一下, 這里的created和mounted是vue(mpvue)的生命周期，而onLoad、onReady是小程序的生命周期，mpvue官方給的說明是：

除了 Vue 本身的生命周期外，mpvue 還兼容了小程序生命周期，這部分生命周期鉤子的來源于微信小程序的 Page， 除特殊情況外，不建議使用小程序的生命周期鉤子。

但是官方給的生命周期圖示里面，也表明了，小程序的onLoad、onReady比created、mounted執(zhí)行的早， 也就是說如果我們?cè)诤蚾nLoad onReady里面去請(qǐng)求數(shù)據(jù)的話，會(huì)相對(duì)的減少白屏?xí)r間（這里說的白屏是指數(shù)據(jù)未渲染的界面）， 而且官方?jīng)]說明為什么不建議使用小程序的生命周期，我們也嘗試了，用小程序的生命周期，沒發(fā)現(xiàn)生命問題， 所以我們還是比較傾向優(yōu)先使用小程序的生命周期，畢竟用戶體驗(yàn)才是王道。

四、掛載在Vue.prototype上的屬性，在模板語法里面是undefined，必須經(jīng)過computed計(jì)算過一下才能用。 在用vue的時(shí)候，我喜歡把圖片的服務(wù)器路徑存到vue的原型里面：

import config from './config'
Vue.prototype.$serverPath = config.serverPath

然后 我們?cè)陧?yè)面里面這樣用

<img :src="$serverPath + 'logo.png'" />

這樣 就可以避免在每個(gè)頁(yè)面導(dǎo)入config文件，后期如果我們發(fā)布正式版的時(shí)候，只要在這邊修改一下config配置文件就可以了 然額，這樣寫在mpvue里面，實(shí)際渲染出來的會(huì)是

<image src="undefinedlogo.png" ></image>

要想在每個(gè)頁(yè)面里面使用，只能乖乖在每個(gè)頁(yè)面里面導(dǎo)入，或者在computed里面返回this.$serverPath

五、用 v-for循環(huán)的時(shí)候，如果要給當(dāng)前項(xiàng)指定一個(gè)索引，在vue下，為了省事，我通常喜歡這樣做

v-for="item,index in list"

因?yàn)槎啻蛞粚?duì)括號(hào)真的是很煩人。但是在mpvue下面卻不行，你必須老老實(shí)實(shí)這樣寫，否則會(huì)報(bào)錯(cuò)。

v-for="(item,index) in list"

六、單獨(dú)為每個(gè)頁(yè)面的設(shè)置頁(yè)面頭部信息，有提供這個(gè)功能，不過文檔不是很詳細(xì)，幾經(jīng)嘗試，才試出來。

我們的入口文件main.js（延續(xù)vue的叫法，暫且這么稱呼吧，其實(shí)我覺得應(yīng)該叫配置文件）里面可以這樣配置， 官方文檔大概也是這么說的

這部分內(nèi)容來源于 app 和 page 的 entry 文件，通常習(xí)慣是 main.js，你需要在你的入口文件中 export default { config: {} }，這才能被我們的 loader 識(shí)別為這是一個(gè)配置，需要寫成 json 文件。

import Vue from 'vue';
import App from './app';

const vueApp = new Vue(App);
vueApp.$mount();

// 這個(gè)是我們約定的額外的配置
export default {
    // 這個(gè)字段下的數(shù)據(jù)會(huì)被填充到 app.json ／ page.json
    config: {
        pages: ['static/calendar/calendar', '^pages/list/list'], // Will be filled in webpack
        window: {  // 頂部欄的統(tǒng)一配置
            backgroundTextStyle: 'light',
            navigationBarBackgroundColor: '#455A73',
            navigationBarTitleText: '美團(tuán)汽車票',
            navigationBarTextStyle: '#fff'
        }
    }
};

同時(shí)，這個(gè)時(shí)候，我們會(huì)根據(jù) entry 的頁(yè)面數(shù)據(jù)，自動(dòng)填充到 app.json 中的 pages 字段。 pages 字段也是可以自定義的，約定帶有 ^ 符號(hào)開頭的頁(yè)面，會(huì)放到數(shù)組的最前面。

我們看到，可以在config.window下面配置全局的頂部欄樣式，但是如果我們想為每個(gè)頁(yè)面指定一個(gè)樣式呢？事實(shí)上， 以上方法只適合配置app.json里面的內(nèi)容，如果你想要為你的每個(gè)頁(yè)面都添加一種樣式，那么應(yīng)該這樣做： 在頁(yè)面所屬的入口文件（main.js）里面添加以下內(nèi)容，比如我想為 userCenter/index頁(yè)面設(shè)置一個(gè)標(biāo)題， 應(yīng)該在userCenter/main.js里面加入

export default {
  config: {
    navigationBarTitleText: '個(gè)人中心',
  }
}

注意這里跟上面那個(gè)全局配置不同的是，配置內(nèi)容navigationBarTitleText是config的屬性， 而全局配置里，則是config.window的屬性

七、組件的命名問題，有一次，我寫了一個(gè)局部的組件，為什么叫局部的組件呢，因?yàn)槲抑辉谀硞€(gè)頁(yè)面里面使用， 所以為了簡(jiǎn)單化，我給這個(gè)組件取了個(gè)名字叫 list.vue ,然后在父組件引用：

<template>
<!-- 省略其他代碼 -->
    <list />
</template>
<script>
  import list from './components/list'
  export default {
    components: {list},
    // 省略其他代碼
  }
</script>

組件能正常顯示，樣式也沒問題，一切看上去都是那么的正常，然而組件里面的邏輯就是不會(huì)執(zhí)行。 加上本文第一點(diǎn)提到的，不會(huì)報(bào)錯(cuò)，讓我一頓好找啊... 經(jīng)過排查發(fā)現(xiàn)，跟組件的引入名稱有關(guān)，應(yīng)該是跟微信的關(guān)鍵字同名了。

<template>
<!-- 省略其他代碼 -->
    <listA />
</template>
<script>
  import listA from './components/list'
  export default {
    components: {listA},
    // 省略其他代碼
  }
</script>

這樣就能正常運(yùn)行，出了list,我目前踩到的還有tabbar,搞得我現(xiàn)在命名的時(shí)候，看到一些疑似關(guān)鍵的字眼，心理都有點(diǎn)陰影。。 這個(gè)應(yīng)該是微信的問題吧，總之遇到了，就一塊寫出來。

八、組件第一次加載的時(shí)候不能執(zhí)行onShow里面的內(nèi)容，只有在隱藏又顯示后，才會(huì)顯示，而頁(yè)面卻每次進(jìn)入都會(huì)顯示 例如我們?cè)谝粋€(gè)組件里有一下代碼

onLoad () {
  console.log('onLoad')
},
onShow () {
  console.log('onShow')
},
mounted () {
  console.log('mounted')
},

頁(yè)面加載的時(shí)候，我們期望打印出來的是

onLoad
onShow
mounted

然后實(shí)際上，只打印出

onLoad
mounted

這個(gè)問題，我已給官方提 Issue ,不過目前還沒得到回應(yīng)

十、同一個(gè)子組件,在2個(gè)不同的地方引用,會(huì)導(dǎo)致2個(gè)地方的樣式都加載不了,而如果只在一個(gè)地方引用卻沒問題， 為什么把這個(gè)問題放到最后？ 因?yàn)檫@只是前幾個(gè)版本的腳手架有這個(gè)問題，后面的應(yīng)該就沒有這個(gè)問題了。 這個(gè)問題我也給官方提過Issue,官方給的回答是用新版本的腳手架重新生成項(xiàng)目，但是項(xiàng)目都快做完了， 這個(gè)時(shí)候重新生成，然后拷貝代碼，感覺心太累了，所以抱著不折騰不罷休的態(tài)度，終于找到原因，是因?yàn)樵缙诎姹镜哪_手架， 缺少了 webpack-mpvue-asset-plugin 這個(gè)插件,新版的cli里面會(huì)自動(dòng)添加這個(gè)插件。具體看 Issue #180

另外，最近正在做一個(gè)mpvue的基礎(chǔ)教程，有興趣的童鞋請(qǐng)前往我的 github mpvue-tutorials , 您的一個(gè)Star,就是我最大的動(dòng)力了。