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 的组件生命周期类似。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
