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

mpvue开发小程序项目遇到的问题的更多相关文章

  1. 使用mpvue开发小程序教程(一)

    前段时间,美团开源了mpvue这个项目,使得我们又多了一种用来开发小程序的框架选项.由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler),因此在用法上面是高度和Vue一 ...

  2. 使用mpvue开发小程序教程(二)

    在上篇文章中,我们介绍了使用mpvue开发小程序所需要的一些开发环境的搭建,并创建了第一个mpvue小程序代码骨架并将其运行起来.在本文中,我们来研究熟悉一下mpvue项目的主要目录和文件结构. 在V ...

  3. 使用mpvue开发小程序教程(四)

    在上一章节中,我们将vue-cli命令行工具生成的代码骨架中的src目录清理了一遍,然后从头开始配置和编写了一个可以运行的小程序页面,算是正真走上了使用mpvue开发小程序的第一步.今天我们将进一步来 ...

  4. 使用mpvue开发小程序

    前言: 最近接到小程序的开发需求,由于之前也没开发过小程序,心情还是有点激动.先花15分钟看一遍小程序官方文档,再花10分钟看一遍mpvue官方文档,然后拿着原型图和UI图就开干.踩了不少坑,写篇博客 ...

  5. 学习笔记:mpvue开发小程序——入门

    接下来可能要开发一个小程序,同事推荐使用mpvue,那么我提前熟悉下. 官网地址:http://mpvue.com/ 1.快速上手 http://mpvue.com/mpvue/quickstart/ ...

  6. 使用mpvue开发小程序教程(三)

    在上一篇文章中,我们熟悉了一下通过vue-cli生成的mpvue工程代码骨架的基本结构,大致了解了每一个部分的代码到底要放到何处.从本文起我们就开始涉及真正的编码部分,学习使用Vue的语法去编写小程序 ...

  7. 使用mpvue开发小程序教程(五)

    在上一章节中,我们了解了组件的三个基本特性以及组件的基本使用方法.在实际的小程序开发中,我们应该以组件的思维去设计每个小程序的功能页面,对其进行合理的组件拆分,让每个部分都保持功能简洁.条理清楚.各司 ...

  8. 基于mpvue的小程序项目搭建的步骤

    mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小 ...

  9. 基于mpvue的小程序项目搭建的步骤一

    未标题-1.png mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验 ...

随机推荐

  1. 单点突破:MySQL之索引

    前言 开发环境:MySQL5.7.31 什么是索引 在MySQL中,索引(Index)是帮助高效获取数据的数据结构. 我们可以将数据库理解为一本书,数据库中的各个数据列(column)就是目录中的章节 ...

  2. python 日期与字符串之间的转换

    1.str转换为datetime >>> from datetime import datetime >>> cday = datetime.strptime('2 ...

  3. 【NX二次开发】Block UI 从列表选择部件

    属性说明 属性   类型   描述   常规           BlockID    String    控件ID    Enable    Logical    是否可操作    Group    ...

  4. ES6中的Map

    今天小编和大家一起探讨一下引用类型中的map,在其中会有一些map与数组联合应用,还有和map类似的weakmap类型的说明,这篇文章同时也增加了一些操作数组的办法和实际应用.大家也可以关注我的微信公 ...

  5. Spring自定义转换类,让@Value更方便

    我最新最全的文章都在南瓜慢说 www.pkslow.com,欢迎大家来喝茶! 1 前言 关于配置的文章已经写了很多,相信看过的人还是会有一定收获的,系列文章可阅读:南瓜慢说-配置相关文章.对于@Val ...

  6. 解Bug之路-ZooKeeper集群拒绝服务

    解Bug之路-ZooKeeper集群拒绝服务 前言 ZooKeeper作为dubbo的注册中心,可谓是重中之重,线上ZK的任何风吹草动都会牵动心弦.最近笔者就碰到线上ZK Leader宕机后,选主无法 ...

  7. 如何设置Python环境变量

    大家好,我是Yivies.相信很多python的初学者们在进行一顿下一步下一步的安装之后,在windows command命令行输入python的时候会出现这样的情况: 可我们希望它是这样子的: 其实 ...

  8. WEB安全新玩法 [3] 防护交易数据篡改

    在任何涉及交易的系统中,客户与商家之间的交易数据具有核心作用,如购买商品的价格.数量.型号和优惠券等.在客户挑选商品的过程中,这些交易数据逐渐形成:待客户提交订单时,交易数据被商家接收,形成双方认可的 ...

  9. Bootstrap中宽度大于指定宽度时有空白的解决方法

    <div class="container-fluid"></div> 其中container-fluid的作用是占100%

  10. ECMAScript 2021 正式确认

    ECMAScript 2021 主要包含内容: ECMAScript 2021 于2021年6月22日获得 ECMA International 的批准.ECMAScript 是标准化的 JavaSc ...