uni-app 使用 web-view 页面之间互相跳转、通信

最近开发小程序的时候、需要嵌入一个第三方网站、并且和第三方网站有些交互。这个第三方页面本身就是一个 HTML 页面、想着把它给嵌入到 uni-app 中，结果没实现…（很多的 js 代码在小程序中不识别）。最后采用 web-view 方式来跳转到第三方页面、这就触发了页面之间互相通信的问题官方中有一篇文章 https://ask.dcloud.net.cn/article/35083详细介绍了在

向前有光

4584人浏览 · 2020-10-13 15:55:21

向前有光 · 2020-10-13 15:55:21 发布

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

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

官方中有一篇文章 https://ask.dcloud.net.cn/article/35083 详细介绍了在 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>

以上 Html 文件包含页面跳转、接收 uni-app 的传值、以及发送数据到 uni-app

关于 web-view 如何使用就不过多介绍了、官网文章很详细
http://ask.dcloud.net.cn/article/35083
https://uniapp.dcloud.io/component/web-view

转载：https://cloud.tencent.com/developer/article/1555077

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^