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

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

相关推荐
说私域41 分钟前
技术指数变革下的组织适应性研究:基于定制开发开源AI智能名片S2B2C商城小程序的实践观察
人工智能·小程序·开源
笨笨狗吞噬者1 小时前
【uniapp】小程序体积优化,JSON文件压缩
前端·微信小程序·uni-app
sheji34162 小时前
【开题答辩全过程】以 《基于小程序的校内快递代取服务平台的设计与实现》为例,包含答辩的问题和答案
小程序
源码集结号3 小时前
一套智慧工地云平台源码,支持监管端、项目管理端,Java+Spring Cloud +UniApp +MySql技术开发
java·mysql·spring cloud·uni-app·源码·智慧工地·成品系统
木易 士心9 小时前
Uni-App 实现多身份动态切换 TabBar 指南
uni-app
说私域1 天前
私域整体结构的顶层设计:基于“开源AI智能名片链动2+1模式S2B2C商城小程序”的体系重构
人工智能·小程序·开源
2501_915106321 天前
CDN 可以实现 HTTPS 吗?实战要点、部署模式与真机验证流程
网络协议·http·ios·小程序·https·uni-app·iphone
云起SAAS2 天前
SCL-90症状自评量表抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·scl-90症状自评量表·scl-90
LoveEate2 天前
uniapp 运行/发版微信小程序
微信小程序·小程序·uni-app
韩立学长2 天前
【开题答辩实录分享】以《基于微信小程序的糖尿病居家健康管理系统》为例进行答辩实录分享
微信小程序·小程序