uniapp-webviewuinapp-webview通讯-----笔记记录。兼容平台：微信小程序、快手、抖音、支付宝

小程序-webview

兼容平台：微信小程序、快手、抖音、支付宝、百度

uniapp官方资料：uniapp.dcloud.net.cn/component/w…

传递参数的方式：

以路由的方式拼到路径上

使用postMessage进行传值（postMessage字节跳动小程序不支持、H5 暂不支持）

选用方案：

1、微信、抖音、支付宝、百度可以使用reLaunch方案 2、快手:使用navigateBack作为返回，使用postMessage传递数据。

小程序代码示例

<template>
    <view class="view-wrapper">
        <web-view  
        :webview-styles="webviewStyles" 
        :src="`https://xx.xx.xx.com/xx/xx?fromRoute=${fromRoute}&tel=${tel}`"
        @message="getMessage"
        ></web-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                fromRoute:'',
                tel:'',
                webviewStyles: {
                    progress: {
                        color: '#FF3333'
                    },
                    width:'100%'
                }
            }
        },
        onLoad(options){
            this.fromRoute = options.fromRoute
            this.tel = options.tel
        },
        methods: {
            getMessage(val){
                // 传递数据到原页面，在原页面监听
                uni.$emit('dxAuction' , val.detail.data[0])
            },
        },

    }
</script>

<style scoped>
.view-wrapper {
    width: 100vw;
}
</style>

上面的src地址对应的html。下面外链的cdn可以拷贝放到自己公司的服务器上。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
    <script type="text/javascript" src="https://xx.xx.com/libs/jQuery/jquery-2.2.3.min.js"></script>
</head>

<body>
    <div id="dx" style="width: 100%;"></div>
    <script type="text/javascript">
        var userAgent = navigator.userAgent;
      if (userAgent.indexOf('AlipayClient') > -1) {
        // 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
        document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
      } else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
        // QQ 小程序
        document.write(
          '<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"></script>'
        );
      } else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
        // 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
        document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>');
      } else if (/toutiaomicroapp/i.test(userAgent)) {
        // 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。
        document.write(
          '<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"></script>');
      } else if (/swan/i.test(userAgent)) {
        // 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
        document.write(
          '<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"></script>'
        );
      } else if (/quickapp/i.test(userAgent)) {
        // quickapp
        document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"></script>');
      }
      if (!/toutiaomicroapp/i.test(userAgent)) {
        document.querySelector('.post-message-section').style.visibility = 'visible';
      }
        </script>
    <script type="text/javascript">
        function getUrlParam(name) {
            var search = window.location.search.replace(/&amp;/g, '&');
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
            var r = search.substr(1).match(reg);
            if (r !== null) return decodeURIComponent(r[2]);
            return '';
        };
        function sendMessage(params) {
            let fromRoute = getUrlParam('fromRoute')
            let isTabbar = getUrlParam('isTabbar')
            let url = `${fromRoute}?isVertify=true`
            if (fromRoute) {
                    if (isKS) {
                        ks.postMessage({
                            data: {
                                isVertify: true
                            }
                        });
                        ks.navigateBack()
                    } else {
                        uni.reLaunch({ url });
                    }
                } else {
                    uni.navigateBack({ delta: 1 });
                }
        }
        const o = navigator.userAgent || ""
        let isKS = /kwapp.*miniProgram/i.test(o)
        $(document).ready(function () {
            // 传递数据
            sendMessage()
        });


    </script>
</body>

</html>

附：

// 类型判断
let o = r.userAgent||""

isWx : /MicroMessenger.*miniProgram/i.test(o)

isAlipay: /Alipay.*MiniProgram/i.test(o)

isTt: /toutiaomicroapp/i.test(o)

isQq: /QQ.*miniProgram/i.test(o)

isBaidu:/swan//.test(o)||/^webswan-/.test(window.name)

isKs:/kwapp.*miniProgram/i.test(o)

isJd:/JD.*miniProgram/i.test(o)

H5兼容

场景：

ifream内部页面与外部通讯
H5环境中webview的页面通讯

解决方案：

window.postMessage，详细使用：developer.mozilla.org/zh-CN/docs/…

代码示例：

// 内部页面
window.postMessage(message, '*');
或
window.parent.postMessage

// 父页面
window.addEventListener('message', function (data) {
    // console.log(data)
});