web-view实现网页html和uniapp之间的通信_HBuilderX教程

导读：使用web-view实现了加载html文件预览pdf文件的功能，但是在预览pdf文件的时候，可以点击返回按钮返回上一个页面，前提是在pdf文件的预览页面默认的顶部导航都去掉的情况下。

使用web-view实现了加载html文件预览pdf文件的功能，但是在预览pdf文件的时候，可以点击返回按钮返回上一个页面，前提是在pdf文件的预览页面默认的顶部导航都去掉的情况下。

解决方案：

一、引入依赖文件

在 web-view 加载的 HTML 中调用 uni 的 API，需要在 HTML 中引用必要的 JS-SDK

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>



<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>

注：

这些 JS 文件是在 web-view 加载的那个 HTML 文件中引用的，而不是 uni-app 项目中的文件。
如果不考虑微信小程序，则无需引入微信的 JS-SDK。
两个文件同时引入时，注意引入的顺序，微信的需要在前。

二、从 HTML 向应用发送消息，实现点击返回页面跳转

uni.postMessage 中的参数格式，必须是 data: {}。也就是说，传递的消息信息必须在 data 这个对象中。

<div class="back" id="pdfBack"><img src="../../../static/image/back_arrow.png"></div>

<script>

        document.addEventListener('UniAppJSBridgeReady', function() {

            console.log('UniAppJSBridgeReady');

            document.querySelector('#pdfBack').addEventListener('click', function(evt) {

                uni.postMessage({

                    data: {

                        action: 'back'

                    }

                });

            });

        });



</script>

注：

每次执行 postMessage 后，传递的消息会以数组的形式存放。因此，在 web-view 的 message 事件回调中，接收到的 event.detail.data 的值是一个数组。

三、在uniapp 中接受信息back

监听 web-view 的 message 事件，必须是@message，然后在事件回调的 event.detail.data 中接收传递过来的消息。

<template>

    <view>

        <web-view src="http://www.yourdomain.com/test.html" @message="handleMessage"></web-view>

    </view>

</template>

<script>

    export default {

        methods: {

            handleMessage(evt) {

                console.log('接收到的消息：' + JSON.stringify(evt.detail.data));

　　　　　　　　　 uni.navigateBack();

            }

        }

    }

</script>

全站搜索

web-view实现网页html和uniapp之间的通信

最新推荐

本周排行