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的原因，不详。。。