微信小程序 web-view H5页面交互，不用点击返回按钮；页面间交互bindmessage、 postmessage、binderror、bindsucces。

作者：不正经 | 2024-02-21 12:32:50

踩

bindmessage

问题/功能描述：微信小程序中应用web-view组建加载h5页面链接，在页面中需要点击某个按钮来通知小程序进行某种操作。

官方的bindmessage只有在某些特定场景才可以进行数据交互，存在交互短板，不符合我们的业务需求；

短板如下：网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }，data是多次 postMessage 的参数组成的数组）--- https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

经分析：

1.在web-view加载网页时，加载失败触发binderror的监听方法，加载成功触发bindsuccess的监听防范，在这两个方法中可以拿到页面访问的链接。

2.既然能拿到页面链接，可以在点击页面【按钮】时让页面跳转，在跳转地址后面添加【按钮标志或参数】,再通过小程序监听方法拿到参数进行业务处理。

3.小程序处理完业务逻辑后，更新链接参数再给webview组建地址进行重新赋值，再次进行数据交互- - 闭环。

结果：数据交互通过页面跳转带参数，通过web-view的监听方法获取链接参数进行数据交互；

小程序监听代码：


<!-- 初始页面A -->
<view class="video_authpre">
  <view class="viewbg">
    <view class="view-t">
      <image class="head-scan" src="/images/videoauth/video-face.png"></image>
      <view class="pre-tip">tips1</view>
      <view class="pre-tip">tips2</view>
    </view>
  </view>
  <view class="scanpre" bindtap="beginAuth">确认</view>
</view>
 
<!-- H5页面加载 -->
<view class="video_authpre" wx:if='{{showContractSign}}'>
  <view class="viewbgIng nobg">
    <view class="view-t nobg">
      <image class="contractimg" mode="aspectFit" src="/images/videoauth/readfile.png"></image>
      <view class="colorg">加载中...</view>
    </view>
  </view>
  <web-view class="web" bindload="loadSuccess" binderror="loadError"
    src="http://localhost/contractSign/contractSign.html" bindmessage='getpostMsg'></web-view>
</view>


  //监听报错信息，根据带入的参数进行数据交互
  //分割的最后一个参数为交互标志，根据标志进行业务处理，也可以携带参数
  loadSuccess: function (e) {
    console.log('loadSuccess ------');
    console.log(e);
    console.log('loadSuccess ------');
 
    if(e.detail.src.indexOf('done') != -1){
      console.warn("loadSuccess 收到页面的按钮反馈:done");
      this.result(true);
    }
 
    if(e.detail.src.indexOf('cancel') != -1){
      console.warn("loadSuccess 收到页面的按钮反馈:cancel");
      this.result(false);
    }
 
  },
 
  loadError: function (e) {
    console.log('loadError ------');
    console.log(e);
    console.log('loadError ------');
 
    if(e.detail.src.indexOf('done') != -1){
      console.warn("loadError 收到页面的按钮反馈:done");
      this.result(true);
    }
 
    if(e.detail.src.indexOf('cancel') != -1){
      console.warn("loadError 收到页面的按钮反馈:cancel");
      this.result(false);
    }
  },
 
 
  /**
   * 显示web-view插件
  */
  beginAuth: function () {
    this.setData({showContractSign:true})
    return;
  },

H5页面代码：引入jssdk


<!DOCTYPE html>
<html id="html">
<head>
	<title>文件标题</title>
	<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0">
	<meta charset="utf-8">
	<style type="text/css">
		::-webkit-scrollbar{width:0;display:none;background:none;}
		::-webkit-scrollbar-thumb{width:0;display:none;}
		.wrap{ width: 100vw; height: 100vh; box-sizing: border-box; object-fit: cover;}
		body{width:100%;overflow-x:hidden; margin:0;}
		#outurl{
			width: 100%;
			height: calc(100vh - 21.3vw);
			position: absolute;
			left: 0;
			top: 0;
			bottom: 21.3vw;
			right: 0;
		}
 
		.operation{
			display: flex;;
			justify-content: space-between;
			margin: 0 12.5vw;
			position: fixed;
			left: 0;
			bottom:0;
			right: 0;
			height: 21.3vw;
			box-sizing: border-box;
			padding-top: 5.3vw;
		}
 
		.cancelbtn{
			opacity: 0.9;
			box-shadow: 2px 4px 16px 0 rgba(47,99,245,0.30);
			border-radius: 20px;
			width: 31vw;
			height: 10.5vw;
			line-height: 10.5vw;
			text-align: center;
			border: 1px solid rgba(32,125,240);
			color: rgba(32,125,240);
		}
 
		.signedbtn{
			opacity: 0.9;
			background-image: linear-gradient(270deg, rgba(34,143,242) 0%, #001EEE 100%);
			box-shadow: 2px 4px 16px 0 rgba(47,99,245,0.30);
			border-radius: 20px;
			width: 31vw;
			height: 10.5vw;
			line-height: 10.5vw;
			text-align: center;
			color: #FFFFFF;
		}
	</style>
</head>
<body id="body">
	<div class="wrap">
		<!-- iframe 为我方业务需要加载的某个外部链接 -->
		<iframe id="outurl" src=""></iframe>
		<div class="operation">
			<div class='cancelbtn' onclick="cancelClick()">
				取消
			</div>
			<div class='signedbtn' onclick="doneClick()">
				完成
			</div>
		</div>
	</div>
</body>
 
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script type="text/javascript">
 
	function getQueryVariable(variable){
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
	}
 
	let pageUrl = window.location.href;
	let subPage = getQueryVariable('subpage');
	let subPageUrl = decodeURIComponent(subPage)
	document.getElementById("outurl").src = subPageUrl;
 
 
	let cancelIsTap = false;
	let sureIsTap = false;
 
	function cancelClick(e){
		if(cancelIsTap == false){
			cancelIsTap = true;
			setTimeout(function() {
				cancelIsTap = false;
			}, 300);
			
			//事件处理 begin
			wx.miniProgram.getEnv(function(res) {
				pageUrl += '&feedback=cancel'
			 	console.log(res) // true
			  	window.location.href = pageUrl;
			})
 
			//事件处理 end
			return;
		}
 
	}
	function doneClick(e){
		if(sureIsTap == false){
			sureIsTap = true;
			setTimeout(function() {
				sureIsTap = false;
			}, 300);
 
			//事件处理 begin
			wx.miniProgram.getEnv(function(res) {
			  	pageUrl += '&feedback=done'
			 	console.log(res) // true
			  	window.location.href = pageUrl;
 
			})
			//事件处理 end
			return;
		}
		
	}
	
</script>
</html>

交互演示：修仙页面为H5页面，只看交互即可～

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/123785