Uniapp 实现 与 外部 HTML 页面通信

                                 Uniapp  实现 与 外部 HTML 页面通信

---

上节知识

在 uniapp 中 经常会 内嵌 html, 并且 有时候会还有  相互通信 的需求 ：

这里 总结了 两种形式

1. APP  中  nvue 使用 web-view   实现html 通信；

2. H5     中  vue   使用 iframe       实现html 通信；

这里结合了两种；

从 HTML 调用 uniapp 接口

<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script type="text/javascript">
    //js SDK  加载成功
    document.addEventListener('UniAppJSBridgeReady', function() {
        // 监听按钮事件
        document.getElementById('to_shiming').addEventListener('click', function() {
            let data_shiming = {
                    action: '1'
                }
            // .nvue 可以接收的事件
            uni.postMessage({
                data: data_shiming
            });

            // .vue 可以接收的事件
            window.parent.postMessage(data_shiming, '*')

        });
    })





    //接收来自 .vue  的数据 和 参数  间接 调用 函数
    window.addEventListener('message', function(event) {
        // event.origin --发送者的源
        // event.source --发送者的window对象
        // event.data --数据
        if (event.data) {
            //此处执行事件
            if (event.data.action == 66) {
                console.log("event.data.time:", event.data.time)
                setBirDayInit(event.data.time)
                setBirDay(true)
            }

        }

    })

    // .nvue 直接调用函数
    function setBirDay(data) {

    }

    // .nvue 直接调用函数
    function setBirDayInit(day) {

    }
</script>

从 uniapp 调用 html  网页；这个是为什么两种方式的原因

这里要分为两种情况；

一种是从  .nvue  调用 html

<template>
	<view class="web-view">
		<web-view class="web-view" :src="url" ref="webview" @onPostMessage="handlePostMessage" @receivedtitle="onReceivedTitle">
		</web-view>
	</view>
</template>

<script>
	export default {
		methods: {
			handlePostMessage: function(data) {
				// 获取网页的参数
				console.log("得到参数", data.detail);
			},

			onPageFinish: function(e) {
				this.$refs.webview.evalJs("方法名('" + 参数 + "')");
				this.$refs.webview.evalJs("方法名('参数')");
			},
		}
	}
</script>
<style  scoped>
	.web-view {
		flex: 1;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.sendMessage {
		width: 750rpx;
		position: fixed;
		bottom: 0rpx;
	}
</style>

 一种是从  .vue   调用 html

<template>
	<view class="bir-webviwe">
		<iframe id="iframe" class="viewiframe" :src="url" ref="iframe" @onload="onLoad"></iframe>
	</view>
</template>

<script>
	export default {
		mounted() {
			// 接受子页面发来的信息
			window.addEventListener("message", this.ReceiveMessage);
			//console.log("------>",this.url)
		},
		methods: {
			onLoad() {
				console.log("---------------->onLoad")			
			},
			ReceiveMessage(event) {
				if (event.data && event.data.data && event.data.data.arg) {
					console.log("iframe 参数 event.data:", event.data.data.arg)
				}
			},

			SendMessage() {	
				let str = toolTimer.formatTime(new Date(), "yyyy-MM-dd")
				let data = {
					action: 66,
					time: str
				}
				document.getElementById('iframe').contentWindow.postMessage(data, '*')
			}
		}
	}
</script>
<style lang="scss" scoped>
	.bir-webviwe {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;

		.viewiframe {
			width: 100%;
			height: 100%;
			background: #FFFFFF
		}
	}
</style>

入口需要是按 环境加载不同的界面：这里进行区分 对不同的运行环境 跳转不同的界面

//该功能只能真机使用 仅限于 App  .nvue
// #ifdef APP-PLUS
uni.navigateTo({
    url: '/pages/home/subnvue/noobGuide'
})
// #endif


// #ifdef H5                  .vue
uni.navigateTo({
    url: '/pages/home/noobGuide'
})
// #endif

对应的配置文件：

{
	"path": "pages/home/noobGuide",
		"style": {
	"navigationBarTitleText": "新手指南",
	"backgroundColor": "#ebebeb;",
	"backgroundColorBottom": "#ebebeb;",
	"backgroundColorTop": "#ebebeb;",
			"app-plus": {
				"bounce": "none",
				"titleNView": {
					"titleColor": "#fff",
					"buttons": [{
						"float": "left",
						"text": "返回",
						"fontSize": "17px",
						"width": "auto"
					}]
				}
			}
	    }

}

{
	"path": "pages/home/subnvue/noobGuide",
	"style": {
		"navigationBarTitleText": "新手指南",
		"backgroundColor": "#ebebeb;",
		"backgroundColorBottom": "#ebebeb;",
		"backgroundColorTop": "#ebebeb;",
		"disableScroll": true,
			"app-plus": {
				"bounce": "none",
				"titleNView": {
				"titleColor": "#fff",
					"buttons": [{
						"float": "left",
						"text": "返回",
						"fontSize": "17px",
						"width": "auto"
					}]
				}
			}
		}

}

>>>>>觉得为你节省时间的话： 就请我喝杯茶吧！