关于 uni-app 使用 web-view 页面之间互相跳转、通信等问题的解决方案

hedeqiang

发布于 2019-12-17 21:51:44

11.2K0

发布于 2019-12-17 21:51:44

文章被收录于专栏：LaravelCodeLaravelCode

关于 uni-app 使用 web-view 页面之间互相跳转、通信等问题的解决方案

最近开发小程序的时候、需要嵌入一个第三方网站、并且和第三方网站有些交互。这个第三方页面本身就是一个 HTML 页面、想着把它给嵌入到 uni-app 中，结果没实现......（很多的 js 代码在小程序中不识别）。

最后采用 web-view 方式来跳转到第三方页面、这就触发了页面之间互相通信的问题

官方中有一篇文章详细介绍了在 web-view 加载的本地及远程 HTML 中调用 uni 的API及网页和 vue 页面是如何通讯的方法、但是似乎是 H5 向 uni-app 进行发送数据、并没有介绍 uni-app 如何发送数据到 H5,

那么 uni-app 如何发送数据到 H5？其实很接单、在 web-view 中只需要通过 URL 就可以向 H5 进行传参例如在 uni-app 中：

<template>
    <view>
        <web-view :webview-styles="webviewStyles" :src="url" @message="getMessage"></web-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                webviewStyles: {
                    progress: {
                        color: '#FF3333'
                    }
                },
                url: 'https://youji.laravelcode.cn/map/index.html?data=' + '我是向H5发送的数据'

            }
        },
        onLoad(options) {
            if (options && options.url) {
                this.url = options.url;
            }
        },
        methods: {
        }
    }
</script>

那么在 H5 中是如何接收值得呢？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>uni-app-web-view</title>
</head>
<body>
<div class="btn-list">
    <button class="btn" type="button" data-action="navigateTo">navigateTo</button>
    <button class="btn" type="button" data-action="redirectTo">redirectTo</button>
    <button class="btn" type="button" data-action="navigateBack">navigateBack</button>
    <button class="btn" type="button" data-action="reLaunch">reLaunch</button>
    <button class="btn btn-red" type="button" data-action="switchTab">switchTab</button>
    <button class="btn btn-yellow" type="button" data-action="postMessage">postMessage</button>
    <button class="btn btn-yellow" type="button" data-action="getEnv">getEnv</button>
</div>
<!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件 -->
<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.0.1.52.js"></script>
<script type="text/javascript">
    document.addEventListener('UniAppJSBridgeReady', function() {
        document.querySelector('.btn-list').addEventListener('click', function(evt) {
            var target = evt.target;
            if (target.tagName === 'BUTTON') {
                var action = target.getAttribute('data-action');
                switch (action) {
                    case 'switchTab':
                        uni.switchTab({
                            url: '/pages/index/index'
                        });
                        break;
                    case 'navigateBack':
                        uni.navigateBack({
                            delta: 1
                        });
                        break;
                    case 'postMessage':
                        uni.postMessage({
                            data: {
                                action: getQuery('data'),
                            }
                        });
                        break;
                    case 'getEnv':
                        uni.getEnv(function(res) {
                            alert('当前环境：' + JSON.stringify(res));
                        });
                        break;
                    default:
                        uni[action]({
                            url: '/pages/editImg/editImg'
                        });
                        break;
                }
            }
        });
    });

console.log(getQuery('data'));  //获取 uni-app 传来的值

function getQuery(name) {
    // 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
    let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    let r = window.location.search.substr(1).match(reg);
    if(r != null) {
        // 对参数值进行解码
        return unescape(r[2]);
    }
    return null;
}
</script>
</body>
</html>