踩坑实录（Second Day）

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

此为第二篇（2024 年 02 月 05 日）

问题一（未解决）

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

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

下面是一个 demo 演示

html 复制代码

<!-- 父组件 -->
<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>

html 复制代码

<!-- 子组件 -->
<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>

js 复制代码

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 演示

html 复制代码

<!-- 首页 -->
<template>
    <button @click="handleInto">
        点击跳转页面
    </button>
</template>

<script>
    export default {
        name: 'home',
        methods: {
            handleInto() {
                uni.navigateTo({
                    url: `/page/newDetail?newData=${JSON.stringify(data)}`
                })
            }
        }
    }
</script>

html 复制代码

<!-- 新闻详情 -->
<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 官方文档，发现有关于字符串过长的解决方案：窗体通讯或者全局变量，但是我懒得看了，发现后面还有一个解决参数出现空格等特殊字符时需要使用 encodeURIComponent 和 decodeURIComponent 进行编码，就这样我抱着试了试的心态采用了这个方案，结果成了？？！需要传递的参数是一堆 html 代码，或许有一种可能就是里面有了空格或者其他字符串了，然后这种方法才可以使用的。
声明：此次纯属瞎猜运气好，仅供参考。

解决思路：

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>

html 复制代码

<!-- 新闻详情 -->
<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="【样式】" 。
好，接下来看具体操作：

解决思路：

html 复制代码

<!-- 新闻详情 -->
<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() 就不能解析里面的内容了。。。。这里我提供了我当时的思路，但是我目前没找到合适的解决方案，希望有厉害的大佬，或者感兴趣的朋友可以尝试一下，大家一起进步！

声明：

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

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