微信小程序 mpvue，webview中h5页面向小程序发送数据bindmessage方法

最新推荐文章于 2024-07-17 14:40:57 发布
最新推荐文章于 2024-07-17 14:40:57 发布
阅读量2.5w 收藏 7
点赞数 5
分类专栏： mpvue 微信小程序 文章标签： bindmessage web-view向小程序传数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36934930/article/details/80357975
版权
本文介绍了在微信小程序的mpvue环境下，通过web-view组件的bindmessage方法实现H5页面向小程序发送数据的详细过程。特别强调了该方法会在特定时机（如小程序后退、组件销毁、分享）触发，并提醒开发者需要注意这一特性，避免不必要的困扰。
摘要由CSDN通过智能技术生成

公司小程序场景中需要用到webview中的bindmessage方法，因为不好好看文档，弄了好长时间，心碎，所以在这里给自己加深一下印象，要好好看文档。
方法的话，微信小程序原生写法和mpvue方法类似，在这里仅以mpvue为例，以转发为条件触发bindmessage事件

注意点
  • 网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。一定看清楚是小程序后退、组件销毁、分享时才会触发，我没看清弄了好长时间，蓝瘦香菇……
感觉这个方法有点坑，请慎用……，特定时机（小程序后退、组件销毁、分享）触发
小程序
template
<web-view :src="url" @message="bindmessage"></web-view>
script

                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  Shuah153
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
mpvue关于小程序内嵌网页  web-view 的分享

				
			

			

				

					qq_27970999的博客
				

				

					04-23
					
					2530
					
				

			

		

		

			
				
在main。js 里面声明小程序的全局变量绑定到vue的原型对象上面



点击右上角菜单转发后 把webViewUrl 绑定到全局变量里面去





内嵌网页点击右上角的分享 会多出一个webViewUrl

