作為公司的小菜鳥，每天都踩坑應(yīng)該是一件很正常的事情吧，哈哈哈。今天遇到了比較棘手的問題，以前從來沒有遇到過。然后就是在某平臺上接的一個 bug 修改的單子，也拿出來和大家分享一下~

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

問題一（未解決）

問題背景：公司項目解決報錯的時候，遇到了一個錯誤信息：【Injection “XXX(方法名)” not found】，大致看一下可以吧問題定位到子組件中的 inject 接受的方法沒有找到。

問題描述：在解決上面的問題的時候，我采用了在使用方法前判斷一下父組件是否提供了這個方法，如果有，就調(diào)用。但是在這個過程中，我寫了一個工具類，傳入兩個參數(shù)：1. 父組件；2. 方法名，返回一個布爾值，判斷這個父組件是否含有那個方法。但是就在我自信滿滿的使用 this.$parent 作為父組件傳遞的時候，不出意外的話，意外出現(xiàn)了。。。。this.$parent 打印出來并不是當(dāng)前子組件的父組件。。。

下面是一個 demo 演示

<!-- 父組件 -->
<template><subComponent>
</template><script>export default {name: 'parentComponent',provide: {// getData: this.getData,saveData: this.saveData,deleteData: this.deleteData},methods: {getData(){console.log('獲取數(shù)據(jù)的方法')},saveData() {console.log('保存數(shù)據(jù)的方法')},deleteData() {console.log('刪除數(shù)據(jù)的方法')}}}
</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 指向問題一直是一個大難題。我們發(fā)現(xiàn)在代碼中并沒有對 this 指向進(jìn)行修改，父子組件層級嵌套也是正常的，那這是什么原因呢？有大佬幫忙解釋下嗎，我到目前還沒有頭緒。我覺的如果要搞懂這個問題，可能需要深入去研究 Vue 底層和源碼，或許這樣會有解題思路。

問題二

問題背景：在幫別人修改 uniapp 代碼的時候，我看到了控制臺報錯，大致內(nèi)容是說 JSON.parse() 方法里面包裹的數(shù)據(jù)不是 JSON 格式。

問題描述：在使用 uni.### navigateTo 進(jìn)行頁面跳轉(zhuǎn)的時候，傳遞了一個被 JSON. stringify() 方法報錯的數(shù)據(jù)，在新頁面的 onload 生命周期中接收了一下，通過 JSON.parse() 對接收到的數(shù)據(jù)進(jìn)行解析。

下面是一個 demo 演示

<!-- 首頁 -->
<template><button @click="handleInto">點擊跳轉(zhuǎn)頁面</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. 我首先打印了一下需要傳遞的數(shù)據(jù)和接收到的數(shù)據(jù)，發(fā)現(xiàn)需要傳遞的數(shù)據(jù)遠(yuǎn)遠(yuǎn)比接收到的數(shù)據(jù)多很多。

  3. 我想到 url 在地址欄中是有長度限制的，應(yīng)該是超過了這個限制，然后自動截取了。

  4. 然后去查閱 uniapp 官方文檔，發(fā)現(xiàn)有關(guān)于字符串過長的解決方案：窗體通訊或者全局變量，但是我懶得看了，發(fā)現(xiàn)后面還有一個解決參數(shù)出現(xiàn)空格等特殊字符時需要使用 encodeURIComponent 和 decodeURIComponent 進(jìn)行編碼，就這樣我抱著試了試的心態(tài)采用了這個方案，結(jié)果成了？？！需要傳遞的參數(shù)是一堆 html 代碼，或許有一種可能就是里面有了空格或者其他字符串了，然后這種方法才可以使用的。

  聲明：此次純屬瞎猜運氣好，僅供參考。

• 解決思路：

  <!-- 首頁 -->
  <template><button @click="handleInto">點擊跳轉(zhuǎn)頁面</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>
  

問題三（未解決）

問題背景：在解決了上面那個問題之后，我發(fā)現(xiàn)詳情頁的圖片寬高保持的原圖片尺寸，這是很不合理的，所以我就看了一下，發(fā)現(xiàn)是采用 uniapp 內(nèi)置的 rich-text 組件對富文本數(shù)據(jù)進(jìn)行解析，那這樣我們就不能采用直接在圖片上添加樣式的方式修改圖片的寬高。

問題描述：富文本返回的圖片如何添加樣式，修改圖片寬高。

• 分析過程：

  1. 既然這個詳情是以富文本的形式返回的，我們就可以先把數(shù)據(jù)轉(zhuǎn)成字符串。

  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() 就不能解析里面的內(nèi)容了。。。。這里我提供了我當(dāng)時的思路，但是我目前沒找到合適的解決方案，希望有厲害的大佬，或者感興趣的朋友可以嘗試一下，大家一起進(jìn)步！

聲明：

作者只記錄自己在公司踩過的坑，以及提供自己的解決思路，如果有誤請聯(lián)系作者進(jìn)行修改，不接受以任何形式的詆毀謾罵。如果有更好的方案也可以聯(lián)系作者進(jìn)行討論，互相學(xué)習(xí)。

如需轉(zhuǎn)載請注明文章來源。