小程序与内嵌webview的数据交互

小程序与内嵌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) returnconst value = window.localStorage.getItem(`${loactionComponentValuePrefix}${locKey}`)if (locKey && value) {// setValuewindow.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,做数据处理

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/18101.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

洁净环境测试标准、监测计划要点及风险评估注意事项

洁净区日常环境监测 洁净区环境监测作为污染控制策略(CCS)的重要组成部分,用于监测旨在将粒子和微生物污染风险降至最低的控制措施。下面内容,中邦兴业小编将与大家做个详细的分享。 环境监测计划 评估和定义粒子、微生物监测所…

2024吉林省电赛(达盛杯)

1. 电赛F4系统板3D图 提起自制STM32F407VET6系统板 2. 电赛原理图 3. 电赛PCB图 4. 智能车实物图 下图是电赛的实物图,结构采用3D打印 5. 软件设计 下图是程序设计图 6. 仿真视频 (1) 变化高度 2024吉林省电赛仿真1 (2) 变化轮距 2024电赛仿真2 7. APP控制小车 …

代码随想录算法训练营第二十一天| 530. 二叉搜索树的最小绝对差、501. 二叉搜索树中的众数、236. 二叉树的最近公共祖先

[LeetCode] 530. 二叉搜索树的最小绝对差 [LeetCode] 530. 二叉搜索树的最小绝对差 文章解释 [LeetCode] 530. 二叉搜索树的最小绝对差 视频解释 题目: 给你一个二叉搜索树的根节点 root ,返回 树中任意两不同节点值之间的最小差值 。 差值是一个正数,其…

Flutter 中的 AnnotatedRegion 小部件:全面指南

Flutter 中的 AnnotatedRegion 小部件:全面指南 Flutter 的 AnnotatedRegion 是一个功能强大的小部件,它允许开发者在应用程序中标记特定的区域,并在这些区域上附加元数据。这些元数据可以被其他小部件或应用程序逻辑使用,以实现…

Py列表(list)

目录 正向索引: 反向索引: 嵌套列表: 修改列表中的值 列表常用的方法 实例 练习: 正向索引: 从0开始,依次递增。第一个元素的索引为0,第二个元素的索引为1,依此类推。 列表的下标…

视频太大怎么压缩变小 视频太大了怎么压缩

视频作为一种多媒体形式,在当今社会的重要性日益凸显,其应用范围广泛,影响力深远。 但是视频文件的大小也在不断增加,这给存储和传输带来了很大的困扰。那么,当视频文件过大时,我们该如何将其压缩变小呢&am…

MyBatis中常见标签的使用(动态SQL)

MyBatis 中的动态 SQL 允许你在 XML 映射文件中编写灵活的 SQL 查询语句,根据不同的条件动态生成不同的 SQL 语句。这样可以避免在 Java 代码中拼接 SQL 字符串,使得 SQL 查询更加清晰和易维护。本文章将介绍几个常见的标签并实现动态SQL 目录 一.标签…

左偏树,可合并堆

合并两个堆并维护最小或最大性质解决树上节点问题,从叶节点往根维护,每个节点看作一个堆表示到最近的叶节点的距离,所以每次对合并(树高矮)表示堆的顶点对应下标关键代码 static void dfs(int x){for(int ihead[x];i&g…

全域运营是本地生活服务的新模式吗?

最近,本地生活赛道又出现了一个新的说法,即全域运营是本地生活的下半场。事实上,这一论断并非空穴来风,而是有真凭实据。 作为多家互联网大厂重点布局的业务板块,本地生活的火爆程度早已有目共睹。根据多家互联网大厂…

Vue 组件功能的复用

Vue中的混入(Mixins)是一种复用组件逻辑的技术,它允许你抽取组件中的可复用功能,并将其作为一个独立的模块与其他组件组合。混入对象可以包含数据、计算属性、方法、生命周期钩子、侦听器等组件选项。当组件使用混入时&#xff0c…

互联网的利

在互联网没发明之前,人类说话要近距离的说,玩游戏要近距离的玩,十分麻烦。于是,互联网解决了这个问题。聊天可以在电脑上聊,玩游戏可以用游戏软件查找玩家来玩,实现了时时可聊,时时可玩的生活。…

nginx编译安装手把手教学

编译安装nginx的第一步需要从nginx的官网找到nginx最新的稳定版本 下面这是官方网站的资源下载地址 https://nginx.org/en/download.html选中稳定版本点击右键——选择复制链接 在终端内使用wget指令官网下载地址,将nginx下载 使用wget指令下载 wget https://ng…

代码模板,Cookie和Session

目录 代码模板 Cookie的基本使用 概念 Cookie的API public Cookie(String name, String value) 发送Cookie对象到客户端:使用response对象 创建Cookie对象并响应给浏览器 在服务器后端获取Cookie对象 Cookie[]cookiesrequset.getCookies(); Cookie的使用细…

微服务架构中Java的应用

在微服务架构中,Java是一种非常常用的编程语言。Java生态系统非常庞大,有许多框架和工具可以用来构建和管理微服务。 以下是一些在微服务架构中使用Java编写的应用程序的示例: Spring Boot和Spring Cloud:Spring Boot是一种用于快…

【InternLM实战营第二期笔记】03:“茴香豆“,搭建你的 RAG 智能助理(未完成)

文章目录 笔记-RAG课程结构为什么要用 RAG?定义工作原理向量数据库RAG 工作流程发展历程常见优化RAG vs 微调LLM 优化方法比较RAG的评价总结 笔记-茴香豆什么是茴香豆茴香豆实战 笔记-RAG 课程结构 为什么要用 RAG? 新增知识,尤其是高频变动…

基于51单片机简易温度计

一.硬件方案 本系统利用51单片机控制温度传感器DS18B20进行温度的实时检测并显示,能够实现快速测量环境温度。硬件以微控制器为核心,外接时钟电路、复位电路、温度测量电路、LED显示电路组成。 二.设计功能 (1)采用DS18B20温度…

Node.js和npm常用命令

一、Node.js简介 Node.js是一个免费、开源、跨平台的JavaScript运行时环境,允许开发人员创建服务器、web应用程序、命令行工具和脚本。 点击查看node.js中文官网 点击查看node.js英文官网 二、npm简介 npm(Node Package Manager)是Node.js的软件包管理器&#xff0…

使用Python编写的SIRD模型示例

代码是一个使用Python编写的SIRD模型示例,模拟传染病在人群中的传播。SIRD模型是一个经典的流行病学模型,它将人群分为四个部分:易感者(S)、感染者(I)、康复者(R)和死亡者(D)。 2. **定义SIRD模型的微分方程**: - `sird_model` 函数定义了SIRD模型的基本方程。它接受当前…

ssm150旅游网站的设计与实现+jsp

旅游网站设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本旅游网站就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞…

如何在Java中实现函数式编程?

在Java中实现函数式编程的关键是使用Lambda表达式和函数式接口。下面是一个简单的示例,展示了如何使用Lambda表达式和函数式接口来实现函数式编程。 首先,定义一个函数式接口,可以通过使用FunctionalInterface注解来标记该接口为函数式接口。…