小程序与内嵌webview的数据交互
霹雳桃 2024-07-17 15:03:01 阅读 53
小程序与内嵌webview的数据交互
一、目的
我们要就将h5切换到小程序,由于时间问题,一些页面不得不通过webvie承接,所以这就涉及到h5和webview交互的问题。(后期把大部分需要交互的页面迁移到小程序了,这都小问题。)最重要的就是低码c端填报页(表单)由于技术问题无法迁移到小程序,必须通过webview承接,里边有一个地图定位组件需要在小程序中实现,最后携带定位数据到表单中回填,这里面有几个关键点
小程序定位结束,携带数据到表单回填的时候不刷新表单,需要保留表单已经填的内容h5与小程序的数据传递。
二、技术方案
小程序针对webview其实是出了一套数据交互的方案(postMessage),具体可以参考官网web-view
但是它只有在 <code>小程序后退、组件销毁、分享、复制链接 这几种特定情况下小程序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的方法重定向 携带路径参数 存到story4、h5中间页->h5 使用sdk方法回退5、h5 监听story,做数据处理
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。