微信小程序webview与html页面传参

最新推荐文章于 2024-09-20 14:28:08 发布

失忆症患者_

最新推荐文章于 2024-09-20 14:28:08 发布

阅读量2.4k

点赞数

分类专栏：微信小程序文章标签：微信小程序 html webview

本文链接：https://blog.csdn.net/qq_41929578/article/details/121748935

版权

微信小程序专栏收录该内容

7 篇文章 6 订阅

订阅专栏

本文介绍了如何在微信小程序中使用<web-view>加载PDF，并通过HTML端计时器强制阅读10秒后发送阅读信号。详细步骤包括设置网页链接、利用Vue.js与微信小程序的JSSDK进行通信，以及在控制台查看返回的消息。

摘要由CSDN通过智能技术生成

适用场景

在微信小程序中强制阅读pdf（预览pdf可参考pdf.js），html端返回阅读状态。

实现思路

1.小程序端：使用<web-view ></web-view>标签来承载pdf链接。
2.html端：可通过计时器强制阅读10s，10s后点击我已阅读按钮，返回阅读状态。

代码

html端

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<button type="button" @click="post_message()">点击向小程序传递消息</button>
		</div>
		//引入小程序JSSDK
		<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					msg:"hello"
				},
				methods:{
					post_message(){
						wx.miniProgram.navigateBack({
							delta: 0
						})
						wx.miniProgram.postMessage({data:this.msg})
					}
				},
			})
		</script>
	</body>
</html>

//网页中使用JSSDK提供的接口返回小程序页面
//通过postMessage方法向小程序端返回参数

小程序端

<web-view src="http://127.0.0.1:8848/myFirstTest/test1.html" bindmessage="get_message"></web-view>
//通过e.detail获得返回结果
 get_message(e){
        console.log(e.detail )
    },
//src属性为链接地址
//bindmessage 接收html端通过postMessage方法返回的的参数