小程序webview嵌入H5 如何互動調用小程序的方法
在微信小程序中嵌入H5頁面，并通過H5頁面調用小程序的一些功能（如分享、獲取用戶信息等），可以通過幾種不同的方法來實現。下面是一些常用的方法：
1. 使用 web-view 組件
微信小程序提供了 web-view 組件，允許開發者在頁面中嵌入一個網頁。但是，出于安全和隱私的考慮，小程序對嵌入的網頁有較多的限制。例如，嵌入的網頁不能使用 JavaScript 直接調用小程序的 API。
步驟：
在小程序頁面中使用 web-view 組件：
<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調用是不可能的，但可以通過以下方式實現間接通信：
在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);
});
}
});
使用
navigateToMiniProgramAPI（反向調用）如果你的需求是讓H5頁面引導用戶跳轉到小程序，可以使用微信的
navigateToMiniProgramAPI：function navigateToMiniApp() {
wx.miniProgram.navigateTo({
url: '/path/to/page' // 小程序內的路徑，非外部URL。通常用于小程序內部的頁面跳轉。如果需要外部URL打開，請確保小程序配置了相應的白名單。
});
}
注意，這種方法主要用于從H5頁面跳轉到小程序頁面，而不直接用于在H5和已打開的小程序之間通信。對于直接的雙向通信，建議使用第一種或第二種方法。
