【mpvue】二

關於項目中使用mpve發現的一些問題，踩坑吧，陸續會更新。

一、我的感受非常很重要的一點。特別是在vue項目移植過來的mpvue項目，

組件不支持slot。

<component>
   <div v-for="(v,k)" :key="k">
      我裏面不支持
   </div>
</component>

官方說的是不支持slot，可是實測裏面，是組件內用了v-for，就渲染不出來。

二、關於生命週期的問題，按照vue的生命週期，通常加載會掛在mounted函數中。然而小程序中由於緩存的關係，Mounted返回，再進來，就再也不執行。解決方案是使用小程序的onShow()鉤子替代。確保每次進頁面都會渲染相應的數據。

可是--------重點來了，頁面中使用了組件，父組件中使用onShow保證每次進頁面都會刷新數據，而子組件中若是也使用onShow，則會出現第一次進頁面子組件不執行onShow的狀況，返回再進頁面才執行。目前不知道緣由，因而子組件使用了onReady，確保每次都執行。

另外子組件的更新數據，使用watch監聽變化來作。

三、這個問題是關於mpvue中緩存的機制，不知道是否是小程序的緩存機制，每次進頁面加載數據以前，會閃一下上一次加載的數據，而後再更新成新數據，用戶體驗不是太好。

四、關於圖片url請求的問題。

（1）小程序只支持https的請求。不管是圖片，仍是圖片預覽。

關於wx.previewImage，剛開始作的時候，模擬器是沒問題，可是上了真機發現是黑屏的狀況。

差了一下數據格式什麼的，都沒問題，最後發現是http致使的。。後來叫後臺兄弟幫忙拼接了一下。解決了。

（2）因爲頁面中會出現大量的靜態圖片，咱們這裏統一上傳了服務器，拼接了一個前綴，相似於https://container.com/

    這裏咱們採起的作法是引入一url，後面拼接好圖片名稱如： let url="https://container.com/", 使用的時候經過script引入url,

<img :src="url+'img.png'"></img>

（3）接下來是css中引入

這裏我使用的是less,定義了函數來使用url

.baseUrl(@url){
    background:url("http://container/@{url}") no-repeat;
}

另外這裏提一下，關於引入less，原本想在main.js裏全局引入，後來發現引入不進去，還不知道爲啥。後來就是每一個頁面都單獨引入一下這個公共的base.less文件。

使用方法以下：

body{
.baseUrl('bg.png')
}

這樣就能夠直接加入了一個背景圖片，還挺方便。

暫時就這麼多，陸續更新後續