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

相关文章

sky-take-out项目中Redis的使用示例详解

《sky-take-out项目中Redis的使用示例详解》SpringCache是Spring的缓存抽象层,通过注解简化缓存管理,支持Redis等提供者,适用于方法结果缓存、更新和删除操作,但无法实现... 目录Spring Cache主要特性核心注解1.@Cacheable2.@CachePut3.@Ca

Web服务器-Nginx-高并发问题

《Web服务器-Nginx-高并发问题》Nginx通过事件驱动、I/O多路复用和异步非阻塞技术高效处理高并发,结合动静分离和限流策略,提升性能与稳定性... 目录前言一、架构1. 原生多进程架构2. 事件驱动模型3. IO多路复用4. 异步非阻塞 I/O5. Nginx高并发配置实战二、动静分离1. 职责2

解决升级JDK报错:module java.base does not“opens java.lang.reflect“to unnamed module问题

《解决升级JDK报错:modulejava.basedoesnot“opensjava.lang.reflect“tounnamedmodule问题》SpringBoot启动错误源于Jav... 目录问题描述原因分析解决方案总结问题描述启动sprintboot时报以下错误原因分析编程异js常是由Ja

Java Kafka消费者实现过程

《JavaKafka消费者实现过程》Kafka消费者通过KafkaConsumer类实现,核心机制包括偏移量管理、消费者组协调、批量拉取消息及多线程处理,手动提交offset确保数据可靠性,自动提交... 目录基础KafkaConsumer类分析关键代码与核心算法2.1 订阅与分区分配2.2 拉取消息2.3

Python实战之SEO优化自动化工具开发指南

《Python实战之SEO优化自动化工具开发指南》在数字化营销时代,搜索引擎优化(SEO)已成为网站获取流量的重要手段,本文将带您使用Python开发一套完整的SEO自动化工具,需要的可以了解下... 目录前言项目概述技术栈选择核心模块实现1. 关键词研究模块2. 网站技术seo检测模块3. 内容优化分析模

MySQL 表空却 ibd 文件过大的问题及解决方法

《MySQL表空却ibd文件过大的问题及解决方法》本文给大家介绍MySQL表空却ibd文件过大的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考... 目录一、问题背景:表空却 “吃满” 磁盘的怪事二、问题复现:一步步编程还原异常场景1. 准备测试源表与数据

SpringBoot通过main方法启动web项目实践

《SpringBoot通过main方法启动web项目实践》SpringBoot通过SpringApplication.run()启动Web项目,自动推断应用类型,加载初始化器与监听器,配置Spring... 目录1. 启动入口:SpringApplication.run()2. SpringApplicat

解决Nginx启动报错Job for nginx.service failed because the control process exited with error code问题

《解决Nginx启动报错Jobfornginx.servicefailedbecausethecontrolprocessexitedwitherrorcode问题》Nginx启... 目录一、报错如下二、解决原因三、解决方式总结一、报错如下Job for nginx.service failed bec

SysMain服务可以关吗? 解决SysMain服务导致的高CPU使用率问题

《SysMain服务可以关吗?解决SysMain服务导致的高CPU使用率问题》SysMain服务是超级预读取,该服务会记录您打开应用程序的模式,并预先将它们加载到内存中以节省时间,但它可能占用大量... 在使用电脑的过程中,CPU使用率居高不下是许多用户都遇到过的问题,其中名为SysMain的服务往往是罪魁

基于Java开发一个极简版敏感词检测工具

《基于Java开发一个极简版敏感词检测工具》这篇文章主要为大家详细介绍了如何基于Java开发一个极简版敏感词检测工具,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下... 目录你是否还在为敏感词检测头疼一、极简版Java敏感词检测工具的3大核心优势1.1 优势1:DFA算法驱动,效率提升10