微信小程序打夯之旅(八):mpvue和wepy問題總結

mpvue 問題總結 - 2018.03.28

#issue地址

  1. { { } } 中不支持復雜的 js 語法,因為 mpvue 會把 { { } } 中的內容直接編譯到 wxml 中,受限于微信小程序的能力。
  2. 不支持復雜 slot,具名 slot 和單個 slot 插槽可以支持,但是 slotscoped 不支持,即下面的情況無法獲取 itemindex
<component v-for="item in todos" :key="item">
    {{ item }}  /* 獲取不到 */
</component>
  1. 組件渲染是串行的,而原生的是并行的。假設一個頁面中用到了5個A組件,一個組件渲染時間大約為100毫秒,那么在原生中所有組件渲染完成約為100毫秒(并行渲染),而在mpvue中則需要約為500毫秒(串行渲染)。
  2. 當動態綁定一個數據時,某些情況下即使該數據沒有發生變化,也會被刷新。如下面是一個簡單的 slider,想要在拖動的時候實時修改標題,但是會不斷地重新賦值為 chapterIndex 的值,就會出現回彈的 bug ,而且松手后的 value 不是最新的 value,而是 chapterIndex(下面注釋部分為解決方案)。scroll-view 如果動態綁定 scrolltop 也有同樣的問題。
// 假設現在chapterIndex為0,slider最大為10
<slider :value="chapterIndex"
          @changing="sliderChooseChaptering"
          @change="sliderChooseChaptered">


// 拖動slider到5處
sliderChooseChaptering(e) {
    // this.chapterIndex = undefined;       // 通過設置為undefined可以避免滾動條回退
    this.toolbarTitle = 'new title';      // 改動了標題變量,但是slider會被重新賦值,小圓點回退到0處
},

sliderChooseChaptered(e) {
    let chapterIndex = e.mp.detail.value;
    console.log(chapterIndex);            // 值為0,而不是5
    // this.chapterIndex = chapterIndex;    // 重新賦值
}
  1. 上傳體驗版的時候,訪問路徑為 pages/***/main,如 pages/index/main
  2. 圖片 url 不能使用相對路徑, 否則在手機上將顯示不出來
<image :src = 'imgUrl'></image>

imgUrl() {
    return '../../static/images/test.png';  // 錯誤方法
    return '/static/images/test.png';   // 正確方法
}
  1. scroll-view 中無法監聽到垂直的 touchmove (原生的也有同樣的問題)
 <scroll-view style="height:100rpx" scroll-y @touchstart="tstart" @touchend="tend" @touchmove="tmove"><div style="height: 200rpx">hahahah</div></scroll-view>


tstart() {
  console.log('tstart');
},
tend() {
  console.log('tend');
},
tmove() {
  console.log('tmove');
},

wepy 問題總結 - 2018-03-12

  1. 組件動態綁定只能綁定一層,如 :nickName.sync="nickName",當父組件的 nickName 改變時,子組件中的數據沒有刷新
  2. 1.7.2中可以使用原生組件解決了組件共享數據的問題,但是父組件無法再通過 $broadcast 下傳事件了
  3. 當使用 image 時可能會導致體驗 bug ,出現場景:側滑組件分上下兩層,上層含有 image 標簽,當快速加載多個側滑組件時,會出現下層按鈕閃現的情況(百來毫秒),降低體驗感
  4. 沒有數據共享??
  5. 組件循環渲染一定要用repeat,而repeat本身充滿了bug,真的讓人頭疼 #issue

mpvue相對于wepy的優勢

  1. mpvue 組件化開發能力更強,wepy 組件化支持仍有很多不足,其中組件數據共享的問題簡直雞肋。雖然在1.7.2之后可以使用原生的組件從而達到數據隔離的目的,但是原生語法和 wepy 語法很容易發生混淆。如果要循環渲染組件,則一定要用到 repeat 標簽,而 repeat 標簽本身充滿著 bug
  2. mpvue支持 vuexwepy 開發過程中多頁面間共享的數據很難維護,只能用 globaldata 或者 storage 來達到數據共享效果。
  3. 語法和特性與 vue 更加類似,wepy 只是借鑒了 vue,本身和 vue 還是有較大差別的。

mpvue相對于wepy的劣勢

  1. 和wepy一樣,{ { } } 中不支持復雜的js語法,因為 mpvue 會把 { { } }中的內容直接編譯到 wxml 中,受限于微信小程序的能力。
  2. 不支持復雜 slot,具名 slot 和單個 slot 插槽可以支持,但是 slotscoped 不支持,即下面的情況無法獲取 itemindex
<component v-for="item in todos" :key="item">
    {{ item }}  /* 獲取不到 */
</component>
  1. 組件中不支持transition,動畫可能要跪
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 簡介 微信小程序入門門檻低、開發周期短、代碼編寫靈活、傳播速度快等優點讓微信小程序迅速火爆,開發者紛紛涌入,任何語...
    大公爵閱讀 4,227評論 0 10
  • 本文長時間沒有更新 請跳轉小程序框架wepy文檔鏈接查看[https://developers.weixin.qq...
    你期待的花開閱讀 4,721評論 2 14
  • 狂心未歇愁殺人,晴晴雨雨哪得真? 禪心若然安得住,花開花落皆法門。 ______讀《哈扎拉爾》,如...
    樊晴雪閱讀 661評論 0 6
  • 默默地我走了, 正如我默默地來, 我揮一揮手掌, 道不盡幾許涼愁, 品一杯名叫長生的茶, 散幾何不歸的惆悵。
    故宮墻閱讀 241評論 13 14