小程序webview嵌入H5 如何互动调用小程序的方法

在微信小程序中嵌入H5页面，并通过H5页面调用小程序的一些功能（如分享、获取用户信息等），可以通过几种不同的方法来实现。下面是一些常用的方法：

1. 使用 web-view 组件

微信小程序提供了 web-view 组件，允许开发者在页面中嵌入一个网页。但是，出于安全和隐私的考虑，小程序对嵌入的网页有较多的限制。例如，嵌入的网页不能使用 JavaScript 直接调用小程序的 API。

步骤：

在小程序页面中使用 web-view 组件：

1. <web-view src="https://example.com/page.html"></web-view>

   2、在H5页面中通过URL参数传递信息：

   你可以在H5页面加载时，通过URL参数传递需要的信息给小程序。例如：

    <script>

     function getQueryString(name) {

       var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

       var r = window.location.search.substr(1).match(reg);

       if (r != null) return unescape(r[2]); return null;

     }

     var appId = getQueryString('appId');

     console.log('appId:', appId);

   </script>

   
   

   在小程序端监听并处理来自H5页面的信息：

   在小程序中使用 onMessage 方法监听来自 web-view 的消息：

   Page({

     onLoad: function() {

       this.webviewContext = wx.createWebviewContext('yourWebviewId');

       this.webviewContext.onMessage((data) => {

         console.log('Received message:', data.data);

       });

     },

     postMessageToWebView: function(message) {

       this.webviewContext.postMessage({ data: message });

     }

   });

   
   

   2. 使用 postMessage 通信

   虽然直接在H5和微信小程序之间通过JavaScript进行API调用是不可能的，但可以通过以下方式实现间接通信：

   1. 在H5页面中发送消息到小程序：

      function sendMessageToMiniProgram(message) {

        if (window.WeixinJSBridge) { // 在微信环境中使用JSBridge发送消息

          WeixinJSBridge.invoke('sendToMiniProgram', {

            success: function(res) {

              console.log('Message sent successfully');

            },

            fail: function(err) {

              console.log('Failed to send message', err);

            },

            data: message // 需要发送的数据，小程序端通过 onMessage 方法接收

          });

        } else {

          console.log('Not in WeChat environment');

        }

      }

      
      

      在小程序端接收消息：

      Page({

        onLoad: function() {

          wx.onMessage((message) => { // 监听来自H5页面的消息

            console.log('Received message from H5:', message);

          });

        }

      });

      
      

      使用 navigateToMiniProgram API（反向调用）

      如果你的需求是让H5页面引导用户跳转到小程序，可以使用微信的 navigateToMiniProgram API：

      function navigateToMiniApp() {

        wx.miniProgram.navigateTo({

          url: '/path/to/page' // 小程序内的路径，非外部URL。通常用于小程序内部的页面跳转。如果需要外部URL打开，请确保小程序配置了相应的白名单。

        });

      }

      
      
      注意，这种方法主要用于从H5页面跳转到小程序页面，而不直接用于在H5和已打开的小程序之间通信。对于直接的双向通信，建议使用第一种或第二种方法。