在小程序端使用web-view内嵌网页,通过 src 携带参数,通过 @message 接收h5传回的数据
<template> <view> <web-view :src="activity.imgUrl?id=xxx" @message="postMessage"></web-view> </view> </template>
在h5页面通过 wx.miniProgram.postMessage 可以向小程序传值
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> <script type="text/javascript"> wx.miniProgram.postMessage({ data: ‘foo‘ }) </script>
但是在实际的开发中会发现,h5不能及时给小程序传值,查找官方文档发现:
网页向小程序 postMessage 时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。
可以人为触发来实现向小程序传值
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> <script type="text/javascript"> wx.miniProgram.navigateBack({ delta: 1 }) wx.miniProgram.postMessage({ data: ‘foo‘ }) </script>
我在开发的时候遇到一种情况,就是在小程序内嵌页面点击返回的时候,实际上只是关闭了内嵌页面,而当前页面并没有注销,针对这种情况做一下处理:
在h5页面监听页面关闭
在小程序手动关闭
<!-- 小程序跳转 --> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function() { window.history.pushState(‘forward‘, null, ‘./#forward‘); if (window.history && window.history.pushState) { $(window).on(‘popstate‘, function() { <!-- 页面关闭了 --> wx.miniProgram.navigateBack({ delta: 1 }) wx.miniProgram.postMessage({ data: ‘foo‘ }) }); } }) </script>
h5监听页面关闭,然后在给小程序传值,小程序接收到值之后手动注销当前页面
原文地址:https://www.cnblogs.com/cap-rq/p/11603840.html
时间: 2024-10-07 18:57:17