onShow的應(yīng)用場景
由于微信小程序是單頁應(yīng)用程序，所以用戶在打開小程序后，只有第一次進(jìn)入頁面時(shí)會加載頁面，之后再通過導(dǎo)航欄切換到相同的頁面并不會導(dǎo)致頁面重新加載
但是在某些場景下，我們希望每次用戶一回到某個(gè)頁面，就執(zhí)行相應(yīng)的函數(shù)，但因?yàn)閷?dǎo)航欄切換頁面并不會導(dǎo)致頁面重新加載，所以頁面中的代碼不會被再次執(zhí)行
如果大家和我一樣使用vue3開發(fā)，可能會想到使用vue3的生命周期函數(shù)onMounted，但同樣地，導(dǎo)航欄切換頁面也不會導(dǎo)致dom元素重新渲染，所以onMounted并不會執(zhí)行
這時(shí)我們就可以使用uniapp的生命周期函數(shù)onShow，onShow函數(shù)是每次頁面顯示的時(shí)候都會被觸發(fā)
onShow的用法
uni-app?頁面除支持 Vue 組件生命周期外還支持下方頁面生命周期函數(shù)，當(dāng)以組合式 API 使用時(shí)，在 Vue2 和 Vue3 中存在一定區(qū)別，請分別參考：Vue2 組合式 API 使用文檔?和?Vue3 組合式 API 使用文檔。
如果你使用的是vue3的組合式API，可以參考以下代碼
<script setup>
import { onShow } from '@dcloudio/uni-app'
onShow(()=>{
console.log('哈哈！');
})
<script>一點(diǎn)小心得
這么一看onShow的使用場景和用法，是不是非常簡單？但是這個(gè)問題卡了我?guī)缀跻徽?/p>
其實(shí)一開始解決這個(gè)問題，我是對AI不斷地提問，因?yàn)橛X得對AI，我可以針對我的需求進(jìn)行提問，而且我確實(shí)很快地問出了解決方法
但AI給出的方法很多時(shí)候并不完善，我在用的時(shí)候就出現(xiàn)了報(bào)錯(cuò)，于是我拿著報(bào)錯(cuò)信息再次對AI提問，AI又給了我一套解決方案，接下來我就進(jìn)入了一個(gè)循環(huán)：我不斷地拿著報(bào)錯(cuò)信息對AI提問，AI不斷地給我提出新的解決方案，我不斷地嘗試AI提供的解決方案，然后程序又不斷地報(bào)錯(cuò)，我拿到報(bào)錯(cuò)信息后又拿去問AI……
每次看到AI打出的第一句話是：“很抱歉，我之前給出的解決方案有誤” 我就很崩潰，恨不得打幾句話罵它一頓
最后，我還是在微信官方文檔上找到了解決方案，原來是我導(dǎo)入onShow的方式不對，正確的導(dǎo)入方式應(yīng)該是：import { onShow } from '@dcloudio/uni-app'，AI提供的導(dǎo)入方式一直是錯(cuò)的，但其實(shí)我也是看了幾遍官方文檔后才找到了這句話：“uni-app?頁面除支持 Vue 組件生命周期外還支持下方頁面生命周期函數(shù)，當(dāng)以組合式 API 使用時(shí)，在 Vue2 和 Vue3 中存在一定區(qū)別，請分別參考：Vue2 組合式 API 使用文檔?和?Vue3 組合式 API 使用文檔?！?點(diǎn)進(jìn)第二個(gè)鏈接之后才找到正確的導(dǎo)入方式?
其實(shí)我平時(shí)挺討厭看官方文檔，因?yàn)榭傆X得官方文檔的語言死板晦澀，而且很難找到我需要的，好不容易找到了，也不一定看得懂文章來源：http://www.zghlxwxcb.cn/news/detail-834208.html
但是今天，這件事情給我了我一個(gè)教訓(xùn)：AI不能全信，官方文檔不能不看！文章來源地址http://www.zghlxwxcb.cn/news/detail-834208.html
到了這里，關(guān)于uniapp微信小程序開發(fā)踩坑日記：onShow的應(yīng)用場景及用法的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[uniapp]踩坑日記 unexpected character ＞ 1或‘=’＞1 報(bào)錯(cuò)](https://imgs.yssmx.com/Uploads/2024/02/705511-1.png)
