当前位置:   article > 正文

在 H5 页面和 uniapp 小程序之间进行数据通信_uni.getlaunchoptionssync().query

uni.getlaunchoptionssync().query

H5 页面和 uniapp 小程序之间进行数据通信可以使用以下方法:

  1. URL 参数传递

在 H5 页面中使用 URL 参数来传递数据,然后在小程序中使用 uni.getLaunchOptionsSync() 或者 onLaunch/onShow 生命周期函数来获取 URL 参数中的数据。

在 H5 页面中:

window.location.href = 'uniapp://example.com?data=xxx'

小程序中:

  1. var options = uni.getLaunchOptionsSync()
  2. 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 页面中:

  1. var eventChannel = new uniLib.EventChannel('channel-name')
  2. eventChannel.emit('event-name', { data: 'xxx' })
  3. uni.navigateTo({
  4. url: '/pages/example/example?channel=channel-name',
  5. events: {
  6. eventName: function(res) {
  7. console.log(res.data)
  8. }
  9. }
  10. })

在小程序页面中:

  1. var eventChannel = this.getOpenerEventChannel()
  2. eventChannel.on('event-name', function(res) {
  3. console.log(res.data)
  4. })

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

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号