脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 小程序web-view内嵌H5

钉钉小程序web-view内嵌H5页面并实现通信

 更新时间：2022年05月20日 10:24:18   作者：宜简  
本文主要介绍了钉钉小程序web-view内嵌H5页面并实现通信，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

前言

今天探讨个不太常见的需求，公司需要在钉钉小程序内进行文件的上传，意图打造一个小型云盘，考虑到钉钉的上传大小等有诸多限制，以及数据的安全性，决定在钉钉内使用web-view嵌套H5上传页面，并且在完成上传动作后，需要返回小程序，并执行其他操作。

1.引入页面

在管理端新建页面，同时在钉钉页面使用web-view引入，需要后端配合传入合适的token。

  • 钉钉页面引入
<template>
	<view class="">
            <web-view id="web-view-1" :src="`http://10.10.5.231:9529/myNetwork?x-token=${token}`"></web-view>
	</view>
</template>

2.在H5页面向钉钉发送消息

H5页面使用dd.postMessage()进行消息发送，并使用 dd.navigateTo()进行页面的跳转。

<template>
  <div>
   <el-button @click="handleToDT" >返回并发送消息</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
    }
  },
  created() {
    var userAgent = navigator.userAgent
    if (userAgent.indexOf('AlipayClient') > -1) {
      // 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
      document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>')
    },
      methods: {
        handleToDT() {
              // 网页向小程序 postMessage 消息
              dd.postMessage({ name: '测试web-view' })
              setTimeout(()=>{
                dd.navigateTo({ url: '/pages/index/myNetwork/index' })
              },500)
        },
    }
  },
  </script>

钉钉页面使用@message进行消息的接受，但很坑的是，文档上接收方法为onMessage，但uniapp中需要改为@message才能接收到消息。

<template>
	<view class="">
		<web-view id="web-view-1" :src="`http://10.10.5.231:9529/myNetwork?x-token=${token}`" @message="test"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				webViewContext: '',
				token: uni.getStorageSync('x-token')
			}
		},
		onLoad(e){
		    
		  },
		methods: {
			test(e){
				console.log(e)
			}
		},
                
	}
</script>

<style>
</style>

3.在钉钉页面向H5发送消息,继而实现双向通信

钉钉页面创建实例，并调用this.webViewContext.postMessage()方法发送消息

<template>
	<view class="">
		<web-view id="web-view-1" :src="`http://10.10.5.231:9529/myNetwork?x-token=${token}`" @message="test"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				webViewContext: '',
				token: uni.getStorageSync('x-token')
			}
		},
		onLoad(e){
		    this.webViewContext = dd.createWebViewContext('web-view-1');    
		  },
		methods: {
			test(e){
				this.webViewContext.postMessage({'sendToWebView': '1'});
			}
		},
                
	}
</script>

<style>
</style>

H5页面在mounted中使用dd.onMessage接收消息

  mounted() {
    // 接收来自小程序的消息。
    dd.onMessage = function(e) {
      console.log(e); //{'sendToWebView': '1'}
    }
  },

4.注意 内容调试方式

钉钉页面在控制台查看数据即可 H5数据调试控制台开启方式

5.附双向通信全部代码

钉钉页面(即uniapp编写页面)

<template>
	<view class="">
		<web-view id="web-view-1" :src="`http://10.10.5.231:9529/myNetwork?x-token=${token}`" @message="test"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				webViewContext: '',
				token: uni.getStorageSync('x-token')
			}
		},
		onLoad(e){
		    this.webViewContext = dd.createWebViewContext('web-view-1');    
		  },
		methods: {
			test(e){
				console.log(e)
				this.webViewContext.postMessage({'sendToWebView': '1'});
			}
		},
                
	}
</script>

<style>
</style>

H5页面(即挂载到管理端页面)

<template>
  <div>
      <el-button @click="handleToDT" >返回并发送消息</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  created() {
    var userAgent = navigator.userAgent
    if (userAgent.indexOf('AlipayClient') > -1) {
      // 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
      document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>')
    }
  },
  mounted() {
    // 接收来自小程序的消息。
    dd.onMessage = function(e) {
      console.log(e); //{'sendToWebView': '1'}
    }
  },
  methods: {

    handleToDT() {
      // javascript
      // 网页向小程序 postMessage 消息
      dd.postMessage({ name: '测试web-view' })
      setTimeout(()=>{
        dd.navigateTo({ url: '/pages/index/myNetwork/index' })
      },500)
    },
    
  }
}
</script>

<style lang="scss" scoped>
</style>

钉钉小程序文档 https://open.dingtalk.com/document/isvapp-client/web-view

到此这篇关于钉钉小程序web-view内嵌H5页面并实现通信的文章就介绍到这了,更多相关web-view内嵌H5内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JS实现简单面向对象的颜色选择器实例

    JS实现简单面向对象的颜色选择器实例

    这篇文章主要介绍了JS实现简单面向对象的颜色选择器,以完整实例形式分析了JavaScript基于面向对象实现颜色选择器的具体步骤与实现技巧,需要的朋友可以参考下
    2016-04-04
  • js实现精美的银灰色竖排折叠菜单

    js实现精美的银灰色竖排折叠菜单

    这篇文章主要介绍了js实现精美的银灰色竖排折叠菜单,可实现页面左侧竖排的纵向折叠菜单效果,非常美观实用,需要的朋友可以参考下
    2015-05-05
  • JavaScript纯前端实现在线GIF压缩

    JavaScript纯前端实现在线GIF压缩

    这篇文章主要为大家详细介绍了如何利用JavaScript纯前端实现在线GIF压缩工具,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • 让JavaScript的Alert弹出框失效的方法禁止弹出警告框

    让JavaScript的Alert弹出框失效的方法禁止弹出警告框

    弹出框难免会影响你的心情，所以通过以下代码可将Js弹出框屏蔽掉，实现思路是对alert方法重写
    2014-09-09
  • uni-app和web-view页面相互传参方法实例

    uni-app和web-view页面相互传参方法实例

    web-view是一个web浏览器组件,可以用来承载网页的容器,会自动铺满整个页面,下面这篇文章主要给大家介绍了关于uni-app和web-view页面相互传参的相关资料,需要的朋友可以参考下
    2023-06-06
  • JS 实现图片直接下载示例代码

    JS 实现图片直接下载示例代码

    本文为大家详细介绍下使用JS实现图片直接下载，具体实现代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
    2013-07-07
  • js中用事实证明cssText性能高的问题

    js中用事实证明cssText性能高的问题

    首先要感谢 EtherDream 的不同观点，在 巧用cssText属性批量操作样式 一篇中由于他的质疑态度使我做了进一步的测试。
    2011-03-03
  • JavaScript伪数组和数组的使用与区别

    JavaScript伪数组和数组的使用与区别

    这篇文章主要给大家介绍了关于JavaScript伪数组和数组使用与区别的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • javascript中处理时间戳为日期格式的方法

    javascript中处理时间戳为日期格式的方法

    本文为大家介绍下javascript中如何将时间戳处理为日期格式，下面有个不错的示例，感兴趣的朋友可以参考下
    2014-01-01
  • 小程序实现轮播每次显示三条数据

    小程序实现轮播每次显示三条数据

    这篇文章主要为大家详细介绍了小程序实现轮播每次显示三条数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06

最新评论