详解小程序中h5页面onShow实现及跨页面通信方案

2023年6月11日上午7:34 • JavaScript

下面是详解小程序中h5页面onShow实现及跨页面通信方案的攻略：

简介

小程序中如果需要在一个页面中加载H5页面，需要使用<web-view>组件，而这个组件和小程序的原生页面有所不同，其中onLoad和onReady两个生命周期函数会在H5页面加载时触发，并且在H5页面显示的过程中不会再次调用，因此无法监听页面的刷新、退出等操作。而小程序原生页面中存在一个onShow生命周期函数，用于监听页面显示，因此需要实现在H5页面中进行监听和跨页面通信的功能则需要重写H5页面的onShow函数。

实现过程

1. 重写H5页面的onShow方法

在H5页面中添加以下代码即可重写onShow方法：

window.addEventListener('pageshow', function (e) {
  if (e.persisted) {
    // 页面从缓存中重新加载时会触发pageshow事件，从而进入该if语句
    // TODO: 在此处添加onShow代码
  }
}, false)

这段代码中，首先使用addEventListener监听pageshow事件，当重新加载页面时会触发pageshow事件，并且带上一个persisted参数，来判断是否从缓存中加载页面；接着在对应的if语句中添加onShow的代码。

2. 跨页面通信方案

在小程序中实现跨页面通信主要有以下几种方案：

方案一：使用小程序原生的事件机制

可以在小程序页面中通过triggerEvent函数发送一个自定义事件，并在目标页面监听事件的回调函数实现跨页面通信。

例如，在页面A中向页面B发送一个自定义事件：

this.triggerEvent('customEvent', { msg: 'hello from page A' })

在页面B中监听这个自定义事件：

this.on('customEvent', function (e) {
  console.log('收到页面A发送的消息：', e.detail.msg)
})

方案二：使用LocalStorage

LocalStorage可以在同一小程序中的页面之间共享数据，在H5页面中也可以使用。

例如，页面A向LocalStorage中写入数据：

wx.setStorageSync('myData', { name: '张三', age: 18 })

在页面B中获取这个数据：

var myData = wx.getStorageSync('myData')
console.log('从页面A获取到的数据：', myData)

方案三：在URL中传递参数

在小程序中跳转页面时，可以在URL的query参数中传递参数，从而实现跨页面通信。

例如，在H5页面中跳转到小程序的页面B，并传递参数id为1：

wx.navigateTo({ url: '/pages/b/index?id=1' })

在页面B中获取这个参数：

var options = this.getQuery()
var id = options.id
console.log('获取到的参数：', id)

示例代码

下面是一个完整的示例代码，实现通过LocalStorage在H5和小程序页面之间进行数据通信：

H5页面：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>h5页面</title>
</head>
<body>

  <script>
    window.addEventListener('pageshow', function (e) {
      if (e.persisted) {
        // 页面从缓存中重新加载时会触发pageshow事件，从而进入该if语句
        var data = wx.getStorageSync('myData')
        console.log('从小程序获取到的数据：', data)
      }
    }, false)
  </script>

</body>
</html>

小程序页面A：

Page({
  onLoad: function (options) {
    wx.setStorageSync('myData', { name: '张三', age: 18 })
    wx.navigateTo({ url: '/pages/b/index' })
  }
})

小程序页面B：

Page({
  onShow: function () {
    var data = wx.getStorageSync('myData')
    console.log('从H5页面获取到的数据：', data)
  }
})

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解小程序中h5页面onShow实现及跨页面通信方案 - Python技术站