微信小程序与网页h5的参数传递

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

web-view

一、小程序===》h5传递参数

　　1、传递参数

<!-- wxml -->
<web-view src="https://xxx.com/test.html？></web-view>

　　2、接收参数

<!-- h5 网页 a.html-->
<script>
    let id = getUrlParam(\'id\'); 
</script>

二、h5==》小程序传递信息

　　1、传参数

<!-- h5端 HTML和JS  自动传值 -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>  
    wx.miniProgram.getEnv(function(res) {
        if (res.miniprogram) {
            wx.miniProgram.postMessage({
                data: {
                    title: \'分享标题\',
                    imgUrl: \'share.png\',
                    link: \'share.html?share
                }
            });
        }
    });
// wx.miniProgram.navigateBack({delta: 1})
</script>

2、接收参数：在特定时机触发（如小程序后退、组件销毁、分享时）接收

// 小程序端 wxml
<web-view src="{{url}}"  bindmessage="handlePostMessage"></web-view>

//小程序端js
const app = getApp()
Page({
    data: {
        url: \'\',
    },
    onLoad: function(options) {

    },
    // 获取h5传递消息  右上角分享/小程序后退/组件销毁时自动触发
    handlePostMessage: function(e) {
        console.log(e.detail.data);
        let data = e.detail.data[e.detail.data.length - 1];
        ...///使用数据
    }
})