微信小程序與網頁h5的參數傳遞

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

web-view

屬性	類型	默認值	必填	說明	最低版本
src	string		否	webview 指向網頁的鏈接。可打開關聯的公眾號的文章，其它網頁需登錄小程序管理后台配置業務域名。	1.6.4
bindmessage	eventhandler		否	網頁向小程序 postMessage 時，會在特定時機（小程序后退、組件銷毀、分享）觸發並收到消息。e.detail = { data }，data是多次 postMessage 的參數組成的數組	1.6.4

 

一、小程序===》h5傳遞參數

　　1、傳遞參數

<!-- wxml -->
<web-view src="https://xxx.com/test.html？id=123"></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?shareId=7&active=1'
                }
            });
        }
    });
// 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];
        ...///使用數據
    }
})