移动端混合开发（1）：和H5的javascript交互

最新推荐文章于 2023-05-28 01:34:28 发布

拿铁先生

最新推荐文章于 2023-05-28 01:34:28 发布

阅读量4.3k

点赞数

分类专栏：混合开发文章标签：移动 ios android javascript 混合开发

本文链接：https://blog.youkuaiyun.com/zhoujabcd/article/details/78434051

版权

本文详细介绍如何在iOS和Android中实现与JavaScript的交互。通过具体示例讲解了如何使用WKWebView和WebView来注入JavaScript方法并接收回调，适用于移动端混合开发场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近公司项目开发中涉及到了大量的混合开发，这里开一个系列，把开发中的经验和遇到的问题和大家分享下

讲到移动端的混合开发，绕不开的一个话题就是原生和Js的交互，关于iOS、Android怎么和js交互，网上的资料很多，这里先简单介绍几个方法。

js部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <script>
            function iOSShowDialog()
            {
    
                alert("iOS btn");

                //showDialog 为iOS内定义好的方法

                var params = {
   "title":"js 调用 iOS", "type":0, "callBack":"nativeCallBack"};

                var paramsStr = JSON.stringify(params);

                alert("iOS params:" + paramsStr);

                window.webkit.messageHandlers.showDialog.postMessage(paramsStr);
            }

            function androidShowDialog()
            {
    
                alert("Android btn");

                var params = {
   "title":"js 调用 Android", "type":1, "callBack":"nativeCallBack"};

                var paramsStr = JSON.stringify(params);

                alert("iOS params:" + paramsStr);

                androidProxy.showDialog(paramsStr);
            }

            function nativeCallBack(paramsStr)
            {
    
//              var str:String = paramsStr;

                var params = JSON.parse(paramsStr);

                document.getElementById("info").innerHTML = params.message;
            }
        </script>

    <body>
        <body>
        <div>
            <button id="iOSBtn" onclick="iOSShowDialog()">click me call iOS show dialog</button>

最低0.47元/天解锁文章