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

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

相关推荐
2501_915918411 小时前
uni-app 项目 iOS 上架踩坑经验总结 从证书到审核的避坑指南
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者81 小时前
iOS 上架 uni-app 流程全解析,从打包到发布的完整实践
android·ios·小程序·https·uni-app·iphone·webview
说私域2 小时前
“互联网 +”时代商业生态变革:以开源 AI 智能名片链动 2+1 模式 S2B2C 商城小程序为例
人工智能·小程序·开源
低代码布道师7 小时前
少儿舞蹈小程序(7)打造您的“活”名片:动态展示机构实力
低代码·小程序
软工的小白10 小时前
uniapp开发前端静态视频界面+如何将本地视频转换成网络地址
uni-app·音视频
程序员陆通11 小时前
用 Cursor AI 快速开发你的第一个编程小程序
人工智能·小程序
鹧鸪云光伏与储能软件开发11 小时前
投资储能项目能赚多少钱?小程序帮你测算
运维·数据库·小程序·光伏·光伏设计软件·光伏设计
微三云-轩12 小时前
小程序:12亿用户的入口,企业数字化的先锋军
大数据·小程序·开源软件
低代码布道师12 小时前
少儿舞蹈小程序(8)校区信息后台搭建
低代码·小程序
2501_9160088912 小时前
iOS 抓包工具有哪些?全面盘点主流工具与功能对比分析
android·ios·小程序·https·uni-app·iphone·webview