uniapp 必须掌握的细节

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());

6. 在page.json中的pages数组中第一项表示应用启动页

说白了就是应用启动后看到第一个界面，一般我们可以把应用的登录界面或者一些游客可以访问的界面放在pages数组中第一项

示例：