mpvue开发小程序项目遇到的问题
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开发小程序教程(一)
前段时间,美团开源了mpvue这个项目,使得我们又多了一种用来开发小程序的框架选项.由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler),因此在用法上面是高度和Vue一 ...
- 使用mpvue开发小程序教程(二)
在上篇文章中,我们介绍了使用mpvue开发小程序所需要的一些开发环境的搭建,并创建了第一个mpvue小程序代码骨架并将其运行起来.在本文中,我们来研究熟悉一下mpvue项目的主要目录和文件结构. 在V ...
- 使用mpvue开发小程序教程(四)
在上一章节中,我们将vue-cli命令行工具生成的代码骨架中的src目录清理了一遍,然后从头开始配置和编写了一个可以运行的小程序页面,算是正真走上了使用mpvue开发小程序的第一步.今天我们将进一步来 ...
- 使用mpvue开发小程序
前言: 最近接到小程序的开发需求,由于之前也没开发过小程序,心情还是有点激动.先花15分钟看一遍小程序官方文档,再花10分钟看一遍mpvue官方文档,然后拿着原型图和UI图就开干.踩了不少坑,写篇博客 ...
- 学习笔记:mpvue开发小程序——入门
接下来可能要开发一个小程序,同事推荐使用mpvue,那么我提前熟悉下. 官网地址:http://mpvue.com/ 1.快速上手 http://mpvue.com/mpvue/quickstart/ ...
- 使用mpvue开发小程序教程(三)
在上一篇文章中,我们熟悉了一下通过vue-cli生成的mpvue工程代码骨架的基本结构,大致了解了每一个部分的代码到底要放到何处.从本文起我们就开始涉及真正的编码部分,学习使用Vue的语法去编写小程序 ...
- 使用mpvue开发小程序教程(五)
在上一章节中,我们了解了组件的三个基本特性以及组件的基本使用方法.在实际的小程序开发中,我们应该以组件的思维去设计每个小程序的功能页面,对其进行合理的组件拆分,让每个部分都保持功能简洁.条理清楚.各司 ...
- 基于mpvue的小程序项目搭建的步骤
mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小 ...
- 基于mpvue的小程序项目搭建的步骤一
未标题-1.png mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验 ...
随机推荐
- 单点突破:MySQL之索引
前言 开发环境:MySQL5.7.31 什么是索引 在MySQL中,索引(Index)是帮助高效获取数据的数据结构. 我们可以将数据库理解为一本书,数据库中的各个数据列(column)就是目录中的章节 ...
- python 日期与字符串之间的转换
1.str转换为datetime >>> from datetime import datetime >>> cday = datetime.strptime('2 ...
- 【NX二次开发】Block UI 从列表选择部件
属性说明 属性 类型 描述 常规 BlockID String 控件ID Enable Logical 是否可操作 Group ...
- ES6中的Map
今天小编和大家一起探讨一下引用类型中的map,在其中会有一些map与数组联合应用,还有和map类似的weakmap类型的说明,这篇文章同时也增加了一些操作数组的办法和实际应用.大家也可以关注我的微信公 ...
- Spring自定义转换类,让@Value更方便
我最新最全的文章都在南瓜慢说 www.pkslow.com,欢迎大家来喝茶! 1 前言 关于配置的文章已经写了很多,相信看过的人还是会有一定收获的,系列文章可阅读:南瓜慢说-配置相关文章.对于@Val ...
- 解Bug之路-ZooKeeper集群拒绝服务
解Bug之路-ZooKeeper集群拒绝服务 前言 ZooKeeper作为dubbo的注册中心,可谓是重中之重,线上ZK的任何风吹草动都会牵动心弦.最近笔者就碰到线上ZK Leader宕机后,选主无法 ...
- 如何设置Python环境变量
大家好,我是Yivies.相信很多python的初学者们在进行一顿下一步下一步的安装之后,在windows command命令行输入python的时候会出现这样的情况: 可我们希望它是这样子的: 其实 ...
- WEB安全新玩法 [3] 防护交易数据篡改
在任何涉及交易的系统中,客户与商家之间的交易数据具有核心作用,如购买商品的价格.数量.型号和优惠券等.在客户挑选商品的过程中,这些交易数据逐渐形成:待客户提交订单时,交易数据被商家接收,形成双方认可的 ...
- Bootstrap中宽度大于指定宽度时有空白的解决方法
<div class="container-fluid"></div> 其中container-fluid的作用是占100%
- ECMAScript 2021 正式确认
ECMAScript 2021 主要包含内容: ECMAScript 2021 于2021年6月22日获得 ECMA International 的批准.ECMAScript 是标准化的 JavaSc ...