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

posted @ 2018-09-05 17:37  Damon风  阅读(319)  评论(0编辑  收藏  举报