mpvue+vant weapp项目开发过程中遇到的问题(第一篇)

2023-12-29 09:38

本文主要是介绍mpvue+vant weapp项目开发过程中遇到的问题(第一篇),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、组件上bind:方法名=“方法”,找不到方法

报错图:
在这里插入图片描述

百度到的:都说methods不可用,可以用computed代替,但是我用了computed,里面的方法全都在页面载入时做完了。。。还操作毛线。。。

解决办法:误打误撞用methods可以了。把组件上的bind:方法名="方法"改成@方法名="方法";js依旧按vue的语法来写:

<van-pickershow-toolbartitle="节日":columns="columns"@cancel="onCancel()"
></van-picker>
export default {data() {return {festival: ""};},methods: {onCancel: function() {console.log("取消");}}
};

二、表单中,event.detail取不到值

vant weapp的文档上的picker选择器:
在这里插入图片描述
即event.detail可以取到选择器的值。

用mpvue果然不行,报错如下:
在这里插入图片描述

解决办法:在组件上写方法的地方,参数中写$event,例如

<van-pickershow-toolbartitle="节日":columns="columns"@cancel="onCancel()"@confirm="onConfirm($event)"
></van-picker>

e.mp.detail代替原来的e.detail,即e.mp.detail.value即可获得选择器选中的值了。

20190112更新:有类似情况,在使用actionsheet的时候onSelect选择某一项,detail里面只有name,因为我actions这个数据写的是:
在这里插入图片描述
那么e.mp.detail打印出来就只有name:
在这里插入图片描述
所以看情况取key名,可以先打印e.mp.detail看里面有什么是你需要的内容。

三、vant weapp的button宽度问题

vant weapp的button一般是按文字长度显示宽度的。如果想要显示充满整行的button:
在这里插入图片描述
按照官网给的示例写“大号按钮”就能充满宽度,实际可行。
在这里插入图片描述
就是高度有点大,丑了点。。。不知道该怎么办,求解。

四、mpvue定义全局变量

该方法转载自【mossbaoo 的 mpvue开发微信小程序的全局变量问题-Vuex】
使用vue的vuex的方法:

  1. 在项目src目录下创建stores文件夹,在该文件夹下创建globalStore.js文件
    在这里插入图片描述
  2. 在globalStore.js文件中(比如我需要一个url的全局变量)
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state:{url:"https://www.cxya.club:8443/"}
});
  1. 使用
    在需要使用的vue文件的script中
    引入store文件
import globalStore from './../../stores/globalStore';

globalStore.state.url这样使用

wx.request({url:globalStore.state.url+'home',header:{'content-type':'application/json'},success(res){console.log(res);}});

这篇关于mpvue+vant weapp项目开发过程中遇到的问题(第一篇)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/549114

相关文章

怎样通过分析GC日志来定位Java进程的内存问题

《怎样通过分析GC日志来定位Java进程的内存问题》:本文主要介绍怎样通过分析GC日志来定位Java进程的内存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、GC 日志基础配置1. 启用详细 GC 日志2. 不同收集器的日志格式二、关键指标与分析维度1.

Java进程异常故障定位及排查过程

《Java进程异常故障定位及排查过程》:本文主要介绍Java进程异常故障定位及排查过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、故障发现与初步判断1. 监控系统告警2. 日志初步分析二、核心排查工具与步骤1. 进程状态检查2. CPU 飙升问题3. 内存

Java 线程安全与 volatile与单例模式问题及解决方案

《Java线程安全与volatile与单例模式问题及解决方案》文章主要讲解线程安全问题的五个成因(调度随机、变量修改、非原子操作、内存可见性、指令重排序)及解决方案,强调使用volatile关键字... 目录什么是线程安全线程安全问题的产生与解决方案线程的调度是随机的多个线程对同一个变量进行修改线程的修改操

深度解析Java项目中包和包之间的联系

《深度解析Java项目中包和包之间的联系》文章浏览阅读850次,点赞13次,收藏8次。本文详细介绍了Java分层架构中的几个关键包:DTO、Controller、Service和Mapper。_jav... 目录前言一、各大包1.DTO1.1、DTO的核心用途1.2. DTO与实体类(Entity)的区别1

SpringBoot整合liteflow的详细过程

《SpringBoot整合liteflow的详细过程》:本文主要介绍SpringBoot整合liteflow的详细过程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋...  liteflow 是什么? 能做什么?总之一句话:能帮你规范写代码逻辑 ,编排并解耦业务逻辑,代码

Redis出现中文乱码的问题及解决

《Redis出现中文乱码的问题及解决》:本文主要介绍Redis出现中文乱码的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 问题的产生2China编程. 问题的解决redihttp://www.chinasem.cns数据进制问题的解决中文乱码问题解决总结

Java中调用数据库存储过程的示例代码

《Java中调用数据库存储过程的示例代码》本文介绍Java通过JDBC调用数据库存储过程的方法,涵盖参数类型、执行步骤及数据库差异,需注意异常处理与资源管理,以优化性能并实现复杂业务逻辑,感兴趣的朋友... 目录一、存储过程概述二、Java调用存储过程的基本javascript步骤三、Java调用存储过程示

MySQL中的InnoDB单表访问过程

《MySQL中的InnoDB单表访问过程》:本文主要介绍MySQL中的InnoDB单表访问过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、背景2、环境3、访问类型【1】const【2】ref【3】ref_or_null【4】range【5】index【6】

浏览器插件cursor实现自动注册、续杯的详细过程

《浏览器插件cursor实现自动注册、续杯的详细过程》Cursor简易注册助手脚本通过自动化邮箱填写和验证码获取流程,大大简化了Cursor的注册过程,它不仅提高了注册效率,还通过友好的用户界面和详细... 目录前言功能概述使用方法安装脚本使用流程邮箱输入页面验证码页面实战演示技术实现核心功能实现1. 随机

全面解析MySQL索引长度限制问题与解决方案

《全面解析MySQL索引长度限制问题与解决方案》MySQL对索引长度设限是为了保持高效的数据检索性能,这个限制不是MySQL的缺陷,而是数据库设计中的权衡结果,下面我们就来看看如何解决这一问题吧... 目录引言:为什么会有索引键长度问题?一、问题根源深度解析mysql索引长度限制原理实际场景示例二、五大解决