uniapp实现小程序和内嵌webView的互通

webView传递消息到小程序

1、首先在自己的vue H5项目中添加shops.html

不管是不是uni 的H5，都需要引入这个uni 的sdk

var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))document.write('')var userAgent = navigator.userAgent;if (userAgent.indexOf('AlipayClient') > -1) {// 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。document.writeln('' + '');}// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。document.addEventListener('UniAppJSBridgeReady', function() {uni.webView.getEnv(function(res) {console.log('当前环境：' + JSON.stringify(res));});});

2、在manifest.json中打开Web配置，添加shops.html在index.html模板路径中

修改了默认模版，需要重新跑一下项目，跑完之后若log出当前环境，则说明uni引入成功

3、在H5中需要向小程序传递消息的地方添加方法（以支付宝小程序为例）

if ((navigator.userAgent.toLowerCase().indexOf('alipayclient') > -1) && (navigator.userAgent.toLowerCase().indexOf('miniprogram') > -1) ) {    // 网页向小程序发送消息uni.webView.postMessage({    data: {        action: '传递的消息',    },})}

4、传递完消息，就需要在小程序中去接收消息了

在uniapp小程序代码中添加：在webView页面we-view 中添加 @message="message"，在methods中添加方法：message方法，参考示例：

export default {data() {return {url: '这个是你上面的那个H5的url'}},methods: {message(e) {this.$utils.toastDebug("进入了message" + e.detail.data)}}}

到这里，H5向小程序传递消息的逻辑就完成了

小程序向H5传递参数

直接在url链接后面写上参数，例如：https://baidu.com?test=valueTest，在H5页面的onLoad方法中获取传递的参数， 这种方式就不多说了，人人都会（无基础的可以自行查找）