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

mpvue項目

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

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

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

check-group和radio-group的問題

==不少坑,儘可能別用==vue

  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模版中運算

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

<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。json

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;"去實現的。ui

當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的緣由,不詳。。。this

相關文章
相關標籤/搜索