当前位置：首页 > news >正文

uniapp 必须掌握的细节

news 2025/7/3 10:12:47

1.使用watch实现实时监控的效果

例如：实时监测手机号码的示例

// 实时监测手机号码
watch(() => UserRegisterForm.value.phone, (newPhone) => {// 简单的手机号码正则表达式验证const phoneRegex = /^1[3-9]\d{9}$/;tips.value.tipPhone = !phoneRegex.test(newPhone);
});

2.onLoad获取页面传入的参数

onLoad的导入：

import {onLoad} from '@dcloudio/uni-app';

onLoad的使用方式，例如其他页面传递type的参数值来

那么onLoad获取type参数值的方式：


onLoad((option) => {// 直接使用 option.type获取type参数值console.log(option.type)
});

3.对于tabBar页面的跳转

只能使用switchTab进行页面的跳转

    uni.switchTab({url: ''});

4.在预览中发现有时右边会越出界面

这时只需要自定义样式通用样式，然后导入到App.vue中全局生效即可：

（1）首先创建common/style/common-style.scss

view,swiper,swiper-item,text{box-sizing:border-box;
}

（2）然后再App.vue中导入

<script>export default {onLaunch: function() {console.log('App Launch')},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')}}
</script><style lang="scss">@import 'common/style/common-style.scss';
</style>

5. 解决状态栏或导航栏重叠，内容遮挡问题

适配不同设备的状态栏高度：
- 在不同设备上，状态栏（显示信号、电量等信息的那一行）的高度可能会有所不同。通过 getStatusBarHeight 函数，你可以获取到当前设备的状态栏高度，从而在布局时确保内容不会被状态栏遮挡。
适配不同设备的标题栏高度：
- 在带有刘海屏或者水滴屏的设备上，导航栏（包括状态栏和标题栏）的高度可能会有所不同。通过 getTitleBarHeight 函数，你可以获取到当前设备的标题栏高度（包括状态栏和标题栏），这对于自定义导航栏时保证布局一致性非常有用。

先写个system.js的工具类

// 获取系统信息，包括状态栏高度等  
const SYSTEM_INFO = uni.getSystemInfoSync();  // 导出获取状态栏高度的函数  
export const getStatusBarHeight = () => SYSTEM_INFO.statusBarHeight || 0;  // 导出获取标题栏高度的函数  
export const getTitleBarHeight = () => {  if (uni.getMenuButtonBoundingClientRect) {  // 获取菜单按钮的边界信息  let { top, height } = uni.getMenuButtonBoundingClientRect();  // 计算标题栏高度，考虑状态栏高度  return height + (top - getStatusBarHeight()) * 2;  } else {  // 如果没有菜单按钮边界信息，则返回一个默认值  return 70;  }  
};

使用的方式：

template:

		<view class="statusBar" :style="{height:statusBarHeight+'px'}"></view><view class="search" :style="{height:titleBarHeight+'px'}"><image @click="goToSearchPage" class="search-button" src="../../static/img/search.svg" mode=""></image></view>

script:

import {getStatusBarHeight,getTitleBarHeight} from '../../util/system.js'const statusBarHeight = ref(getStatusBarHeight());
const titleBarHeight = ref(getTitleBarHeight());