小程序与内嵌webview的数据交互方案详解

一、目的

• 将H5切换至小程序的过程中，受限于时间因素，部分页面需通过webview承载，由此产生H5与webview之间的交互需求。（后续虽将大部分涉及交互的页面迁移至原生小程序，但这仍是一个需要解决的技术点。）
• 核心难点在于低码C端填报页（表单）因技术限制无法迁移至小程序，必须通过webview承载。其中包含一个地图定位组件需在小程序端实现，最后需将定位数据携带回表单进行回填，此过程包含几个关键点。
  • 在小程序中完成定位操作后，携带数据至表单进行回填时，要求不刷新表单页面，并保留用户已填写的内容。
  • 实现H5与小程序之间的数据传递。

二、技术方案

• 小程序官方为webview提供了一套数据交互方案（postMessage），具体可参考官网关于web-view的文档。

• 然而，该方案仅在 小程序后退、组件销毁、分享、复制链接 这几种特定场景下，小程序端的webview才能接收到消息。经过多方研究与调查，最终确定了以下替代方法。

  • 1. H5引入SDK，通过SDK提供的方法执行页面跳转并携带参数。鉴于我们使用的是低码平台，表单结构动态生成，因此需携带定位数据及组件key（以便在数据回填时准确定位到对应组件）。
  • 2. 在小程序完成定位后，重定向至一个H5中间页，参数拼接在URL上。在该中间页执行以下处理。

    • a. 获取URL参数中的key和val，将key和val分别缓存至localStorage（key与val分两个键存储）。

          if (route.query.key) {
            window.localStorage.setItem(loactionComponentKey, `${route.query.key}`)
            window.localStorage.setItem(
              `${loactionComponentValuePrefix}${route.query.key}`,
              `${route.query.value}`
            )
          }
      

    • b. 执行goback操作。由于页面存在缓存机制，页面回退后表单值依然保留。注意：此处必须使用小程序SDK提供的回退方法 navigateBack。

  • 3. 在表单页监听localStorage，获取其中存储的表单值，进而执行表单回填操作。

  // 单独页面组件 渲染赋值
    window.addEventListener('storage', function (e) {
      const locKey = window.localStorage.getItem(loactionComponentKey)
  
      if (!locKey) return
  
      const value = window.localStorage.getItem(`${loactionComponentValuePrefix}${locKey}`)
  
      if (locKey && value) {
        // setValue
        window.localStorage.removeItem(`${loactionComponentValuePrefix}${locKey}`)
        window.localStorage.removeItem(loactionComponentKey)
      }
    })
  

• 若采用hash模式的路由跳转，则无需如此复杂。因为修改路径参数不会触发页面刷新，直接通过修改webview的url即可实现。

三、总结

• 1、涉及三个页面：H5、H5中间页、小程序。
• 2、H5跳转至小程序：通过SDK方法跳转并携带参数，小程序在onload生命周期中获取这些参数。
• 3、小程序跳转至H5中间页：通过SDK方法重定向并携带路径参数，将参数存储至storage。
• 4、H5中间页跳转至H5：使用SDK方法执行回退操作。
• 5、H5监听storage，进行数据处理。

到此这篇关于小程序与内嵌webview的数据交互的文章就介绍到这了,更多相关小程序与内嵌webview数据交互内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！