当前位置: 首页 > news >正文

踩坑实录(Second Day)

作为公司的小菜鸟,每天都踩坑应该是一件很正常的事情吧,哈哈哈。今天遇到了比较棘手的问题,以前从来没有遇到过。然后就是在某平台上接的一个 bug 修改的单子,也拿出来和大家分享一下~

此为第二篇(2024 年 02 月 05 日)

问题一(未解决)

问题背景:公司项目解决报错的时候,遇到了一个错误信息:【Injection “XXX(方法名)” not found】,大致看一下可以吧问题定位到子组件中的 inject 接受的方法没有找到。

问题描述:在解决上面的问题的时候,我采用了在使用方法前判断一下父组件是否提供了这个方法,如果有,就调用。但是在这个过程中,我写了一个工具类,传入两个参数:1. 父组件;2. 方法名,返回一个布尔值,判断这个父组件是否含有那个方法。但是就在我自信满满的使用 this.$parent 作为父组件传递的时候,不出意外的话,意外出现了。。。。this.$parent 打印出来并不是当前子组件的父组件。。。

下面是一个 demo 演示

<!-- 父组件 -->
<template><subComponent>
</template><script>export default {name: 'parentComponent',provide: {// getData: this.getData,saveData: this.saveData,deleteData: this.deleteData},methods: {getData(){console.log('获取数据的方法')},saveData() {console.log('保存数据的方法')},deleteData() {console.log('删除数据的方法')}}}
</script>
<!-- 子组件 -->
<template><buttton @click="handleTest">
</template><script>import { utils } from './utils.js'export default {name: 'parentComponent',// inject: ['getData'],// 这里所有的生命周期打印出来的 this 都含有我们想要的方法methods: {handleTest() {console.log('this =>', this)    // 此处打印的 this 里面含有我们想要的方法if (utils.hasMethod(this.$parent, 'getData') {this.getData}}}}
</script>
export const utils = {hasMethod: function(context, methodName) {console.log('context =》', context)    // 此处的 context 并没有这个方法,而且打印的也是更高层级的父组件return typeof context[methodName] === 'function'}
}

这个问题就很棘手,this 指向问题一直是一个大难题。我们发现在代码中并没有对 this 指向进行修改,父子组件层级嵌套也是正常的,那这是什么原因呢?有大佬帮忙解释下吗,我到目前还没有头绪。我觉的如果要搞懂这个问题,可能需要深入去研究 Vue 底层和源码,或许这样会有解题思路。

问题二

问题背景:在帮别人修改 uniapp 代码的时候,我看到了控制台报错,大致内容是说 JSON.parse() 方法里面包裹的数据不是 JSON 格式。

问题描述:在使用 uni.### navigateTo 进行页面跳转的时候,传递了一个被 JSON. stringify() 方法报错的数据,在新页面的 onload 生命周期中接收了一下,通过 JSON.parse() 对接收到的数据进行解析。

下面是一个 demo 演示

<!-- 首页 -->
<template><button @click="handleInto">点击跳转页面</button>
</template><script>export default {name: 'home',methods: {handleInto() {uni.navigateTo({url: `/page/newDetail?newData=${JSON.stringify(data)}`})}}}
</script>
<!-- 新闻详情 -->
<template>{{ newData }}
</template><script>export default {name: 'newDetail',data() {return {newData: ''}},onLoad(option) {this.newData = JSON.parse(option.newData)}}
</script>
  • 分析过程:

    1. 看代码首先是没看出问题的,在 url 上传参确实是需要传递字符串。

    2. 我首先打印了一下需要传递的数据和接收到的数据,发现需要传递的数据远远比接收到的数据多很多。

    3. 我想到 url 在地址栏中是有长度限制的,应该是超过了这个限制,然后自动截取了。

    4. 然后去查阅 uniapp 官方文档,发现有关于字符串过长的解决方案:窗体通讯或者全局变量,但是我懒得看了,发现后面还有一个解决参数出现空格等特殊字符时需要使用 encodeURIComponentdecodeURIComponent 进行编码,就这样我抱着试了试的心态采用了这个方案,结果成了??!需要传递的参数是一堆 html 代码,或许有一种可能就是里面有了空格或者其他字符串了,然后这种方法才可以使用的。

    声明:此次纯属瞎猜运气好,仅供参考。

  • 解决思路:

    <!-- 首页 -->
    <template><button @click="handleInto">点击跳转页面</button>
    </template><script>export default {name: 'home',methods: {handleInto() {uni.navigateTo({url: `/page/newDetail?newData=${encodeURIComponent(JSON.stringify(data))}`})}}}
    </script>
    
    <!-- 新闻详情 -->
    <template>{{ newData }}
    </template><script>export default {name: 'newDetail',data() {return {newData: ''}},onLoad(option) {this.newData = JSON.parse(decodeURIComponent(option.newData))}}
    </script>
    

问题三(未解决)

问题背景:在解决了上面那个问题之后,我发现详情页的图片宽高保持的原图片尺寸,这是很不合理的,所以我就看了一下,发现是采用 uniapp 内置的 rich-text 组件对富文本数据进行解析,那这样我们就不能采用直接在图片上添加样式的方式修改图片的宽高。

问题描述:富文本返回的图片如何添加样式,修改图片宽高。

  • 分析过程:

    1. 既然这个详情是以富文本的形式返回的,我们就可以先把数据转成字符串。

    2. 然后采用字符串的 replace() 方法,将 <img 替换成 <img style="【样式】"

    好,接下来看具体操作:

  • 解决思路:

    <!-- 新闻详情 -->
    <template>{{ newData }}
    </template><script>export default {name: 'newDetail',data() {return {newData: ''}},onLoad(option) {this.newData = JSON.parse(decodeURIComponent(option.newData).replace(/<img/g, '<img style="width: 200rpx;height: 200rpx;"')}}
    </script>
    

    好的,那走到这里呢,就算是废了,哈哈哈,不清楚为什么,这么处理之后,JSON.parse() 就不能解析里面的内容了。。。。这里我提供了我当时的思路,但是我目前没找到合适的解决方案,希望有厉害的大佬,或者感兴趣的朋友可以尝试一下,大家一起进步!

声明:

作者只记录自己在公司踩过的坑,以及提供自己的解决思路,如果有误请联系作者进行修改,不接受以任何形式的诋毁谩骂。如果有更好的方案也可以联系作者进行讨论,互相学习。

如需转载请注明文章来源。

相关文章:

踩坑实录(Second Day)

作为公司的小菜鸟&#xff0c;每天都踩坑应该是一件很正常的事情吧&#xff0c;哈哈哈。今天遇到了比较棘手的问题&#xff0c;以前从来没有遇到过。然后就是在某平台上接的一个 bug 修改的单子&#xff0c;也拿出来和大家分享一下~ 此为第二篇&#xff08;2024 年 02 月 05 日…...

已解决org.springframework.web.HttpMediaTypeNotAcceptableException异常的正确解决方法,亲测有效!!!

已解决org.springframework.web.HttpMediaTypeNotAcceptableException异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 文章目录 问题分析 报错原因 解决思路 解决方法 总结 问题分析 在Spring MVC应用中处理HTTP请求时&#xff0c;我们有…...

根据MySql建表语句创建Java实体类工具

点击下载《根据MySql建表语句创建Java实体类工具》 1. 前言 在软件开发领域&#xff0c;特别是在构建企业级应用时&#xff0c;数据模型与代码模型之间的映射是至关重要的。该软件是一款基于C#开发的高效工具&#xff0c;它将这一繁琐且容易出错的过程变得简洁且快速。此工具…...

做跨境电商需要使用住宅代理IP吗?

住宅代理IP是近年来跨境电商领域日益受到重视的技术工具&#xff0c;不仅可以保护隐私、优化网络速度&#xff0c;还能助推跨境电商的精细化管理。接下来&#xff0c;我们将深入探讨利用住宅代理IP如何为跨境电商业务带来竞争优势。 一、住宅代理IP与跨境电商 住宅代理IP&…...

vue3 之 组合式API—reactive和ref函数

ref&#xff08;&#xff09; 作用&#xff1a;接收简单类型或者对象类型的数据传入并返回一个响应式的对象 核心步骤&#xff1a; 1️⃣ 从 vue 包中导入 ref 函数 2️⃣在 <script setup>// 导入import { ref } from vue// 执行函数 传入参数 变量接收const count …...

Python库-PyAutoGUI

pyautogui是一个Python库&#xff0c;可以自动控制键盘和鼠标&#xff0c;非常适合进行自动化任务。它可以用于各种场景&#xff0c;比如自动化测试、数据录入任务&#xff0c;甚至是简单的游戏机器人。下面是一个关于pyautogui的入门教程&#xff0c;包括它的安装、基本使用方…...

越权测试是什么?

一、越权测试是什么&#xff1f; 越权漏洞是web应用程序中常见的一种安全漏洞。它的威胁在于一个账户可控制全站用户数据。越权漏洞产生的原因主要是因为开发人员在对数据进行增删改查时对客户端的请求数据过分相信而遗漏了权限的判定。 二、越权漏洞的分类 越权分为2种&…...

H5 简约四色新科技风引导页源码

H5 简约四色新科技风引导页源码 源码介绍&#xff1a;一款四色切换自适应现代科技风动态背景的引导页源码&#xff0c;源码有主站按钮&#xff0c;分站按钮2个&#xff0c;QQ联系站长按钮一个。 下载地址&#xff1a; https://www.changyouzuhao.cn/11990.html...

使用 VTK 中的单元定位器来查找最近的点

开发环境&#xff1a; Windows 11 家庭中文版Microsoft Visual Studio Community 2019VTK-9.3.0.rc0vtk-example demo解决问题&#xff1a;使用 VTK 中的单元定位器来查找最近的点 关键点&#xff1a; 创建了一个球体数据源&#xff0c;并使用它构建了一个单元定位器&#x…...

时序预测 | MATLAB实现基于CNN-LSTM-AdaBoost卷积长短期记忆网络结合AdaBoost时间序列预测

时序预测 | MATLAB实现基于CNN-LSTM-AdaBoost卷积长短期记忆网络结合AdaBoost时间序列预测 目录 时序预测 | MATLAB实现基于CNN-LSTM-AdaBoost卷积长短期记忆网络结合AdaBoost时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现基于CNN-LST…...

Xcode 15 及以上版本:libarclite 库缺少问题

参考链接&#xff1a;Xcode 15 libarclite 缺失问题_sdk does not contain libarclite at the path /ap-CSDN博客 报错: SDK does not contain libarclite at the path /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/lib/arc/libarcl…...

Spring设计模式之单例模式

文章目录 一、概述二、单例模式的优点三、Spring中的单例模式四、单例模式的实现方式五、总结 一、概述 单例模式是一种创建型设计模式&#xff0c;确保一个类只有一个实例&#xff0c;并提供一个全局访问点来获取该实例。在Spring框架中&#xff0c;单例模式是默认的Bean定义…...

Fink CDC数据同步(二)MySQL数据同步

1 开启binlog日志 2 数据准备 use bigdata; drop table if exists user;CREATE TABLE user(id INTEGER NOT NULL AUTO_INCREMENT,name VARCHAR(20) NOT NULL DEFAULT ,birth VARCHAR(20) NOT NULL DEFAULT ,gender VARCHAR(10) NOT NULL DEFAULT ,PRIMARY KEY(id) ); ALTER TA…...

JavaWeb后端开发(第一期):Maven基础、Maven的安装配置、如何创建maven项目模块、maven的生命周期

Java后端开发&#xff1a;2024年2月6日 -> LiuJinTao 文章目录 JavaWeb后端开发&#xff08;第一期&#xff09; &#xff1a; maven基础一、 maven介绍1.1 什么maven呢&#xff1a;1.2 maven的作用1.3 maven 模型1.4 maven 仓库 二、maven 安装2.1 配置本地仓库2.2 配置阿里…...

Windows SDK(四)鼠标和键盘消息处理

鼠标基础知识 鼠标一般分为三种状态&#xff0c;三个按钮 三种状态&#xff1a;单击&#xff0c;双击&#xff0c;拖动 三个按钮&#xff1a;左键&#xff08;LBUTTON&#xff09;&#xff0c;右键&#xff08;RBUTTON&#xff09;&#xff0c;中键&#xff08;MBUTTON&…...

LabVIEW汽车自燃监测预警系统

LabVIEW汽车自燃监测预警系统 随着汽车行业的飞速发展&#xff0c;汽车安全问题日益受到公众的关注。其中&#xff0c;汽车自燃现象因其突发性和破坏性&#xff0c;成为一个不可忽视的安全隐患。为了有效预防和减少自燃事故的发生&#xff0c;提出了LabVIEW的汽车自燃监测预警…...

数据图表方案,企业视频生产数据可视化

在信息爆炸的时代&#xff0c;如何将复杂的数据转化为直观、生动的视觉信息&#xff0c;是企业在数字化转型中面临的挑战。美摄科技凭借其独特的数据图表方案&#xff0c;为企业在数据可视化领域打开了一扇全新的大门。 一、数据图表方案的优势 1、高效便捷&#xff1a;利用数…...

【HarmonyOS应用开发】APP应用的通知(十五)

相关介绍 通知旨在让用户以合适的方式及时获得有用的新消息&#xff0c;帮助用户高效地处理任务。应用可以通过通知接口发送通知消息&#xff0c;用户可以通过通知栏查看通知内容&#xff0c;也可以点击通知来打开应用&#xff0c;通知主要有以下使用场景&#xff1a; 显示接收…...

开启一个服务,将服务器指定的文件读取,传播到网上其他终端

from flask import Flask, render_template_string app Flask(__name__)app.route(/get-data) def get_data():# 读取data.txt文件的内容with open(r./2024/2/4/data.txt, r) as file:data file.read()print(data)# 返回数据的HTML表示return render_template_string(<div…...

nii convert to 2D image【python】

可以自己精简&#xff0c;我的label是二分类 import SimpleITK as sitk import cv2 from PIL import Image import numpy as np import nibabel as nib # nii格式一般都会用到这个包 import imageio # 转换成图像 import osimport numpy as np from scipy.ndimage import ro…...

Python|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

Java求职者面试指南:计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...