今天探討個(gè)不太常見(jiàn)的需求，公司需要在釘釘小程序內(nèi)進(jìn)行文件的上傳，意圖打造一個(gè)小型云盤，考慮到釘釘?shù)纳蟼鞔笮〉扔兄T多限制，以及數(shù)據(jù)的安全性，決定在釘釘內(nèi)使用web-view嵌套H5上傳頁(yè)面，并且在完成上傳動(dòng)作后，需要返回小程序，并執(zhí)行其他操作。

1.引入頁(yè)面

在管理端新建頁(yè)面，同時(shí)在釘釘頁(yè)面使用web-view引入，需要后端配合傳入合適的token。

釘釘頁(yè)面引入

<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頁(yè)面向釘釘發(fā)送消息

H5頁(yè)面使用dd.postMessage()進(jìn)行消息發(fā)送，并使用 dd.navigateTo()進(jìn)行頁(yè)面的跳轉(zhuǎn)。

<template>
  <div>
   <el-button @click="handleToDT" >返回并發(fā)送消息</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
    }
  },
  created() {
    var userAgent = navigator.userAgent
    if (userAgent.indexOf('AlipayClient') > -1) {
      // 支付寶小程序的 JS-SDK 防止 404 需要?jiǎng)討B(tài)加載，如果不需要兼容支付寶小程序，則無(wú)需引用此 JS 文件。
      document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>')
    },
      methods: {
        handleToDT() {
              // 網(wǎng)頁(yè)向小程序 postMessage 消息
              dd.postMessage({ name: '測(cè)試web-view' })
              setTimeout(()=>{
                dd.navigateTo({ url: '/pages/index/myNetwork/index' })
              },500)
        },
    }
  },
  </script>

釘釘頁(yè)面使用@message進(jìn)行消息的接受，但很坑的是，文檔上接收方法為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.在釘釘頁(yè)面向H5發(fā)送消息,繼而實(shí)現(xiàn)雙向通信

釘釘頁(yè)面創(chuàng)建實(shí)例，并調(diào)用this.webViewContext.postMessage()方法發(fā)送消息

<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頁(yè)面在mounted中使用dd.onMessage接收消息

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

4.注意內(nèi)容調(diào)試方式

釘釘頁(yè)面在控制臺(tái)查看數(shù)據(jù)即可 H5數(shù)據(jù)調(diào)試控制臺(tái)開(kāi)啟方式

5.附雙向通信全部代碼

釘釘頁(yè)面(即uniapp編寫頁(yè)面)

<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頁(yè)面(即掛載到管理端頁(yè)面)

<template>
  <div>
      <el-button @click="handleToDT" >返回并發(fā)送消息</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  created() {
    var userAgent = navigator.userAgent
    if (userAgent.indexOf('AlipayClient') > -1) {
      // 支付寶小程序的 JS-SDK 防止 404 需要?jiǎng)討B(tài)加載，如果不需要兼容支付寶小程序，則無(wú)需引用此 JS 文件。
      document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>')
    }
  },
  mounted() {
    // 接收來(lái)自小程序的消息。
    dd.onMessage = function(e) {
      console.log(e); //{'sendToWebView': '1'}
    }
  },
  methods: {

    handleToDT() {
      // javascript
      // 網(wǎng)頁(yè)向小程序 postMessage 消息
      dd.postMessage({ name: '測(cè)試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

到此這篇關(guān)于釘釘小程序web-view內(nèi)嵌H5頁(yè)面并實(shí)現(xiàn)通信的文章就介紹到這了,更多相關(guān)web-view內(nèi)嵌H5內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: