微信小程序web-view嵌套H5，小程序与H5通信

青青子衿越2025-08-27 18:22

小程序向H5发送信息：

小程序端代码：

webView /index.wxml

html 复制代码

 <web-view 
    key="{{webViewKey}}"  
    src="{{shoppingUrl}}" 
    bindload="onWebViewLoad"
    binderror="onWebViewError"
  />

javascript 复制代码

     that.setData({
            shoppingUrl:`http://192.168.18.72:3000/mobile/pages/order/paying?orderId=${options.id}&code=${res.code}`,
            
          })

H5接收：

javascript 复制代码

  onLoad(options) {
 if(options.code){
            console.log("微信小程序携带code跳转过来的",options.code);
                 orderId= options.orderId;
                 codeWx= options.code;
          
        }

}

H5向小程序发送信息：

H5 /pages/order/paying

javascript 复制代码

需要先引入wxSDK
	import wx from 'weixin-js-sdk';

 

wx.miniProgram.navigateTo({
                                  url:"/pages/webView/index?params="+encodeURIComponent(params1) 
                                })

微信小程序接收：

javascript 复制代码

 onLoad(options:any) {
if(options.params){
      let params1=decodeURIComponent(options.params)
     let params=JSON.parse(params1)
      that.setData({
        params:params
      })
    }

}

以上基本传递信息结束！！

如果小程序接收到H5信息之后想要跳转H5的另外一个页面，那就需要改变web-view的src,当直接赋值发现H5并没有跳转成功，所以需要加 key="{{webViewKey}}" ，改变webViewKey之后，H5可以重新渲染
代码展示：

html 复制代码

 <web-view 
    key="{{webViewKey}}"  
    src="{{shoppingUrl}}" 
    bindload="onWebViewLoad"
    binderror="onWebViewError"
  />

javascript 复制代码

 this.setData({
        shoppingUrl:`http://192.168.18.72:3000/mobile/pages/order/pay?orderId=${payInfo.orderId}&wxpay=1`,
        
      })
      this.setData({ webViewKey: this.data.webViewKey + 1 });