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

一、目的

• 我们要就将h5切换到小程序，由于时间问题，一些页面不得不通过webvie承接，所以这就涉及到h5和webview交互的问题。（后期把大部分需要交互的页面迁移到小程序了，这都小问题。）
• 最重要的就是低码c端填报页（表单）由于技术问题无法迁移到小程序，必须通过webview承接，里边有一个地图定位组件需要在小程序中实现，最后携带定位数据到表单中回填，这里面有几个关键点
  • 小程序定位结束，携带数据到表单回填的时候不刷新表单，需要保留表单已经填的内容
  • h5与小程序的数据传递。

二、技术方案

• 小程序针对webview其实是出了一套数据交互的方案(postMessage)，具体可以参考官网web-view

• 但是它只有在 小程序后退、组件销毁、分享、复制链接 这几种特定情况下小程序webview中才能接收到。结果多方面研究调查，最终确定了下面的方法。

  • 1.h5引入sdk，通过skd中的方法做页面跳转并携带参数，因为我们是低码平台，表单是动态的，所以这块携带定位数据、组件key（数据回填时能准确找到）。
  • 2.在小程序做定位结束之后，重定向到一个h5的中间页，参数拼接在url上边，在中间页做一下几个处理。

    • a.获取到url参数key和val，将key和val缓存到localStorage（分别存分两个）

          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，获取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的方法重定向 携带路径参数 存到story
• 4、h5中间页->h5 使用sdk方法回退
• 5、h5 监听story，做数据处理

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

最新评论