uniapp常用知识总结

一、页面生命周期

1、onShow 和 onHide

onShow(() => {
    // 页面显示时执行的操作
    console.log('页面显示~')
})
onHide(() => {
    // 页面隐藏时执行的操作
    console.log('页面隐藏~')
})

注意:

① 页面显示和隐藏，是一个会重复触发的事件：比如进入A页面时，A会触发 onShow，从A页面跳转到B页面，A会触发 onHide，B会触发 onShow，点击返回，A又会触发 onShow,B会触发 onHide

② onShow在ios和安卓h5的表现不同，比如唤起相机后拍照或取消在ios中也会触发onShow，而在安卓中不会，建议可编辑页面或有拍照上传功能时尽量不要在onShow中初始化数据

2、onLoad

onLoad((options) => {
    // options是跳转时传递的参数对象
    console.log('页面加载~',options)
    
    // 可以在这里初始化数据或执行其他逻辑
    // ...
})

3、onReady

onReady(() => {
    console.log('页面初次渲染完成~')
    
    // 可以在onReady触发后进行跳转，此时 DOM 已经构建好，跳转不会影响页面渲染
    uni.navigateTo({
        url:'url'
    })
})

4、onUnload

onUnload(() => {
    console.log('页面卸载~')
})

5、onLoad、onReady、onshow区别

二、本地存储

1、localStorage / sessionStorage

适用于浏览器环境下的数据存储，localStorage 适用于长期存储，sessionStorage 适用于会话期间的存储。

//  将数据存储到 localStorage 中，键为key，值为value
localStorage.setItem("key", "value")
//  从 localStorage 中获取指定键的值
localStorage.getItem("key")

//  将数据存储到 sessionStorage 中，键为key，值为value
sessionStorage.setItem("key", "value")
//  从 sessionStorage 中获取指定键的值
sessionStorage.getItem("key")

2、uni.setStorage / uni.getStorage

适用于需要异步处理的数据存储，适合处理大量数据或需要在数据存取完成后执行额外逻辑的场景。

// 异步存储
uni.setStorage({
  key: "key",
  data: "value",
  success: () => {
    console.log("存储成功");
  },
  fail: (err) => {
    console.log("存储失败",err);
  }
})

// 异步获取
uni.getStorage({
  key: "key",
  success: (res) => {
    console.log("获取成功",res.data);
  },
  fail: (err) => {
    console.log("获取失败",err);
  }
})

3、uni.setStorageSync / uni.getStorageSync

适用于简单的数据存取，不涉及复杂的异步处理，适合快速存取少量数据的场景。

// 同步存储
uni.setStorageSync("key", "value")

// 同步获取
uni.getStorageSync("key")

三、页面跳转

1、uni.navigateTo

uni.navigateTo({
  url: 'url',
})

EventChannel

1. 从当前页面发送事件到目标页面，使用 events 参数定义事件监听器

// 当前页面
uni.navigateTo({
  url: '/pages/targetPage',
  events: {
    // 定义事件监听器
    someEvent: (data) => {
      console.log('Received data:', data);
    }
  },
  success: (res) => {
    // 向目标页面发送事件
    res.eventChannel.emit('someEvent', { message: 'Hello from current page' });
  }
});

1. 在目标页面中接收事件，使用 getOpenerEventChannel 获取EventChannel对象，监听来自上一个页面的事件

// 目标页面（/pages/targetPage）
onLoad(options) {
  const eventChannel = proxy.getOpenerEventChannel();
  // 监听事件
  eventChannel.on('someEvent', (data) => {
    console.log('Received data in target page:', data);
  });
}

1. EventChannel支持 双向通信，可以在目标页面中发送事件给上一个页面，在上一个页面中监听来自目标页面的事件

// 目标页面（/pages/targetPage）
onLoad(options) {
  const eventChannel = proxy.getOpenerEventChannel();
  // 监听事件
  eventChannel.on('someEvent', (data) => {
  console.log('Received data in target page:', data);
  });
  
  // 向上一页面发送事件
  eventChannel.emit('responseEvent', { message: 'Hello from target page' });
}
=========================================分割线=================================================
// 当前页面
uni.navigateTo({
  url: '/pages/targetPage',
  events: {
    someEvent: (data) => {
      console.log('Received data:', data);
    },
    responseEvent: (data) => {
      console.log('Response from target page:', data);
    }
  },
  success: (res) => {
    res.eventChannel.emit('someEvent', { message: 'Hello from current page' });
  }
});

