当前位置: 首页 > news >正文

uniapp webview嵌入外部h5网页后的消息通知

    最近开发了个oa系统,pc端的表单使用form-create开发,form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。移动端使用uniapp开发,但是因为form-create移动端只支持vant,不支持uniapp。官方的说法是移动端用vant开发后通过webview的方式嵌入到uniapp。

    uniapp嵌入开发好的h5页面没有问题,但是h5页面需要保存表单数据和发起工作流,做完这个操作后需要告知uniapp关闭webview页面,并跳转uniapp相应页面。

  (1)uniapp 的webview.vue页面:

<template>
	<view>
		<web-view :src="fileUrl" @message="handlerMessage"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileUrl: "",
			}
		},
		onLoad(options) {
			this.fileUrl = decodeURIComponent(options.fileUrl)
		},
		methods: {
			handlerMessage(event) {
				console.log('Received message:', event.detail.data);
			}
		}
	}
</script>

<style>

</style>

webview页面使用message方法监听h5发送给uniapp应用的消息。

(2)h5推送消息至uniapp

   我的h5页面基于vue3+vant4+vite开发。

   1.首先在public目录下新建static目录,接着创建js目录。下载jweixin-1.4.0.js和uni.webview.1.5.6.js文件到本地,引入到js目录下。

2.在项目index.html中写入如下内容:

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流程表单</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script type="text/javascript" src="/static/js/jweixin-1.4.0.js"></script>
<script type="text/javascript" src="/static/js/uni.webview.1.5.6.js"></script>
<script>
    document.addEventListener('UniAppJSBridgeReady', function () {
        uni.getEnv(function (res) {
            if (res.plus) {
                console.log('当前环境为【5+App】');
            } else if (res.miniprogram) {
                console.log('当前环境为【微信小程序】');
            } else if (res.h5) {
                console.log('当前环境为h5');
            }
        });
    });
</script>
</body>
</html>

3.在h5页面,保存按钮点击时调用下面的方法。

//提交
async function onSubmit(formData) {
  let params = {
    procdefKey: processDefKey,
    formData: JSON.stringify(formData)
  };
  try {
    loading.value = true
    await apiSaveFormStartProcess(params);
    
    uni.postMessage({
      data: {
        action: 'startProcessCompleted'
      }
    });
    
    showSuccessToast('流程发起成功');
    uni.navigateBack({
      delta: 1
    });
  } finally {
    loading.value = false
  }
}

uni.postMessage推送消息到uniapp应用。由于message在后退、组件销毁、分享才会接受到消息。所以在提交完后,调用 uni.navigateBack触发后退。此时webview的message方法就能接受到消息了。

(3)效果

 

http://www.dtcms.com/a/22678.html

相关文章:

  • 就是第七题
  • 【前端学习笔记】Webpack
  • pod控制器
  • uniapp 安卓10+ 选择并上传文件
  • 抖音碰碰卡:碰一碰发视频,系统部署分享!
  • JAVA中的异常
  • 俄罗斯方块游戏完整代码示例
  • 从SSM到S4
  • C++--封装
  • uniapp 使用v-html在微信小程序中渲染成rich-text如何显示文本溢出省略
  • 数据库加密全解析:从传输到存储的安全实践
  • 计算机硬件组成+vmware虚拟机使用
  • #第十二题
  • window中git bash使用conda命令
  • 数据分析、商业智能、业务分析三者之间的关系
  • 计算机毕业设计hadoop+spark旅游景点推荐 旅游推荐系统 旅游可视化 旅游爬虫 景区客流量预测 旅游大数据 大数据毕业设计
  • MapReduce的工作原理及其在大数据处理中的应用
  • 多层代理模式解析Invocation
  • 重构测试项目为spring+springMVC+Mybatis框架
  • Debezium同步之如何同步GIS数据
  • 李代数和李群的转化方法
  • 计算机专业知识【软件开发中的常用图表:E - R图、HIPO、DFD、N - S、PAD详解】
  • STM32 HAL库USART串口中断编程:演示数据丢失
  • AI 百炼成神:线性回归,预测房价
  • ESP32 ESP-IDF TFT-LCD(ST7735 128x160) LVGL基本配置和使用
  • PID控制学习
  • [java详细总结] java中的String详解
  • PhotoShop新版脚本编辑工具安装
  • cornerstone3D学习笔记-MPR
  • Web 后端 请求与响应