1.mpvue用vue init的方式初始化的基本結(jié)構(gòu)中恩溅，假設(shè)版本為1.0.0的版本廉油，會有擴展運算符失效(報錯)的問題淮椰，在1.0.1的版本中已經(jīng)解決了次問題膊存。一般情況下可以升級mpvue的版本至1.0.1竹握，同樣的mpvue-loader铣耘、mpvue-template-compiler等都要升級票堵，這里不建議用戶自己一個個去升級慎璧，因為總會難免出現(xiàn)紕漏抛计，建議直接init新版本的結(jié)構(gòu)進行使用哄孤。這里說一個被我升級過程中遺忘的問題，就是當你要升級對應(yīng)的依賴的時候吹截，去你的page.json去刪掉對應(yīng)的配置信息瘦陈，不然安裝依賴的時候會按照你的配置信息去下載對應(yīng)的版本凝危。這里普及一點對npm指令不太熟悉的幾個小點 -D : --save-dev （不參與項目打包） -S : --save
舉個例子：

//  安裝css-loader 和 style-loader 
//  為啥安裝css-loader 和style-loader ？css-loader: 加載.css文件晨逝，style-loader:使用<style>將css-loader內(nèi)部樣式
//  注入到我們的HTML頁面
   cnpm install --save-dev style-loader css-loader

同樣的蛾默，如果想在你的項目組件中寫入less語法的樣式或者外部引入less文件，你也需要安裝loader去添加webpack對less的支持咏花。注意:建議在安裝less-loader的同時也去安裝css+style的loader

cnpm install less,less-loader --save-dev

這里有兩種情況的建議引用方式
情況一: 在特定組件中引用

image.png

情況二：在全局中進行引用

image.png

第二個問題就圖片了
我們在項目中肯定會使用圖片趴生，這里建議大家把圖片放到我們的static目錄下，引入圖片的時候以dist的為準

image.png

不過一般說起來昏翰，在開發(fā)過程中應(yīng)該是不用擔心這個問題的苍匆，只是怕個別情況會這樣，所以在這里提個醒棚菊。因為在1.0.0的時候引入tabBar里面的圖片會有這個問題浸踩。

這里說一個場景值的問題。我們知道'原生小程序'里面的周期函數(shù)可以拿到一些場景值统求，直接在周期函數(shù)中傳參就可以拿到检碗，在我們的mpvue框架中也可以拿到，只不過方式要改變一下码邻，這里我直接截圖了官方的介紹

image.png

因為這個經(jīng)常被新的伙伴們忽略折剃，所以我這里重點提醒一下

這里使用過vue的伙伴們會使用綁定屬性的方式去給一個標簽綁定一個類名，在vue中我們一般使用三元表達式去做這個事情像屋，但是在版本 1.0.0-1.0.1的時候怕犁，這個寫法是不被支持的，所以在這倆版本里推薦使用computed的寫法去做這個事情己莺。請看下面對應(yīng)寫法以及編譯結(jié)果截圖

image.png

這里說個需要注意的地方奏甫，原來在mpvue版本(1.0.0-1.0.2)中是不支持在類中寫三元表達式的，但是在版本1.0.3已經(jīng)修復(fù)了這個問題凌受，所以推薦我們可以愉快的這么寫

    <div class="cc" :class="1===1?'cOne':'cTwo'">
      test class
    </div>

現(xiàn)在很多開發(fā)人員都會用Mock.js去模擬我們的接口數(shù)據(jù)以便前后端分離開發(fā)的時候阵子，不用等待后端的數(shù)據(jù)，自己就可以先模擬數(shù)據(jù)完成開發(fā)胜蛉。不知道Mock是啥的同學(xué)請自己去看github上的文檔哈挠进，這里我們不贅述。
下面看代碼

      let Mock = require('mockjs')
      let data = Mock.mock({
        'dataArr|5': [{
          'id|+1': 1,
         'name': '@name'
        }]
      })
      return data.dataArr

上面的代碼中在我們的其他項目中是可以正常運行的誊册，但是在mpvue中會報個語法錯奈梳，所以我們要加點小東西，請看代碼

      let Mock = require('mockjs')
      let data = Mock.mock({
        'dataArr|5': [{
          'id|+1': 1,
         'name': '@name(true)'
        }]
      })
      return data.dataArr

這樣就不會報錯了解虱，這里感謝我們的網(wǎng)友@軍的貢獻。

這里記錄一點區(qū)分
在我們的原生事件中漆撞，事件處理函數(shù)可以傳一個event參數(shù)殴泰，這個參數(shù)里面有我們的事件信息于宙。事件信息是一個對象，在這個對象里面包含了一個很有用的東西 - detail 悍汛。比如一個表單提交組件中點擊提交的時候捞魁，我們可以在對應(yīng)事件函數(shù)的事件對象中拿到表單里面的信息，具體例子請看這里 : https://mp.weixin.qq.com/debug/wxadoc/dev/component/form.html 和 https://mp.weixin.qq.com/debug/wxadoc/dev/component/radio.html 离咐。如果你仔細觀察的話谱俭，可以看到基本和value有關(guān)的組件都是可以這么用的，在detail中可以拿到當前組件的 輸入/選中 的值宵蛀。
在我們的mpvue中昆著，對這一點做出了一些不一樣的封裝

image.png

image.png