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

news/2024/9/23 22:34:59/

在 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)
})

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


http://www.ppmy.cn/news/1446358.html

相关文章

nodejs写接口(一)

一、新手上路十大步 (1)先建一个常用的文件夹 (2)使用code打开 (3)在里面新建一个index.js文件 (4)新建项目 npm init -y //用于自己搭建一个项目框架(写框架&#xf…

ChatGPT向付费用户推“记忆”功能,可记住用户喜好 | 最新快讯

4月30日消息,人工智能巨头OpenAI宣布,其开发的聊天机器人ChatGPT将在除欧洲和韩国以外的市场全面上线“记忆”功能。这使得聊天机器人能够“记住”ChatGPT Plus付费订阅用户的详细信息,从而提供更个性化的服务。 OpenAI早在今年2月就已经宣布…

【Camera KMD ISP SubSystem笔记】CAM SYNC与DRQ①

在android系统中fence用于不同模块需要访问同一块buffer的同步,例如camera和graphic。对于preview buffer, camera是生产者graphic是消费者。 camera需要生产图像数据到preview buffer时需要等待preview buffer的 fence可用。 camera sync是高通camx框架里面用于各个…

electron中主进程和渲染进程通信

在 Electron 中,通过使用 IPC (Inter-Process Communication)机制,ipcMain 和 ipcRenderer 模块可以在主线程(主进程)和渲染线程(渲染进程)之间进行消息通信。当你想要从主线程发送数…

Fastadmin 日常项目常见用法整理

ps:自己使用笔记备用,不间断更新,常见功能点 一,数据库后缀 结尾字符示例类型要求字段说明timerefreshtimebigint/datetime识别为日期时间型数据,自动创建选择时间的组件imagesmallimagevarchar识别为图片文件&#…

为什么使用javacv转封装rtsp为rtmp时出现如下问题:[h264 @ 000000004faf7500]no frame?

🏆本文收录于「Bug调优」专栏,主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收藏&&…

AUTOSAR 全套英文标准

CP AUTOSAR 英文标准 CP AUTOSAR R4.2.2 英文标准 CP AUTOSAR R4.3.0 英文标准 CP AUTOSAR R4.3.1 英文标准 CP AUTOSAR R4.4.0 英文标准 CP AUTOSAR R1911 英文标准 CP AUTOSAR R2011 英文标准 CP AUTOSAR R2111 英文标准 CP AUTOSAR R2211 英文标准 CP AUTOSAR R2311 英文标准…

深度学习系列66:试穿模型IDM-VTON上手

1. 模型概述 如图,总体流程为: 输入为:衣服的编码xg;人物noise的编码xt;人物身上衣物的mask和人体pose分割(densepose);衣服部分经过两部分网络:1)高级语义网络IP-Adapter&#xff…