简单讲解关于微信小程序调整 miniprogram 后, tabbar 找不到图片的原因之一

微信小程序开发,[ miniprogram/app.json 文件内容错误],["tabBar"]["list"][0]["iconPath"]: "/miniprogram/assets/tabbar/icon_main_home.png" 未找到

  • 简单讲解关于调整 miniprogram 后, tabbar 找不到图片的原因之一
    • 问题出现的原因
    • 错误提示
    • 出现错误疑惑点
    • 错误原因
    • 正确写法
    • 总结

简单讲解关于调整 miniprogram 后, tabbar 找不到图片的原因之一

问题出现的原因

  1. 当我开发微信小程序一段时间后,就准备使用npm导包依赖第三方库,导包之前就调整了一下项目结构,把所有源码放到 miniprogram 文件夹下,在project.config.json中配置了 "miniprogramRoot": "miniprogram/",项目此时是正常的。
  2. 当我把图片也归整了一下,把tabbar图片,从 /miniprogram/images/ 文件夹下,迁移到新建的 /miniprogram/assets/tabbar/ 文件夹下,在 app.json 中的 tabbar 位置修改了图片路径,再次编译,此时就报错了

错误提示

[ miniprogram/app.json 文件内容错误] miniprogram/app.json: ["tabBar"]["list"][0]["iconPath"]: "/miniprogram/assets/tabbar/icon_main_home.png" 未找到 ... ...

修改之前的代码片段:

"list": [{"pagePath": "pages/main-home/home","text": "首页","iconPath": "images/icon_main_home.png","selectedIconPath": "images/icon_main_home_active.png"},{"pagePath": "pages/main-mine/mine","text": "我的","iconPath": "images/icon_main_mine.png","selectedIconPath": "images/icon_main_mine_active.png"}],

调整源码到 miniprogram 文件夹,并且又调整了图片目录结构,此时报错了,代码片段:

"list": [{"pagePath": "pages/main-home/home","text": "首页","iconPath": "/miniprogram/assets/tabbar/icon_main_home.png","selectedIconPath": "/miniprogram/assets/tabbar/icon_main_home_active.png"},{"pagePath": "pages/main-mine/mine","text": "我的","iconPath": "/miniprogram/assets/tabbar/icon_main_mine.png","selectedIconPath": "/miniprogram/assets/tabbar/icon_main_mine_active.png"}],

出现错误疑惑点

  1. 路径完全正确
  2. 点击图片路径也能正常跳转到图片
  3. 看着与调整项目之前并没什么区别
  4. 不能使用 ../ 调用父级,我就使用 / 直接从文件根目录写

以上几点是我一开始觉得,什么都对了,什么也都试了,为什么还出错误呢?

错误原因

  1. 调整项目后,在 project.config.json 中配置了 "miniprogramRoot": "miniprogram/" ,此时的根目录就是当前 app.json 的位置,asset 文件夹与 app.json 文件同级。
  2. "/miniprogram/assets/tabbar/icon_main_home.png" 配置中的地址第一个 / 代表的就是miniprogram/ ,把当前配置项的图片地址翻译完整为 miniprogram/miniprogram/assets/tabbar/icon_main_home.png

故而微信开发者工具提示图片未找到的错误

正确写法

  1. 因为项目的根目录已经在 project.config.json 中配置了 "miniprogramRoot": "miniprogram/" ,项目根路径 / 就代表是 miniprogram/ 文件夹。
  2. 又因为 app.json 配置文件 与 assets 文件夹在同级,在 app.json 配置文件中,tabbar 图片路径地址可直接写 assets/tabbar/icon_main_home.png,或者在地址前添加 .// 就可以了。

正确的代码片段:

"list": [{"pagePath": "pages/main-home/home","text": "首页","iconPath": "assets/tabbar/icon_main_home.png","selectedIconPath": "assets/tabbar/icon_main_home_active.png"},{"pagePath": "pages/main-mine/mine","text": "我的","iconPath": "assets/tabbar/icon_main_mine.png","selectedIconPath": "assets/tabbar/icon_main_mine_active.png"}],

总结

  1. project.config.json 中配置了 "miniprogramRoot": "miniprogram/" ,就代表小程序的根目录为 miniprogram/
  2. 在开发项目时,使用 / 对资源文件的调用,就指的是 miniprogram/ 文件夹
  3. 在了解配置的真正含义,并充分了解配置所带来的项目变化,掌握其开发规范,以及注意事项,在开发过程中,就会避免踩很多坑

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/65320.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ThinkPHP 数据库操作详解:CRUD 实现与最佳实践

