Uniapp部分
文章目录
1.Uniapp 的页面生命周期和 Vue 的生命周期有何区别?
1)Vue 的生命周期
beforeCreate
:在实例初始化之后,数据观测和事件配置之前被调用。created
:在实例创建完成后被立即调用。此时,实例已完成以下的配置:数据观测、属性和方法的运算、watch/event 事件回调。然而,挂载阶段还没开始,$el
属性目前不可见。beforeMount
:在挂载开始之前被调用。相关的 render 函数首次被调用。mounted
:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。beforeUpdate
:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。updated
:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。beforeDestroy
:在实例销毁之前调用。在这一步,实例仍然完全可用。destroyed
:在实例销毁之后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
2)Uniapp 的页面生命周期
onLoad
:页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数。onShow
:页面显示时触发。每次打开页面都会调用。onReady
:页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。onHide
:页面隐藏时触发。如 navigateTo 或底部 tab 切换到其他页面,当前页面会被隐藏。onUnload
:页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时,当前页面会被卸载。
3)区别
- 名称和触发时机:
- Uniapp 的页面生命周期名称和触发时机与 Vue 的组件生命周期不完全相同。例如,Uniapp 中的
onLoad
对应 Vue 中的created
和mounted
之间的阶段,但功能上有所不同,onLoad
主要用于获取页面参数,而 Vue 的created
和mounted
更多是关于组件实例的创建和挂载。 - Uniapp 的
onShow
和onHide
对应于页面的显示和隐藏状态变化,在 Vue 中通常需要通过路由守卫或其他方式来实现类似的功能。
- Uniapp 的页面生命周期名称和触发时机与 Vue 的组件生命周期不完全相同。例如,Uniapp 中的
- 应用场景:
- Vue 主要用于构建单页应用(SPA),其生命周期更多地围绕组件的创建、更新和销毁。
- 而 Uniapp 用于构建多端应用,页面生命周期更侧重于页面在不同状态下的行为,例如页面加载、显示、隐藏和卸载等,以适应不同平台的特性和需求。
- 多端适配:
- Uniapp 需要考虑多个平台的差异,其页面生命周期可能会根据不同平台进行一些特定的调整和优化。
- 而 Vue 主要针对浏览器环境,相对来说平台差异较小。
2.Uniapp的rpx转换px的公式?
在 UniApp 中,rpx(responsive pixel)
是一种响应式单位,它可以根据屏幕宽度进行自适应调整。px(pixel)
是固定像素单位。
- rpx 转换为 px 的公式如下:
px = rpx * (设备屏幕宽度 / 750)
通常情况下,UniApp 以 750rpx 作为设计稿的宽度标准。如果设计稿宽度为 750px,那么 1rpx 就等于 1px。当设备屏幕宽度变化时,rpx 的实际像素值会根据上述公式进行动态调整。
例如,在一个设备上屏幕宽度为 375px,如果有一个元素的宽度设置为 150rpx,那么转换为 px 的值为:
150 * (375 / 750) = 75px
。
3.Uniapp的tabbar自定义,怎么实现突起home标?
1)配置自定义 tabBar
- 在项目的
pages.json
文件中,设置tabBar
的custom
属性为true
,表示使用自定义 tabBar。{ "pages": [ //... ], "tabBar": { "custom": true } }
2)创建自定义 tabBar 组件
- 在项目中创建一个自定义 tabBar 组件,例如
custom-tab-bar.vue
。
<template>
<view class="custom-tab-bar">
<view
v-for="(item, index) in tabBarList"
:key="index"
:class="['tab-bar-item', activeIndex === index? 'active' : '']"
@click="navigateToPage(index)"
>
<image
v-if="item.iconPath"
:src="activeIndex === index? item.selectedIconPath : item.iconPath"
/>
<text>{{ item.text }}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tabBarList: [
{
pagePath: '/pages/index/index',
iconPath: '/static/tabbar/icon1.png',
selectedIconPath: '/static/tabbar/icon1_active.png',
text: '首页'
},
// 其他 tabBar 项配置
],
activeIndex: 0
};
},
methods: {
navigateToPage(index) {
const pagePath = this.tabBarList[index].pagePath;
uni.switchTab({ url: pagePath });
this.activeIndex = index;
}
}
};
</script>
<style scoped>
.custom-tab-bar {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background-color: #fff;
border-top: 1px solid #eee;
}
.tab-bar-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.active {
color: #ff6600;
}
</style>
3)突出显示“home”标
- 在自定义 tabBar 组件的
data
中添加一个标志变量,用于判断是否是“首页”选项。data() { return { //... isHomePage: false }; },
- 在
mounted
生命周期钩子中,通过获取当前页面路径来判断是否是“首页”,并设置标志变量。mounted() { const currentPage = getCurrentPages()[getCurrentPages().length - 1].route; this.isHomePage = currentPage === '/pages/index/index'; },
- 在模板中,根据标志变量来添加突出显示的样式。例如,可以使用一个特殊的图标或背景颜色来突出显示“home”标。
<template>
<view class="custom-tab-bar">
<view
v-for="(item, index) in tabBarList"
:key="index"
:class="['tab-bar-item', activeIndex === index? 'active' : '', isHomePage && index === 0? 'home-active' : '']"
@click="navigateToPage(index)"
>
<image
v-if="item.iconPath"
:src="activeIndex === index? item.selectedIconPath : item.iconPath"
/>
<text>{{ item.text }}</text>
</view>
</view>
</template>
<style scoped>
.home-active {
background-color: #ff6600;
color: #fff;
}
//...
</style>
这里给大家推荐一个大佬的文章
http://t.csdnimg.cn/TuEC1
4.Uniapp的tabbar自定义,怎么实现隐藏原生tabbar?
1)配置 pages.json
- 在项目的
pages.json
文件中,将tabBar
的custom
属性设置为true
,表示使用自定义 tabBar。{ "pages": [ //... ], "tabBar": { "custom": true } }
二、设置页面样式
- 在每个页面的样式文件中,可以设置
page
的padding-bottom
属性,以避免页面内容被原生 tabBar 遮挡。因为原生 tabBar 通常占据一定的底部空间,隐藏后需要手动调整页面底部的布局。/* pages/index/index.vue 的样式 */ page { padding-bottom: 50px; /* 根据实际情况调整这个值,以适应自定义 tabBar 的高度 */ }
5.Uniapp页面跳转的方法?
1)navigateTo(保留当前页面,跳转到应用内的某个页面)
- 用法:
uni.navigateTo({ url: '/pages/destination-page/destination-page' });
- 特点:
- 可以通过
onLoad
等生命周期函数中的options
参数接收上一个页面传递过来的参数。 - 跳转后可以通过
navigateBack
返回上一页。
- 可以通过
2)redirectTo(关闭当前页面,跳转到应用内的某个页面)
- 用法:
uni.redirectTo({ url: '/pages/destination-page/destination-page' });
- 特点:
- 不能通过
navigateBack
返回到原页面,因为原页面已被关闭。
- 不能通过
3)reLaunch(关闭所有页面,打开到应用内的某个页面)
- 用法:
uni.reLaunch({ url: '/pages/destination-page/destination-page' });
- 特点:
- 通常用于从登录页面跳转到首页等场景,关闭所有其他页面,只显示目标页面。
4)switchTab(跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面)
- 用法:
uni.switchTab({ url: '/pages/tab-bar-page/tab-bar-page' });
- 特点:
- 只能跳转到在
pages.json
中配置的tabBar
页面。
- 只能跳转到在
5)页面间传递参数
- 通过 URL 传递参数:
- 在跳转时将参数拼接到 URL 中,例如:
uni.navigateTo({
url: '/pages/destination-page/destination-page?param1=value1¶m2=value2'
});
- 在目标页面的
onLoad
生命周期函数中接收参数:
export default {
onLoad(options) {
console.log(options.param1);
console.log(options.param2);
}
};
- 通过全局变量传递参数(不推荐,可能会导致数据混乱):
- 在一个页面中设置全局变量:
uni.setStorageSync('globalParam', value);
- 在另一个页面中获取全局变量:
const value = uni.getStorageSync('globalParam');
- 在一个页面中设置全局变量:
6.Uniapp的生命周期钩子函数
UniApp 的生命周期钩子函数分为应用级别和页面级别。
1)应用生命周期钩子函数
onLaunch
:当 UniApp 初始化完成时触发(全局只触发一次)。onShow
:当 UniApp 启动,或从后台进入前台显示时触发。onHide
:当 UniApp 从前台进入后台时触发。onError
:当 UniApp 报错时触发。
2)页面生命周期钩子函数
onLoad
:页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数。onShow
:页面显示/切入前台时触发。onReady
:页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。onHide
:页面隐藏/切入后台时触发。onUnload
:页面卸载时触发。如使用navigateBack
返回到上一页面或使用redirectTo
、reLaunch
跳转到其他页面时,当前页面会被卸载。onPullDownRefresh
:监听用户下拉刷新事件。需要在pages.json
中配置enablePullDownRefresh
为true
来开启下拉刷新功能。onReachBottom
:页面上拉触底事件的处理函数。onShareAppMessage
:用户点击右上角分享时触发。可以返回一个对象来自定义分享内容。onPageScroll
:监听页面滚动事件。
此外,组件也有自己的生命周期钩子函数,与 Vue 的组件生命周期类似。