温州市建设工程信息网,昆明做网站词排名优化,企业客户信息管理系统,网站开发python和c 哪个好作为公司的小菜鸟#xff0c;每天都踩坑应该是一件很正常的事情吧#xff0c;哈哈哈。今天遇到了比较棘手的问题#xff0c;以前从来没有遇到过。然后就是在某平台上接的一个 bug 修改的单子#xff0c;也拿出来和大家分享一下~ 此为第二篇#xff08;2024 年 02 月 05 日… 作为公司的小菜鸟每天都踩坑应该是一件很正常的事情吧哈哈哈。今天遇到了比较棘手的问题以前从来没有遇到过。然后就是在某平台上接的一个 bug 修改的单子也拿出来和大家分享一下~ 此为第二篇2024 年 02 月 05 日 问题一未解决 问题背景公司项目解决报错的时候遇到了一个错误信息【Injection “XXX(方法名)” not found】大致看一下可以吧问题定位到子组件中的 inject 接受的方法没有找到。 问题描述在解决上面的问题的时候我采用了在使用方法前判断一下父组件是否提供了这个方法如果有就调用。但是在这个过程中我写了一个工具类传入两个参数1. 父组件2. 方法名返回一个布尔值判断这个父组件是否含有那个方法。但是就在我自信满满的使用 this.$parent 作为父组件传递的时候不出意外的话意外出现了。。。。this.$parent 打印出来并不是当前子组件的父组件。。。 下面是一个 demo 演示
!-- 父组件 --
templatesubComponent
/templatescriptexport default {name: parentComponent,provide: {// getData: this.getData,saveData: this.saveData,deleteData: this.deleteData},methods: {getData(){console.log(获取数据的方法)},saveData() {console.log(保存数据的方法)},deleteData() {console.log(删除数据的方法)}}}
/script!-- 子组件 --
templatebuttton clickhandleTest
/templatescriptimport { utils } from ./utils.jsexport default {name: parentComponent,// inject: [getData],// 这里所有的生命周期打印出来的 this 都含有我们想要的方法methods: {handleTest() {console.log(this , this) // 此处打印的 this 里面含有我们想要的方法if (utils.hasMethod(this.$parent, getData) {this.getData}}}}
/scriptexport 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 演示
!-- 首页 --
templatebutton clickhandleInto点击跳转页面/button
/templatescriptexport default {name: home,methods: {handleInto() {uni.navigateTo({url: /page/newDetail?newData${JSON.stringify(data)}})}}}
/script!-- 新闻详情 --
template{{ newData }}
/templatescriptexport default {name: newDetail,data() {return {newData: }},onLoad(option) {this.newData JSON.parse(option.newData)}}
/script分析过程 看代码首先是没看出问题的在 url 上传参确实是需要传递字符串。 我首先打印了一下需要传递的数据和接收到的数据发现需要传递的数据远远比接收到的数据多很多。 我想到 url 在地址栏中是有长度限制的应该是超过了这个限制然后自动截取了。 然后去查阅 uniapp 官方文档发现有关于字符串过长的解决方案窗体通讯或者全局变量但是我懒得看了发现后面还有一个解决参数出现空格等特殊字符时需要使用 encodeURIComponent 和 decodeURIComponent 进行编码就这样我抱着试了试的心态采用了这个方案结果成了需要传递的参数是一堆 html 代码或许有一种可能就是里面有了空格或者其他字符串了然后这种方法才可以使用的。 声明此次纯属瞎猜运气好仅供参考。 解决思路 !-- 首页 --
templatebutton clickhandleInto点击跳转页面/button
/templatescriptexport default {name: home,methods: {handleInto() {uni.navigateTo({url: /page/newDetail?newData${encodeURIComponent(JSON.stringify(data))}})}}}
/script!-- 新闻详情 --
template{{ newData }}
/templatescriptexport default {name: newDetail,data() {return {newData: }},onLoad(option) {this.newData JSON.parse(decodeURIComponent(option.newData))}}
/script问题三未解决 问题背景在解决了上面那个问题之后我发现详情页的图片宽高保持的原图片尺寸这是很不合理的所以我就看了一下发现是采用 uniapp 内置的 rich-text 组件对富文本数据进行解析那这样我们就不能采用直接在图片上添加样式的方式修改图片的宽高。 问题描述富文本返回的图片如何添加样式修改图片宽高。 分析过程 既然这个详情是以富文本的形式返回的我们就可以先把数据转成字符串。 然后采用字符串的 replace() 方法将 img 替换成 img style【样式】 。 好接下来看具体操作 解决思路 !-- 新闻详情 --
template{{ newData }}
/templatescriptexport default {name: newDetail,data() {return {newData: }},onLoad(option) {this.newData JSON.parse(decodeURIComponent(option.newData).replace(/img/g, img stylewidth: 200rpx;height: 200rpx;)}}
/script好的那走到这里呢就算是废了哈哈哈不清楚为什么这么处理之后JSON.parse() 就不能解析里面的内容了。。。。这里我提供了我当时的思路但是我目前没找到合适的解决方案希望有厉害的大佬或者感兴趣的朋友可以尝试一下大家一起进步
声明
作者只记录自己在公司踩过的坑以及提供自己的解决思路如果有误请联系作者进行修改不接受以任何形式的诋毁谩骂。如果有更好的方案也可以联系作者进行讨论互相学习。
如需转载请注明文章来源。
