uniapp 的 html文件中如何使用 uni.XXX 以及如何向应用发送消息

最新推荐文章于 2025-03-14 10:00:23 发布

原创最新推荐文章于 2025-03-14 10:00:23 发布

· 2.1k 阅读

2 ·

版权

文章标签：

#html #javascript #vue.js

开发中遇到的问题---解决专栏收录该内容

35 篇文章

订阅专栏

想使用uni.xxx

**.html 需要引入：

https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js

<!-- uni 的 SDK，必须引用。 --> 
<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>

应用的**.vue 通过 web-view 标签引入 **.html

vue文件传值给 html文件通过 url地址 ?id=1&name=xx 的方式

那html文件如何传给 vue文件呢？

一开始想到的肯定是全局变量什么的吧，但是肯定是不行的

uniapp提供了一个Api用来解决

可看一下官方文档

uni.postMessage(OBJECT)https://uniapp.dcloud.io/component/web-view?id=postmessage

文档对 uni.postMessage 的介绍：

网页向应用发送消息，在 <web-view> 的 message 事件回调 event.detail.data 中接收消息。

使用详情：

**.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>

        <-- 1. 引入 js 文件，为了可以使用 uni.*** -->
        <script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-        app/uni.webview.0.1.52.js"></script>
	</head>
	<body>
		<div onclick="to">123</div>
	</body>
	
	<script>
	   // 2. 例如：要在点击 div 时给 vue 传递字符串 'aaa'
        to(){
            uni.postMessage({
                data:'aaa'
            })
        }
        
	</script>
</html>

**.vue

<template>
    <div>  
        // @message 接收uni.postMessage	回调
        <web-view  @message='message' src="html的路径"></web-view>
    </div>
</template>

<script>
    export default{
        methods:{
            message(e){
                // e.detail.data 就是传递的数据
            }
        }
    }
</script>