ThinkPHP 数据库操作详解:CRUD 实现与最佳实践 在现代 Web 开发中,数据库操作是应用程序的核心部分。ThinkPHP 作为一款流行的 PHP 框架,提供了强大的数据库操作功能,使得开发者能够高效地进行数据的增删改查(CRUD&am…

《Ceph:一个可扩展、高性能的分布式文件系统》

大家觉得有意义和帮助记得及时关注和点赞!!! 和大多数分布式存储系统只支持单一的存储类型不同,Ceph 同时支持三种: 文件系统(file system):有类似本地文件系统的层级结构(目录树)&#xff0c…

Kafka数据迁移全解析:同集群和跨集群

文章目录 一、同集群迁移二、跨集群迁移 Kafka两种迁移场景,分别是同集群数据迁移、跨集群数据迁移。 一、同集群迁移 应用场景: broker 迁移 主要使用的场景是broker 上线,下线,或者扩容等.基于同一套zookeeper的操作。 实践: 将需要新添加…

“智能控制的新纪元:2025年机器学习与控制工程国际会议引领变革

ICMLCE 2025 | 机器学习与控制工程国际会议 ✨宝子们,今天要为大家介绍的是一个在机器学习和控制工程领域备受瞩目的国际学术盛会——2025年机器学习与控制工程国际会议(ICMLCE 2025)。本次大会将在美丽的大理举行,旨在汇聚全球顶…

公路边坡安全监测中智能化+定制化+全面守护的应用方案

面对公路边坡的安全挑战,我们如何精准施策,有效应对风险?特别是在强降雨等极端天气下,如何防范滑坡、崩塌、路面塌陷等灾害,确保行车安全?国信华源公路边坡安全监测解决方案,以智能化、定制化为…

Julia语言的语法

深入理解Julia语言:高效科学计算的新宠 引言 在当今高速发展的技术环境中,科学计算和数据分析的需求日益增长。作为一种新兴的编程语言,Julia以其高效的性能和简洁的语法吸引了众多研究人员和开发者的注意。本文将深入探讨Julia语言的设计理…

pyqt和pycharm环境搭建

安装 python安装: https://www.python.org/downloads/release/python-3913/ python3.9.13 64位(记得勾选Path环境变量) pycharm安装: https://www.jetbrains.com/pycharm/download/?sectionwindows community免费版 换源: pip config se…

二级建造师考试题库及答案

一、多选题 1.建设行政管理部门对工程质量监督的内容有()。 A.抽查质量检测单位的工程质量行为 B.抽查工程质量责任主体的工程质量行为 C.审核工程建设标准的完整性 D.参与工程质量事故的调查处理 E.监督工程竣工验收 答案:ABDE 解析…

在dynadot进行NS域名服务器设置后网站无法访问的可能原因

关于Dynadot Dynadot是通过ICANN认证的域名注册商,自2002年成立以来,服务于全球108个国家和地区的客户,为数以万计的客户提供简洁,优惠,安全的域名注册以及管理服务。 其他索引: Dynadot平台操作教程索引…

【初接触】【学习】编译 Rust 为 WebAssembly

前言 需要先了解以下知识: WebAssemblyRustwasm_bindgenwasm-packjs-sysweb-sysJavaScriptHTMLCSSwebpack 假设您已经了解所有知识点,并且您的环境中已安装了 Node.js和npm 以及 Rust 的完整开发工具链(包括 rustc、cargo 和 rustup&#…

探秘仓颉编程语言:使用体验与功能剖析

目录 一、引言:仓颉登场,编程新纪元开启 二、初体验:搭建环境与 “Hello World” (一)环境搭建指南 (二)Hello World 初印象 三、核心特性剖析:智能、高效、安全多维解读 &…

[Java]合理封装第三方工具包(附视频)

-1.视频链接 视频版: 视频版会对本文章内容进行详细解释 [Java]合理封装第三方工具包_哔哩哔哩_bilibili 0.核心思想 对第三方工具方法进行封装,使其本地化,降低记忆和使用成本 1.背景 在我们的项目中,通常会引用一些第三方工具包,或者是使用jdk自带的一些工具类 例如: c…

Ubuntu环境 nginx.conf详解(三)

1、nginx.conf 结构详解: http 块:用于配置 HTTP 服务器的相关设置,包括处理 HTTP 和 HTTPS。 stream 块:用于配置 TCP/UDP 代理服务器,适用于需要进行四层负载均衡的情况。 ... # 全局块 events {...} …

AI真的可以“陪伴”吗?

人们普遍渴求陪伴,仅有4.6%的人认为自己的陪伴需求都被满足了,剩下大部分人群都面临着各种各样的社交困境。 “陪伴”有多个层次。最狭义的“陪伴”是在人与人之间发生的;但稍微放宽一些,宠物甚至植物、家具也会让…

Golang 的并发优势

在如今的编程领域,一个程序能够同时处理多个任务的能力非常重要,这就是所谓的并发处理。而 Golang 在并发编程方面表现十分出色,具有很多独特的优势,简直不要太简单。 一、轻量级的协程(Goroutine) 在传统…

基于cobra开发的k8s命令行管理工具k8s-manager

基于cobra开发的k8s命令行管理工具k8s-manager 如果觉得好用,麻烦给个Star!通用配置1 node 分析所有node的资源情况2 analysis 分析Node节点上的资源使用构成3 image 获取指定namespace的所有镜像地址4 resource 获取指定namespace的所有limit 与 Requests大小5 top…

从零开始C++游戏开发之第七篇:游戏状态机与回合管理

在游戏开发的道路上,状态管理是一个无法绕开的重要课题。尤其是在棋牌类游戏中,游戏的进行需要有条不紊地按照回合推进,同时管理多个游戏状态,如“等待玩家加入”、“游戏进行中”、“结算阶段”等。如何优雅且高效地实现这些逻辑…

USB Hub 检测设备

系列文章目录 xHCI 简单分析 USB Root Hub 分析 USB Hub 检测设备 文章目录 系列文章目录一、引言二、hub_eventshub_port_connect_changeusb_alloc_devusb_set_device_statehub_port_initusb_new_device 一、引言 USB Hub 检测设备 一文中讲到,当有 USB 插入时&…

MySQL从入门到入土---MySQL表的约束 (内含实践)---详细版

目录 引入: null 与not null default: comment列描述 : not null 和 default: zerofill : 主键:primary key 复合主键: 自增长:auto_increment 唯一键:unique key 外键&a…

Redis大Key问题全解析

1. 引言 1.1 什么是Redis大Key? Redis大Key是指单个Key对应的数据量过大,占用过多的内存或导致操作耗时较长的现象。大Key可以是以下几种常见数据类型中的任意一种: String类型:单个字符串的长度过大。List类型:包含…