mpvue项目

最近用mpvue开发了一个家庭私人医生签约的小程序项目。记录总结一下，开发过程中遇到的一些问题。

关于页面进栈出栈的状态值问题

页面进出栈，会触发onLoad/unLoad事件。出栈不触发vue的destroyed事件，状态值是不reset的。

check-group和radio-group的问题

很多坑，尽量别用

value绑定选中值，值无法绑定item（object类型），只能绑定item.value（string类型）的值。想到一个方法：可以通过item.jsonItem = JSON.stringify(item) && value = "item.jsonItem"的方法去拿到item的json字符串对象。
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的原因，不详。。。

巴特西

mpvue开发小程序项目遇到的问题

mpvue项目

关于页面进栈出栈的状态值问题

check-group和radio-group的问题

在html模版中运算

mpvue-loader

storage

page页面数量（页面栈）

v-if 与事件冲突

v-show

当slot遇到event

最新文章

热门文章

巴特西

mpvue开发小程序项目遇到的问题

mpvue项目

关于页面进栈出栈的状态值问题

check-group和radio-group的问题

在html模版中运算

mpvue-loader

storage

page页面数量（页面栈）

v-if 与 事件冲突

v-show

当slot遇到event

最新文章

热门文章

v-if 与事件冲突