前端面试笔记--（二）[uniapp篇]

以下回答是参考其他文档、char-GPT和自己的理解编写的答案，不一定完全正确，仅提供参考。如果有更好的回答方法，麻烦评论留言，感谢！！！

该篇为uniapp篇，主要为面试过程被问及uniapp的内容

1.uniapp的生命周期

生命周期执行图

vue2

vue3

uniapp的生命周期共有三种，分别为应用的生命周期、页面的生命走周期以及组件的生命周期；
应用的生命周期有多个，最常用的有四个分别是onLaunch:当应用启动时触发，仅在应用初始化时执行一次；onShow:当应用从后台进入前台时触发，可以获取应用被打开的方式和场景值；onHide:当应用从前台进入后台时触发；onError:当应用发生错误时触发，可以用来捕获和处理错误信息；页面主要生命周期共有五个，分别是onLoad:页面加载时触发，可以在这个生命周期时进行初始化数据操作；onShow:页面显示时触发，每个页面展示都会触发；onReady:页面初次渲染完成时触发，可以在这访问页面节点；onHide:页面隐藏时触发，例如从该页面跳转至其他页面时；onUnload:页面卸载时触发，例如在页面销毁时，可以在这里进行一些清理操作；组件的生命周期指组件的创建、挂载、更新和销毁的过程，具体的函数根据框架或具体实现有所不同，通常包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

2.onLoad与onShow有什么不同

两者主要在触发时机、参数传递以及执行顺序上有所不同，触发时机： onLoad在页面记载时触发，仅会触发一次，通常用于初始化页面和执行一次性操作，onShow在页面显示时触发，每次显示都会触发，通常用于更新页面和执行周期性操作； 参数传递 onLoad是在页面传递参数之后执行，所以如果该页面是从其他设置了参数跳转的页面跳转时，会携带传递的参数， 执行顺序 onLoad会先于onShow之前执行

3.获取页面信息（初始化api请求），获取动态路由参数

初始化页面信息一般在onLoad（）中执行，当页面携带参数进行跳转时，目标页面的onLoad（）会携带参数信息

//可以通过以下方法进行传参  跳转页
//template
<navigator v-for="item in wallList" :key="item._id" :url="'/pages/classifydetail/classifydetail?id='+item._id">
	<image :src="item.smallPicurl" mode="aspectFill"></image>
</navigator>
//javascript
const goDetail = id => {
		uni.navigateTo({
			url:"/pages/classifydetail/classifydetail?id=" + id
		})
	}

//目标页
onLoad(async (e)=>{
	console.log(e)
})
	

4.如何实现组件的响应，例：在编辑页编辑完成后返回展示页，如何实现展示页更新

1.通过onShow调用获取信息函数；
2.在编辑页中保存成功后，直接跳转至展示页，并携带参数。展示页如果存在更新的参数时进行数据的重新获取；
3.使用全局状态管理vuex或pinia，在保存成功后执行修改更新变量方法，在目标页监听状态，状态发生变化，进行数据重新获取；

//编辑页
this.$store.commit('updateData', updatedData);

//展示页
export default {  
    computed: {  
        ...mapState(['data']) // 假设data是你要展示的数据  
    },  
    watch: {  
        data(newVal) {  
            // 当data变化时，更新页面内容  
        }  
    }  
}

4.当存在内容仅存在一项时（例如用户信息），直接使用本地存储sessionStorage或loaclStorage，在目标页通过onLoad或onShow处获取存储数据，实现更新

//编辑页
uni.setStorageSync('updatedData', updatedData);

//展示页
export default {  
    onShow() {  
        const updatedData = uni.getStorageSync('updatedData');  
        if (updatedData) {  
            this.setData(updatedData); // 假设你有一个setData方法来更新数据  
        }  
    }  
}

5.微信支付的方法、要注意什么

6.小程序中如何实现跳转至其他小程序

7.如何获取页面信息（宽高、头部遮挡部分、胶囊按钮的信息），实现定制头部或定义滑动高度

8.页面的跳转

9.分享好友、朋友圈的方法；要注意什么（包含小程序、app）

10.地图的使用