在 H5 页面和 uniapp 小程序之间进行数据通信

在 H5 页面和 uniapp 小程序之间进行数据通信可以使用以下方法:

  1. URL 参数传递

在 H5 页面中使用 URL 参数来传递数据,然后在小程序中使用 uni.getLaunchOptionsSync() 或者 onLaunch/onShow 生命周期函数来获取 URL 参数中的数据。

在 H5 页面中:

window.location.href = 'uniapp://example.com?data=xxx'

在小程序中:

var options = uni.getLaunchOptionsSync()
var data = options.query.data

  1. localStorage

在 H5 页面中使用 localStorage 来存储需要传递的数据,然后在小程序中使用 uni.getStorageSync() 或者 uni.setStorageSync() 来获取或设置 localStorage 中的数据。

在 H5 页面中:

localStorage.setItem('data', 'xxx')

在小程序中:

var data = uni.getStorageSync('data')

  1. Uni-app EventChannel

Uni-app 提供了 EventChannel 来进行页面之间的通信。在 H5 页面中创建一个 EventChannel,并使用 uni.navigateBack() 或 uni.navigateTo() 方法打开小程序页面并携带 EventChannel。在小程序页面中接收 EventChannel 并监听对应的事件。

在 H5 页面中:

var eventChannel = new uniLib.EventChannel('channel-name')
eventChannel.emit('event-name', { data: 'xxx' })
uni.navigateTo({
  url: '/pages/example/example?channel=channel-name',
  events: {
    eventName: function(res) {
      console.log(res.data)
    }
  }
})

在小程序页面中:

var eventChannel = this.getOpenerEventChannel()
eventChannel.on('event-name', function(res) {
  console.log(res.data)
})

(未完待续.....后面补上)

相关推荐

  1. H5 页面 uniapp 程序之间进行数据通信

    2024-05-01 10:18:02       33 阅读
  2. uniapp 引入h5页面

    2024-05-01 10:18:02       41 阅读
  3. 如何程序中实现页面之间的返回

    2024-05-01 10:18:02       29 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-01 10:18:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-01 10:18:02       100 阅读
  3. 在Django里面运行非项目文件

    2024-05-01 10:18:02       82 阅读
  4. Python语言-面向对象

    2024-05-01 10:18:02       91 阅读

热门阅读

  1. 9、开发基于FemWorkbench的CFD模块

    2024-05-01 10:18:02       27 阅读
  2. Qt:下载和安装

    2024-05-01 10:18:02       29 阅读
  3. 等保课后作业

    2024-05-01 10:18:02       29 阅读
  4. 【蓝桥杯】第十五届蓝桥杯C/C++B组省赛补题

    2024-05-01 10:18:02       33 阅读
  5. Apache Spark 的基本概念和在大数据分析中的应用

    2024-05-01 10:18:02       31 阅读