一、了解uniapp生命周期
Uniapp是一个跨端开发框架,支持多个平台的开发。在uniapp中,了解它的生命周期对于页面的优化非常重要。Uniapp生命周期主要有三个阶段:
<template> <view> hello world </view> </template> <script> export default{ onLoad(){ console.log('页面加载了') }, onUnload(){ console.log('页面卸载了') }, onHide(){ console.log('页面隐藏了') } } </script>
在页面渲染之前,Uniapp会先调用onLoad生命周期函数。页面卸载时,Uniapp会调用onUnload函数,而页面隐藏,Uniapp会调用onHide函数。当然,Uniapp还有其他生命周期函数,可以根据具体需求进行选择使用。
二、使用await优化api请求
在项目中,api请求是必不可少的环节。通常的做法是使用Promise或者是回调函数进行请求,而使用await可以更好地管理api请求。
<script> export default{ data(){ return{ dataList:[], isLoading:true } }, async onLoad(){ const result = await this.getData() this.dataList = result.data this.isLoading = false }, methods:{ async getData(){ const {data:{data}} = await uni.request({ url:'https://xxx.com/api/data', method:'GET' }) return { data } } } } </script>
在这个代码示例中,使用async关键字将onLoad生命周期函数变成异步函数,采用await等待api请求的结果。同时,在方法getData中也采用await等待api请求结果返回,从而实现更好的代码可读性和管理性。
三、封装接口请求
在实际开发中,一个接口常常被多个地方使用,而且在不同的地方使用时,传入的参数也可能有所不同。将接口进行封装,就可以在代码重复利用,提高开发效率。
<script> async function getData(url, params={}){ const {data:{data}} = await uni.request({ url:url, method:'GET', data:params }) return data } export default{ data(){ return{ dataList:[], isLoading:true } }, async onLoad(){ this.dataList = await getData('https://xxx.com/api/data',{id:1}) this.isLoading = false } } </script>
在这个代码示例中,getData函数实现了接口的封装,从而使业务代码更加简洁。在onLoad函数中,调用getData函数获取数据,并将获取的数据在页面中展示。
四、合理使用keep-alive组件
在开发过程中,经常会遇到在不同页面之间切换的情况,并且在切换后需要重新渲染页面,这会消耗一定的性能。而使用keep-alive组件可以将前一次页面渲染的结果缓存起来,这样在相同的页面之间切换时将不会重新渲染页面,提高性能。
<template> <keep-alive> <router-view /> </keep-alive> </template>
在代码示例中,router-view组件中的页面组件会被缓存起来,下一次再次访问时,直接从缓存中读取。