onShareAppMessage: function(res) {

console.log(res);

var that = this;

if (res.from ...

			
		

	



                

              
                



	

		

			

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

				
			

			

				

					GOD_CHONG的专栏
				

				

					03-25
					
					2944
					
				

			

		

		

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

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

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

			
		

	



                


  
              

                


	

		

			

				
					
H5与小程序通信

					
最新发布

				
			

			

				

					coderMrcc的博客
				

				

					07-17
					
					618
					
				

			

		

		

			
				
H5与小程序进行通信

			
		

	





	

		

			

				
					
用MsmqBinding投送message出现的一个灵异事件 【第二篇】

				
			

			

				

					weixin_34075551的博客
				

				

					05-24
					
					102
					
				

			

		

		

			
				
 
　　一直都在用Msmqbinding，也一直忽视了message里面的内容格式是什么样的，这也是微软给我们高层封装带给我们的开发效率，但同时一旦中间出了什么问题，
就不知道从何查起了。有个需求是这样的，服务端和客户端采用离线连接，也就是消息队列模式，server接收端在处理消息的时候，要根据一定的逻辑，如果该消息不
满足规则，就把消息原样的丢回消息队列中，问题就出现在这里。。。消息丢进去...

			
		

	



		

			
		



	

		

			

				
					
bindmessage 无效 webview postMessage @message

				
			

			

				

					weixin_60592115的博客
				

				

					05-21
					
					375
					
				

			

		

		

			
				
前提：必须引入 <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>用这个wx.miniProgram.postMessage({data:{foo: 'bar'}})

			
		

	





	

		

			

				
					
小程序内嵌web-view之分享（2）

				
			

			

				

					luoyumei的博客
				

				

					06-23
					
					8404
					
				

			

		

		

			
				
网页与小程序之间通信，网页引入JSSDK 1.3.2
在web-view中绑定bindmessage事件  


  网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }
  


&amp;amp;amp;lt;web-view src='{{url}}' bindtap='toShare' bindmessage=&amp;amp;quot;bindme...

			
		

	





	

		

			

				
					
微信小程序webview与h5通过postMessage实现实时通讯的实现

				
			

			

				

					10-16
				

			

		

		

			
				
主要介绍了微信小程序webview与h5通过postMessage实现实时通讯的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

			
		

	





	

		

			

				
					
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析

				
			

			

				

					10-16
				

			

		

		

			
				
微信小程序引入Webview组件后，开发者能够将已有的H5页面嵌入到小程序中，实现资源复用，如微信商城、文章详情页、商品详情页等。然而，由于微信安全策略，无法直接在Webview中调用微信支付接口。因此，我们需要通过...

			
		

	





	

		

			

				
					
微信小程序与webview交互实现支付功能

				
			

			

				

					10-16
				

			

		

		

			
				
主要介绍了微信小程序与webview交互实现支付功能，文中通过示例代码介绍的非常详细，对大家学习或者使用小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

			
		

	





	

		

			

				
					
小程序多端框架全面测评：chameleon、Taro、uni-app、mpvue、WePY

				
			

			

				

					dichu2296的博客
				

				

					03-28
					
					358
					
				

			

		

		

			
				
摘要： 微信小程序开发技巧。

作者：coldsnap
原文：小程序多端框架全面测评

Fundebug经授权转载，版权归原作者所有。
小编推荐： Fundebug提供JS、微信小程序、微信小游戏，Node.js和Java错误监控。真的是一个很好用的错误监控服务，众多大佬公司都在使用。
最近前端届多端框架频出，相信很多有代码多端运行需求的开发者都会产生一些疑惑：这些框架都有什么优缺点？到...

			
		

	





	

		

			

				
					
微信小程序（1）——web-view和小程序间传递参数、发送消息

					
热门推荐

				
			

			

				

					衡与墨的博客
				

				

					01-22
					
					1万+
					
				

			

		

		

			
				
小程序向web-view发送消息
在&amp;amp;lt;web-view&amp;amp;gt;组件中有一个属性src（src是webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。）
通过设置src中GET参数即可向网页传递参数：
&amp;amp;lt;web-view src=&amp;quot;https://mp.weixin.qq.com?name='name'&amp;amp;amp;age=12&amp;quot;&amp;amp;gt

			
		

	





	

		

			

				
					
关于小程序web-view bindmessage真机不触发的问题解决办法

				
			

			

				

					weixin_45866907的博客
				

				

					07-30
					
					1422
					
				

			

		

		

			
				
关于小程序web-view bindmessage真机不触发的问题解决办法

			
		

	





	

		

			

				
					
微信小程序

				
			

			

				

					tianruine的博客
				

				

					06-09
					
					959
					
				

			

		

		

			
				
1.首先在master 开发工具上传代码dev的环境2.体验版测试3.master 代码环境变成线上环境4.体验线上环境的小程序，线上的数据，测试5.提交审核6.在发布管理平台，将ischeck改为true，目的影藏内容，在导航栏不显示，（例子，在你申请公众号，在你提交你要卖酱油，但是你在上线你要卖酒，这样审核是通过不了的，所以，你在提交审核后不卖酒的tab隐藏起来）7.审核通过后，在微信的管理平台发布小程序8.将审核状态ischeck改为false9.然后在自己编写的小程序管理平台配置，小程序更新的时候是

			
		

	





	

		

			

				
					
微信小程序-web-View使用以及跟小程序的通信传值

				
			

			

				

					qq_35971976的博客
				

				

					12-15
					
					5451
					
				

			

		

		

			
				
简单来说 就是小程序嵌套H5页面。

			
		

	





	

		

			

				
					
用webview内嵌h5页面，webviw实现分享微信支付功能 , h5传参跳转web-view 微信小程序

				
			

			

				

					weixin_44690999的博客
				

				

					12-01
					
					6291
					
				

			

		

		

			
				
<web-view src="https://www.meishahui.com/wap/index.html" bindmessage="h5PostMessage"></web-view>

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 6

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值