微信小程序中@vant/weapp的组件van-calendar及van-picker显示异常问题

本文讲述了作者在处理新项目时遇到的小程序vant组件显示异常问题,涉及picker和calendar组件在不同环境下的显示问题,以及解决过程中尝试的技术路径和最终解决方案。

小程序vant显示异常问题

背景

新的紧急项目又来了,新的紧急项目又在年前来了,新的要求一个月内完成的紧急项目又在年前来了…(老板说了,做不完,过年给三工,不能走!!!)

前言

由于新的项目需求将来部署环境可能设计小程序及PC端,在技术选型的时候也增纠结过uniapp+uView2.0还是微信小程序原生+vant。当然了,从标题想必也看出来我选了什么了。本来以为会很顺利的将页面原型百分之九十九点九九九九…的还原出来,但是往往事非人愿,新建了小程序并集成了weapp vant以后,并非一帆风顺

过程

在某个页面使用到picker进行选择的时候,由于是在屏幕中间进行选择的,固使用了popup+picker的组合,当显示了toolbar的标题及按钮时,在模拟器上一切都很正常,但当预览的时候发现,上下两个toolbar!!!当我的心情就是:沃德法克???
曾怀疑是popup的问题,后发现隐藏toolbar就没问题了…后着急赶项目(赖的继续研究以为的组件bug)就隐藏了toolbar然后自定义了一个顺利解决该显示问题。
万万没想到的是,事情并没有因为绕过这个问题而结束。当用到calendar显示日历的时候…它在真机上就老老实实的平铺在页面下面,甚至还能滚动页面看到更多日期。联想到之前的picker问题…看来确实需要解决这个拦路虎了
在这里插入图片描述

在这里插入图片描述
一开始也曾怀疑是vant的版本问题,遂找了一个以前的项目vant版本修改并重新install构建npm…然并卵
后怀疑是project.config.json中配置问题,还是老项目,复制粘贴…还并卵
最后想到了升级skyline的提示以优化内容,将skyline设为false,还是不行。

结果

删一行代码