使用场景： 点击位于列表中间或底部位置的项，进入详情操作后跳转回列表，滚动位置需要保持

2、uni.navigateBack

uni.navigateBack({
// 返回的页面数,默认为 1，如果 delta 大于现有页面数，则返回到首页。
    delta: 2 
})

3、uni.redirectTo

uni.redirectTo({
    url:'url'
})

4、uni.reLaunch

uni.reLaunch({
    url:'url'
})

除了可以使用 uni.navigateTo( ) 、uni.redirectTo( ) 和 uni.relaunch( ) 方法实现 页面刷新 外，还可以使用window方法

// h5页面适用
window.location.reload()

上面的跳转方法都有 可选参数 success( ) 、fail( ) 和 complete( ) ,分别为调用成功的回调、调用失败的回调和调用结束的回调（成功或者失败都会执行）

uni.navigateTo({
  url:'url',
  success: (res) => {
    console.log('跳转成功~', res)
  },
  fail: (err) => {
    console.log('跳转失败~', err)
  },
  complete: () => {
    console.log('跳转完成~')
  }
})

注意: uni.navigateTo 跳转时，对页面栈做了限制，最大 10 层，超过10层时跳转会报错，所以要根据场景，选择 uni.redirectTo（如从详情跳转回列表时） 或者 uni.reLaunch（如返回首页） 进行跳转。

四、页面传值

1.传递一个或多个参数

在跳转到目标页面的路由添加 ? 后添加需要传递的参数名，如id,多个参数之间使用 &连接

// 字符串拼接
uni.navigateTo({
  url:'/pages/entry/detail?id=12345&type=1'
})
// 动态参数
uni.navigateTo({
  url:`/pages/entry/detail?id=${entryId}&type=${entryType}`
})

在目标页面的 onLoad() 方法中添加 形参options 来接收传递过来的参数

onLoad(options){
  // 方式一：使用对象获取
  const { entryId, entryType } = options;
  // 方式二：一个一个接收
  this.entryId = options.entryId
  this.entryType = options.entryType
}

2.传递数组或对象

由于 url 的长度限制，需要使用 JSON.stringfy( ) 将数组或对象转为JSON字符串，使用encodeURIComponent 编码之后再进行传递

uni.navigateTo({
  url:'/pages/entry/detail?itemList=encodeURIComponent(JSON.parse(itemList))'
})

在目标页面的 onLoad() 方法中使用 decodeURIComponent 解码后，再使用 JSON.parse 获取数据

onLoad(options){
  this.itemList = JSON.parse(decodeURIComponent(options.itemList))
}

四、启用、禁用滚动

1. 禁用滚动：适用于打开popup弹窗时，禁用滚动

// 禁用滚动
const handleDisableScroll = () => {
  document.body.style.overflow = 'hidden'
  return true
}

2. 启用滚动：关闭popup弹窗时，重新启用滚动

// 启用滚动
const handleEnableScroll = () =>{
  document.body.style.overflow = 'auto'
  return true
}

五、监听返回，阻止默认事件

// 监听浏览器返回,可以放在页面显示中 (onShow)
onShow(() => {
    window.addEventListener('popstate',preventDefault)
}）
// 移除监听浏览器返回，可以放在页面卸载中 (onUnload)
onUnload(() =>{
    window.removeEventListener('popstate',preventDefault)
})
// 事件处理函数
const preventDefault = (event) => {
    // 阻止浏览器默认行为
    event.preventDefault()
}

六、适配ios底部安全距离

因为部分的ios机型最下面会有条黑色等线，导致靠近底部的元素被遮住部分，所以设置安全区边距会往上提，如果不是刘海屏则保持原来样式。

.safeAreaInsetBottom {  
    // 写在需要添加底部边距的盒子上
    padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
    padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
}

七、禁用原生导航栏

在启用原生导航栏时，uniapp打包到线上会出现 双标题 问题，因为访问时，除 uniapp 的标题外，浏览器还会有一个标题。此时可以通过 禁用原生导航栏 的方法来进行解决,在项目的 page.json 文件 app-plus 选项中添加 titleNview：false;

"pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "",
        "app-plus": {
          "titleNView": false //禁用原生导航栏
        }
      }
    },
 ]