uniapp uni.postMessage() 从嵌入html5返回小程序
时间: 2023-08-08 17:06:42 浏览: 50
在嵌入的 H5 页面中,可以使用 `uni.postMessage()` 向小程序发送消息,告诉小程序需要返回。具体使用方法如下:
1. 在 H5 页面中,使用 `uni.postMessage()` 向小程序发送消息。
```javascript
uni.postMessage({
type: 'back'
});
```
2. 在小程序中,监听 `onMessage` 事件,当收到 H5 页面发送的返回消息时,调用 `uni.navigateBackMiniProgram()` 方法返回小程序。
```javascript
// 监听 onMessage 事件
uni.onMessage(function (message) {
if (message.type === 'back') {
// 返回小程序
uni.navigateBackMiniProgram({
success: function () {
console.log('navigateBackMiniProgram success');
},
fail: function () {
console.log('navigateBackMiniProgram fail');
}
});
}
});
```
需要注意的是,`uni.navigateBackMiniProgram()` 方法只能在小程序中使用,不能在嵌入的 H5 页面中使用。
相关问题
uni.navigateBack 嵌入html5 返回小程序
如果你是在小程序中嵌入了一个H5页面,并且需要在H5页面中触发uni.navigateBack返回小程序页面,可以使用前端与小程序之间的通信来实现。
具体实现方法如下:
1. 在小程序中使用Uni-app提供的createWebViewJavascriptBridge方法,创建一个WebViewJavascriptBridge对象,并在回调函数中定义一个名为uniNavigateBack的方法。代码如下:
```javascript
if (window.WebViewJavascriptBridge) {
window.WebViewJavascriptBridge.init(function (message, responseCallback) {
console.log('Received message:', message)
responseCallback('Got it!')
})
window.WebViewJavascriptBridge.registerHandler('uniNavigateBack', function (data, responseCallback) {
uni.navigateBack({
delta: 1
})
responseCallback('success')
})
}
```
2. 在H5页面中,通过WebViewJavascriptBridge对象调用uniNavigateBack方法,即可触发uni.navigateBack返回小程序页面。代码如下:
```javascript
document.getElementById('back-btn').addEventListener('click', function () {
if (window.WebViewJavascriptBridge) {
window.WebViewJavascriptBridge.callHandler('uniNavigateBack', null, function (response) {
console.log('JS got response', response)
})
}
})
```
需要注意的是,在H5页面中需要引入WebViewJavascriptBridge.js文件,并在文件加载完成后才能调用WebViewJavascriptBridge对象。此外,使用该方法需要保证小程序和H5页面的域名相同,否则会因为跨域问题导致通信失败。
uniapp 支持从嵌入的html5页面返回小程序吗
是的,UniApp 支持从嵌入的 H5 页面返回小程序。UniApp 中提供了 `navigateBackMiniProgram` 接口用于从嵌入的 H5 页面返回小程序。具体使用方法如下:
在嵌入的 H5 页面中,通过 `uni.postMessage()` 向小程序发送消息,告诉小程序需要返回。
在小程序中监听 `onMessage` 事件,当收到 H5 页面发送的返回消息时,调用 `uni.navigateBackMiniProgram()` 方法返回小程序。
需要注意的是,`uni.navigateBackMiniProgram()` 方法只能在小程序中使用,不能在嵌入的 H5 页面中使用。