在 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 小时前
互联网医院系统源码解析:如何开发智能化的电子处方小程序?
小程序·app开发·互联网医院系统源码·智慧医疗小程序·医院app
Java Fans2 小时前
微信小程序——访问服务器媒体文件的实现步骤
服务器·微信小程序·小程序
岑梓铭2 小时前
uniapp邪门事件
uni-app
漫天绯羽3 小时前
uniapp 中使用天地图,安卓端、h5
uni-app
尚学教辅学习资料5 小时前
基于SpringBoot+vue+uniapp的智慧旅游小程序+LW示例参考
vue.js·spring boot·uni-app·旅游
Evaporator Core5 小时前
微信小程序数据绑定与事件处理:打造动态交互体验
微信小程序·小程序·交互
烂蜻蜓9 小时前
前端已死?什么是前端
开发语言·前端·javascript·vue.js·uni-app
家里有只小肥猫20 小时前
uniApp小程序保存canvas图片
前端·小程序·uni-app
低代码布道师20 小时前
性格测评小程序10生成报告
低代码·小程序
小徐_233320 小时前
从空白到交互:用Trae快速搭建uni-app AI对话小程序页面
前端·uni-app·trae