前端与安卓和ios交互

最新推荐文章于 2023-03-30 13:50:35 发布

初来乍到到

最新推荐文章于 2023-03-30 13:50:35 发布

阅读量626

点赞数

分类专栏： HTML 开发中遇到的问题

本文链接：https://blog.csdn.net/weixin_43868692/article/details/107832517

版权

HTML 同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

开发中遇到的问题

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>h5与安卓和ios交互传参测试例子</title>
    <style>
        .btn {
            border: 0;
            background: #00adff;
            color: #fff;
            height: 30px;
            line-height: 30px;
            border-radius: 5px;
            width: 85px;
        }
    </style>
</head>

<body>
    <!-- btn();里面的参数为要传递的参数 -->
    <!-- onclick="btn"为点击事件 -->
    <button onclick="btn('1','2')" class="btn">
        点击传参
    </button>
    <script>

        // 与安卓和ios配合传参 
        var ua = navigator.userAgent;
        //在js里面来进行接受参数，参数名可以随意定义但是接受的参数要和传递的参数顺序一样
        function btn(id, number) {
            console.log(id, number)
            if (isIOS()) {
                var iosMsg = "id=" + id + "&num=" + number;
                window.webkit.messageHandlers.testOnClick.postMessage(iosMsg)
            } else if (isAndroid()) {
                //  调用安卓方法
                testOnClick.testClickBack(id, number)
            }
        }

        function isAndroid() {
            return ua.indexOf('Android') > -1;
        }

        function isIOS() {
            return /(iPhone|iPad|iPod)/i.test(ua);
        }

        // ios或者安卓来调用这个函数
        //params1 客户端传过来的参数params1
        function apph5_test(params1) {
            alert(params1)

            //如果需要给ios或者原生返回值的话

            //此处可以写自己处理的逻辑

            return 1
        }
        //params1，params2 客户端传过来的参数params1，params2传多个参数
        function apph5_test2(params1, params2) {
            alert(params1 + params2)
            //如果需要返回多个参数 接受用字符转凭借起来用变量的形式返回
            var params = params1 + params2

            //此处可以写自己处理的逻辑

            return params
            
        }

        //以上你们定义的名字一定要约定好
    </script>
</body>

</html>