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

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

相关推荐
七夜zippoe2 小时前
uniapp跳转页面时如何带对象参数
uni-app·携带参数
racerun3 小时前
UniApp中的pages.json 和 tabBar
uni-app·json
paopaokaka_luck8 小时前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序
春哥的研究所10 小时前
AI人工智能名片小程序源码系统,名片小程序+分销商城+AI客服,包含完整搭建教程
人工智能·微信小程序·小程序
paopaokaka_luck10 小时前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
贝格前端工场11 小时前
小程序订阅消息设计:用户触达与隐私保护的平衡法则
大数据·小程序
weixin_lynhgworld11 小时前
盲盒一番赏小程序:用科技重新定义“未知的快乐”
科技·小程序
Bruce_Json12 小时前
微信小程序ts+sassjlin-ui
微信小程序·小程序·sass
说私域15 小时前
淘宝直播与开源链动2+1模式AI智能名片S2B2C商城小程序的融合发展研究
人工智能·小程序·开源
说私域18 小时前
互联网生态下赢家群体的崛起与“开源AI智能名片链动2+1模式S2B2C商城小程序“的赋能效应
人工智能·小程序·开源