webview和小程序通信uniapp

需求:需要在小程序中嵌入一个网页webview,点击webview中的按钮时,需要返回到上一级页面并传参

html网页部分代码如下:

第一步,必须引入两个包,且微信sdk在上,uni的sdk在下,放在body下面

<!-- 微信 JS-SDK  -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

第二步,给按钮添加点击事件:

uni.postMessage是给小程序中webview页面绑定的@message事件发送数据的,且uni.postMessage只在特定时机触发[网页向应用 postMessage 时,会在特定时机(后退、组件销毁、分享)触发并收到消息。]

所以我在uni.postMessage后,立即后退(uni.navigateBack),可以成功触发uni.postMessage

<script>
    document.addEventListener("UniAppJSBridgeReady", function () {
        uni.postMessage({
            data: {
                isSucess: '1'
            }
        })
        $('#back').on('click', function (s) {
            uni.navigateBack()
        });
    })

</script>

以上,html网页代码已经准备好!如下是小程序的(uniapp)

在小程序里嵌入一个webview,这是微信小程序中的代码(uniapp写的)如下

第一步,需要先在webview中绑定网址,绑定message事件(到时候网页传参就用这个函数接收)

第二步,因为在网页中先触发了传参,然后立即就回到了上一个页面,所以如果我们需要在上个页面接收到参数,就必须要小程序的webview页面接收参数,然后通过页面栈修改上个页面的参数!

@message绑定的事件参数,在 e.detail.data中

getMessage(e) {
				console.log(e, '传递的参数h5')
				let pages = getCurrentPages()
				let prevPage = pages[pages.length - 2]
				prevPage.$vm.isSucess = e.detail.data[0].isSucess
			}

———————————————————————————————————————————

发现个bug,在iphone中可以实现,但在安卓机中返回不了上一级,现在修改如下:

 uni的sdk 需要放在本地中,网页需要布署到服务器中!

经测试,ios和安卓机都可完美实现需求

<!-- uni 的 SDK -->
<script type="text/javascript" src="./assets/uni.webview.1.5.2.js"></script>

### 如何在 UniApp 小程序中使用 WebView 组件 #### 使用 `WebView` 组件加载网页并进行通信UniApp 中,可以通过 `<web-view>` 组件来加载外部网页或者本地 HTML 文件。此组件允许开发者嵌入 Web 页面到小程序页面中,并提供了与 H5 页面之间互相调用的能力。 对于希望实现的小程序内嵌 webview 的互通功能,在满足双方均支持 postMessage 方法的基础上,需依照规定的数据交换格式来进行操作[^2]。具体来说: - **HTML 端** 可以利用 JavaScript 调用 window.postMessage() 函数向宿主环境传递消息; - **小程序侧** 则可通过监听 onMessage 事件接收到来自于 webview 内部发出的信息; 下面给出一段简单的代码片段用于展示如何设置上述机制以便完成两者间的通讯过程[^1]: ```html <!-- index.vue --> <template> <div class="content"> <!-- 其他UI布局... --> <!-- 加载目标URL至webview容器之中 --> <web-view :src="url"></web-view> <!-- ...其他UI元素 --> </div> </template> <script> export default { data(){ return{ url:'https://example.com' // 替换成实际要访问的网址链接 } }, methods:{ receiveMsg(e){ console.log('Received message from webview:', e.detail.data); } }, onLoad:function(options){ const that = this; uni.onMessage(function(res) {that.receiveMsg(res)}); } }; </script> ``` 值得注意的是,尽管存在通过 postMessage 实现即时互动的可能性,但在某些情况下可能会遇到局限性——比如仅能在特定时刻(如页面关闭前)成功触发回调函数[^3]。因此如果项目中有更复杂的需求,则可能需要探索诸如 WebSocket 这样的替代方案以达成更加稳定高效的跨平台交流效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值