mpvue開發小程序項目遇到的問題

mpvue項目

最近用mpvue開發了一個家庭私人醫生簽約的小程序項目。記錄總結一下，開發過程當中遇到的一些問題。

關於頁面進棧出棧的狀態值問題

1. 頁面進出棧，會觸發onLoad/unLoad事件。出棧不觸發vue的destroyed事件，狀態值是不reset的。

check-group和radio-group的問題

==不少坑，儘可能別用==

1. value綁定選中值，值沒法綁定item（object類型），只能綁定item.value（string類型）的值。想到一個方法：能夠經過item.jsonItem = JSON.stringify(item) && value = "item.jsonItem"的方法去拿到item的json字符串對象。
2. change事件下，拿到選中的值：this.value = event.target.value的方式會出現選不中的bug。經測試，定一個vue組件外部的變量value，再value = event.target.value就不會出現bug。

在html模版中運算

注意，有些必須加()包起來。例如，下面的 || 運算

<div :style="{background: 'url(' + (userInfo.avatar || wxuserInfo.avatarUrl) + ') no-repeat center / cover'}"> </div>

mpvue-loader

問題：npm run build不生成一些文件。因爲mpvue-loader的版本更新了。把package.json的"mpvue-loader": "^1.0.13"的「^」符號 去了,即"mpvue-loader": "1.0.13"便可。若是有「^」號，npm install的時候，會下載新的版本mpvue-loader。若是沒有「^」，則下載的就是1.0.13版本的mpvue-loader。

storage

爲了每次進入頁面都獲取最新的storage，須要在onShow下，每次獲取最新的storage。例如：

this.wxuserInfo = wx.getStorageSync('wxuserInfo') || {}

page頁面數量（頁面棧）

頁面棧最多有十個page頁面。若是超過十個page，不能再添加新的頁面了。執行wx.navigateTo(url: 'xxx')，無反應。

v-if 與 事件衝突

<!-- 用v-if出現bug，沒法觸發點擊事件，因此用display代替 -->
<!-- <div v-if="isShow" class="more" @click="onMore">查看更多(不可觸發點擊事件))</div> -->
<div :style="{display: isShow @click="onMore">查看更多（可觸發點擊事件）</div>

v-show

本人使用v-show不起做用（可是別人好像能夠，也是操蛋了...）。涉及到display：none；的操做，經過:style="display: xxx;"去實現的。

當slot遇到event

<sign-cell v-if="!terminated" left="簽約協議">
    <template slot="right">
        <!-- HACK: 若是不stop， 會出現點擊事件執行了兩次的bug -->
        <div class="badge-protol" @click.stop="onProtocol">查看</div>
    </template>
</sign-cell>

bug：點擊查看按鈕，觸發了兩次onProtocol事件。

思考：在slot裏面的html綁定的事件會出現觸發兩次點擊事件的bug。使用.stop修飾符，便可解決。具體出現bug的緣由，不詳。。。