uniapp微信小程序开发踩坑日记：onShow的应用场景及用法-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp微信小程序开发踩坑日记：onShow的应用场景及用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

onShow的应用场景

由于微信小程序是单页应用程序，所以用户在打开小程序后，只有第一次进入页面时会加载页面，之后再通过导航栏切换到相同的页面并不会导致页面重新加载

但是在某些场景下，我们希望每次用户一回到某个页面，就执行相应的函数，但因为导航栏切换页面并不会导致页面重新加载，所以页面中的代码不会被再次执行

如果大家和我一样使用vue3开发，可能会想到使用vue3的生命周期函数onMounted，但同样地，导航栏切换页面也不会导致dom元素重新渲染，所以onMounted并不会执行

这时我们就可以使用uniapp的生命周期函数onShow，onShow函数是每次页面显示的时候都会被触发

uniapp微信小程序开发踩坑日记：onShow的应用场景及用法,uni-app,微信小程序,小程序,前端,开发语言

onShow的用法

uni-app 页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数，当以组合式 API 使用时，在 Vue2 和 Vue3 中存在一定区别，请分别参考：Vue2 组合式 API 使用文档和 Vue3 组合式 API 使用文档。

如果你使用的是vue3的组合式API，可以参考以下代码

<script setup>
    import { onShow } from '@dcloudio/uni-app'

    onShow(()=>{
    console.log('哈哈！');
    })
<script>

一点小心得

这么一看onShow的使用场景和用法，是不是非常简单？但是这个问题卡了我几乎一整天

其实一开始解决这个问题，我是对AI不断地提问，因为觉得对AI，我可以针对我的需求进行提问，而且我确实很快地问出了解决方法

uniapp微信小程序开发踩坑日记：onShow的应用场景及用法,uni-app,微信小程序,小程序,前端,开发语言

但AI给出的方法很多时候并不完善，我在用的时候就出现了报错，于是我拿着报错信息再次对AI提问，AI又给了我一套解决方案，接下来我就进入了一个循环：我不断地拿着报错信息对AI提问，AI不断地给我提出新的解决方案，我不断地尝试AI提供的解决方案，然后程序又不断地报错，我拿到报错信息后又拿去问AI……

每次看到AI打出的第一句话是：“很抱歉，我之前给出的解决方案有误” 我就很崩溃，恨不得打几句话骂它一顿

最后，我还是在微信官方文档上找到了解决方案，原来是我导入onShow的方式不对，正确的导入方式应该是：import { onShow } from '@dcloudio/uni-app'，AI提供的导入方式一直是错的，但其实我也是看了几遍官方文档后才找到了这句话：“uni-app 页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数，当以组合式 API 使用时，在 Vue2 和 Vue3 中存在一定区别，请分别参考：Vue2 组合式 API 使用文档和 Vue3 组合式 API 使用文档。” 点进第二个链接之后才找到正确的导入方式

其实我平时挺讨厌看官方文档，因为总觉得官方文档的语言死板晦涩，而且很难找到我需要的，好不容易找到了，也不一定看得懂

但是今天，这件事情给我了我一个教训：AI不能全信，官方文档不能不看！文章来源地址https://www.toymoban.com/news/detail-834208.html

到了这里，关于uniapp微信小程序开发踩坑日记：onShow的应用场景及用法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！