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

版权声明：转载请注明出处 https://blog.csdn.net/le_17_4_6/article/details/86598772

小程序向web-view发送消息

在<web-view>组件中有一个属性src（src是webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。）

通过设置src中GET参数即可向网页传递参数：
<web-view src="https://mp.weixin.qq.com?name='name'&age=12"></web-view>

web-view怎么获取消息呢？
见代码：

$(function () {
		//添加一个获取参数的函数
		(function ($) {
		    $.getUrlParam = function (name) {
		        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
		        var r = window.location.search.substr(1).match(reg)
		        if (r != null) return unescape(r[2])
		        return null
		    }
		})(jQuery)
		//name 和 age即是微信小程序传递过来的参数
        var name = $.getUrlParam('name')
        var age = $.getUrlParam('age')
})

---

web-view向小程序发送消息

在html文件中引入微信小程序官方的js 接口：
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
js文件中：

//getEnv获取环境
wx.miniProgram.getEnv(function (res) { 
	if (res.miniprogram) { 
		//如果当前是小程序环境
		wx.miniProgram.postMessage({ 
			data:  { 
				name: 'name',
				age: 12
			}
		})
	} 
})

小程序怎么获取消息呢？
见代码：
1、在<web-view>组件中添加bindmessage（网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }）
<web-view src="{{url}}" bindmessage="deal_with_msg"></web-view>
2、在js文件中添加事件处理：

Page({ 
	deal_with_msg: function (e) { 
		var data = e.detail.data
		this.setData({ 
			name: data.name,
			age: data.age
		})
	}
})

---

这篇文章对您有帮助吗，点赞让博主知道…