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. GPU上的快速光谱图分区

    GPU上的快速光谱图分区 图形是用于对物理,生物,社会和信息系统中许多类型的关系和过程进行建模的数学结构.用于解决各种高性能计算和数据分析问题.对于网络分析,基因组学,社交网络分析和其他领域,大规模图 ...

  2. EasyExcel 框架使用-读

    EasyExcel 框架使用 官方介绍:JAVA解析Excel工具EasyExcel Java解析.生成Excel比较有名的框架有Apache poi.jxl.但他们都存在一个严重的问题就是非常的耗内 ...

  3. Configuration problem: Unable to locate Spring NamespaceHandler for XML schema namespace [http://dubbo.apache.org/schema/dubbo]

    dubbo的官方文档写的真好, http://dubbo.apache.org/zh-cn/docs/2.7/user/dependencies/ 在使用dubbo过程中的问题, 和解决 org.sp ...

  4. 从Vehicle-ReId到AI换脸,应有尽有,解你所惑

    最近在做视频搜索的技术调研,已经初步有了一些成果输出,算法准确性还可以接受,基本达到了调研的预期.现将该技术调研过程中涉及到的内容总结一篇文章分享出来,内容比较多,初看起来可能关系不大,但是如果接触面 ...

  5. Django(65)jwt认证原理

    前言 带着问题学习是最有目的性的,我们先提出以下几个问题,看看通过这篇博客的讲解,能解决问题吗? 什么是JWT? 为什么要用JWT?它有什么优势? JWT的认证流程是怎样的? JWT的工作原理? 我们 ...

  6. Oracle冷备

    概念:一致性的备份,也就是在数据库一致性关闭后做的备份,一般用:shutdown immediate方式关闭. 步骤:1.查看三大核心文件所在位置:数据文件,控制文件,日志文件 数据文件:select ...

  7. WPF中ListView控件怎么添加新的tiem时滚动条一直在最下面

    listBox.ScrollIntoView(listBox.Items[listBox.Items.Count - 1])

  8. vs2008中安装dev之后输入代码会输入代码段但是报错,可能解决方法

    vs2008工具栏DevExpress→Options 取消勾选这个

  9. R-聚类

    一.定义:将物理或抽象对象的集合分成由类似的对象组成的多个类的过程被称为聚类 二.距离:欧几里得度量(euclidean metric)也称欧氏距离       绝对值距离(manhattan)   ...

  10. js 判断是什么浏览器加载页面

    一.Navigator 属性: 1)appcodeName  返回浏览器代码名 2)appminorVersion  返回浏览器次级版本 3)appname  返回浏览器名称 4)browserLan ...