微信小程序onshow用法介绍(和onshow)

一、onshow的概念

onshow是小程序中的生命周期函数之一，它在小程序启动或从其他页面进入当前页面时被触发。也就是说，当小程序从后台进入前台，或者从其他页面返回当前页面，onshow函数都会被调用。

onshow函数接受一个对象作为参数，这个对象包括了小程序启动参数和场景值等信息，我们可以通过它来获取进入当前页面的相关信息。

onShow: function(options) {
  console.log(options)
  // do something
}

二、onshow的应用场景

1. 页面数据的初始化

在小程序中，onshow函数是页面生命周期中最先被调用的函数之一。如果我们需要在进入页面时对一些数据进行初始化，就可以在onshow函数中进行处理。

data: {
  list: []
},
onShow: function() {
  // 从缓存中获取数据并更新页面
  var list = wx.getStorageSync('list') || []
  this.setData({ list: list })
}

2. 页面分享功能

在进行分享时，我们可以通过设置小程序的onshareappmessage事件来实现自定义分享内容和跳转链接。而在小程序中，分享的行为也是通过页面进入触发的，所以我们可以在onshow函数中进行相关的处理。

onShareAppMessage: function () {
  // 自定义分享内容
  return {
    title: '分享标题',
    path: '/pages/index/index',
    imageUrl: '/images/share.png'
  }
},
onShow: function(res) {
  if (res.shareTicket) {
    // 处理分享行为
  }
}

3. 页面跳转的处理

在小程序中，页面的跳转是通过调用navigateTo或redirectTo等API实现的。而在某些情况下，我们需要对页面跳转进行一些处理，比如在页面跳转前弹出对话框进行确认等。

此时，我们可以在目标页面的onshow函数中进行相关的处理。

onShow: function() {
  if(this.data.needConfirm) {
    wx.showModal({
      title: '提示',
      content: '页面跳转需要进行确认',
      success: res => {
        if (res.confirm) {
          // 确认跳转页面
          wx.navigateTo({
            url: '/pages/detail/detail'
          })
        }
      }
    })
  }
}

三、onshow的注意事项

1. 不同情况下的参数返回

在小程序中，onshow函数的参数返回与进入页面的场景和方式有关，比如从后台进入前台和从其他页面进入当前页面等，所以我们在使用onshow函数时需要注意处理不同的参数返回情况。

onShow: function(options) {
  if(options.scene === 1007) {
    // 从小程序分享进入页面
    console.log(options)
  } else if(options.query.id) {
    // 从链接进入页面
    console.log(options)
  } else {
    // 默认进入页面
    console.log(options)
  }
}

2. onshow与onload的区别

在小程序中，onload函数和onshow函数都是用来处理页面渲染的函数。但是它们的触发时机和应用场景有所不同。

onload函数只会在页面第一次加载时触发一次，也就是说，onload函数只会在小程序打开或刷新时向服务器发送一次请求获取页面数据。而onshow函数则是在小程序进入前台或从其他页面返回当前页面时都会触发。也就是说，onshow函数会在每次打开或刷新页面以及从其他页面跳转回来时向服务器发送请求获取最新的数据。

四、onshow的补充说明

onshow函数作为小程序中的生命周期函数之一，其应用场景非常广泛，不仅可以用来处理页面初始化、分享和跳转等功能，还可以在onshow函数中进行网络请求等操作。

需要注意的是，在使用onshow函数进行网络请求时，我们需要将相关的操作放在onshow函数的回调函数中，以确保数据的正确获取。

onShow: function() {
  wx.showLoading({ title: '加载中' })
  wx.request({
    url: 'https://www.example.com/data.json',
    success: res => {
      // 处理获取到的数据
      wx.hideLoading()
    }
  })
}