"componentFramework": "glass-easel",
<think>问题分析: 根据错误信息,问题发生在微信小程序组件配置文件中。具体来说,在文件 `components/custom-form-modal/index.json` 中,配置了使用 `@vant/weapp` 的 `field` 组件,但是微信开发者工具在多个路径下都没有找到这个组件。 错误信息中列出了搜索路径,包括: - 相对于当前组件的路径(`components/custom-form-modal/`下的路径) - 相对于项目根目录的路径(`miniprogram_npm` 目录) 可能的原因: 1. 没有安装 `@vant/weapp` 包。 2. 安装的路径不正确,没有放在项目根目录下的 `miniprogram_npm` 文件夹中。 3. 在 `project.config.json` 中没有正确设置 `miniprogram_npm` 的路径(但通常默认就是 `miniprogram_npm`)。 4. 组件路径引用错误。 解决方案: 1. 确保已经正确安装了 `@vant/weapp`。可以使用 npm 安装: npm i @vant/weapp -S --production 2. 在微信开发者工具中,点击菜单栏的“工具” -> “构建 npm”,将 `@vant/weapp` 构建到 `miniprogram_npm` 目录下。 3. 检查 `project.config.json` 文件,确保 `setting` 中的 `packNpmManually` 和 `packNpmRelationList` 配置正确(如果使用手动构建npm,则需要配置)。 4. 检查组件引用路径是否正确。 在 `index.json` 中引用组件的路径,通常有两种方式: - 绝对路径:从项目根目录开始,例如:`/miniprogram_npm/@vant/weapp/field/index` - 相对路径:但这里我们通常使用绝对路径,因为组件可能被多个地方引用。 但是,在组件的配置文件中,我们也可以使用相对于项目根目录的绝对路径。根据错误信息,搜索路径中包含了 `miniprogram_npm` 目录,因此我们可以尝试使用绝对路径。 修改 `components/custom-form-modal/index.json` 文件: 将原来的 `"van-field": "@vant/weapp/field/index"` 改为绝对路径: "van-field": "/miniprogram_npm/@vant/weapp/field/index" 但是,请注意,如果项目配置了自定义的 `miniprogram_npm` 路径,那么需要根据实际路径来写。 另外,还有一种可能是,在构建npm之后,`@vant/weapp` 包并没有被正确构建到 `miniprogram_npm` 目录下。因此,请先确保构建npm步骤成功,并且在项目根目录下生成了 `miniprogram_npm` 文件夹,且里面有 `@vant/weapp` 的组件。 如果构建npm后没有生成,可以尝试在 `project.config.json` 中配置: ```json "setting": { "packNpmManually": true, "packNpmRelationList": [ { "packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./" } ] } ``` 但通常,我们不需要手动配置,除非有特殊需求。默认情况下,构建npm会生成在 `miniprogram_npm` 目录下。 如果以上步骤都做了还是不行,可以尝试删除 `miniprogram_npm` 目录,然后重新构建npm。 另外,注意检查 `package.json` 中是否确实有 `@vant/weapp` 的依赖。 步骤总结: 1. 安装依赖:在项目根目录下执行 `npm install @vant/weapp --save` 2. 在微信开发者工具中,点击“工具”->“构建npm”。 3. 修改 `index.json` 中的组件路径为绝对路径:`/miniprogram_npm/@vant/weapp/field/index` 4. 重新编译。 如果问题仍然存在,请检查构建npm是否成功,以及构建后的目录结构是否正确。 注意:在组件的json文件中,路径的写法不需要加扩展名(如`.js`、`.wxml`等),只需要到目录名,然后指定到`index`即可(因为vant组件都是index.js这样的形式)。 示例修改后的 `index.json`: ```json { "usingComponents": { "van-field": "/miniprogram_npm/@vant/weapp/field/index" } } ``` 如果按照上述步骤操作后仍然报错,请检查构建npm后生成的目录结构,确保在 `miniprogram_npm/@vant/weapp/field` 目录下存在 `index.js`、`index.json` 等文件。 如果目录结构正确,那么可能是微信开发者工具缓存问题,可以尝试重启开发者工具。 如果项目使用了TypeScript,还需要注意将 `miniprogram_npm` 加入到 `tsconfig.json` 的 `include` 中,以避免类型错误(但这不是运行时错误)。 由于问题中提到了多个搜索路径,其中包含了 `miniprogram_npm` 目录,所以使用绝对路径 `/miniprogram_npm/...` 应该能够被正确解析。 因此,解决方案的核心是:确保npm包存在且构建正确,然后使用绝对路径引用。 代码修改示例(index.json):</think>### 问题分析 错误信息表明微信小程序在加载 `@vant/weapp/field` 组件时失败,开发者工具在多个路径下都找不到该组件。核心问题在于 **组件路径引用错误** 或 **npm 包未正确构建**。 ### 解决方案 #### 1. 修复组件引用路径(推荐方案) 在 `components/custom-form-modal/index.json` 中,将组件路径改为**绝对路径**(从项目根目录开始): ```json:components/custom-form-modal/index.json { "usingComponents": { "van-field": "/miniprogram_npm/@vant/weapp/field/index" } } ``` #### 2. 检查 npm 构建流程 确保已正确安装并构建 `@vant/weapp`: 1. **安装依赖**(在项目根目录执行): ```bash npm install @vant/weapp ``` 2. **微信开发者工具中构建 npm**: - 点击顶部菜单:工具 → 构建 npm - 确保生成 `miniprogram_npm/@vant/weapp` 目录 #### 3. 检查 `project.config.json` 配置 确认构建配置正确(关键配置): ```json:project.config.json { "setting": { "packNpmManually": true, "packNpmRelationList": [ { "packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./" // 指定 npm 输出目录为项目根目录 } ] } } ``` #### 4. 验证目录结构 构建成功后,检查目录结构应包含: ``` miniprogram_npm/ └── @vant └── weapp └── field ├── index.js ├── index.json ├── index.wxml └── index.wxss ``` ### 常见错误原因 1. **路径错误**:使用了相对路径 `@vant/weapp/...` 而非绝对路径 `/miniprogram_npm/@vant/weapp/...` 2. **未构建 npm**:安装依赖后未在开发者工具中执行"构建 npm" 3. **配置缺失**:`project.config.json` 中未开启手动构建配置 4. **缓存问题**:开发者工具未更新最新文件(可尝试重启工具) ### 验证修复 1. 修改 `index.json` 中的组件路径 2. 重新构建 npm 3. 清理缓存:微信开发者工具 → 编译 → 勾选"重新编译" --- ###
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值