android和js结合-初见

最新推荐文章于 2021-05-27 18:55:40 发布

BunnyCoffer

最新推荐文章于 2021-05-27 18:55:40 发布

阅读量272

点赞数

分类专栏： android

本文链接：https://blog.csdn.net/BunnyCoffer/article/details/79729740

版权

android 专栏收录该内容

131 篇文章 1 订阅

订阅专栏

重点：
1）android怎么调用前端js代码？
2）js怎么调用android端代码？

第一部分：android调用前端js代码

业务逻辑：当android点击按钮后，h5页面的内容从“你好”改为“欢迎你”。

首先我们需要一个html文件，将其放到assets文件夹下

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
        <script type="text/javascript">
            function androidCallJs(){
                document.getElementById("content").innerHTML = "欢迎你";
            }
        </script>
    </head>

    <body>
        <div id="content">你好</div>
    </body>
</html>

然后android端的代码如下：

public class MainActivity extends AppCompatActivity {

    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.webView);
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true); //设置与js的交换权限
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //允许js的弹出框

        mWebView.loadUrl("file:///android_asset/JavaScript.html"); //html存放路径

        this.findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //此处为调用js的函数
                mWebView.loadUrl("javascript:androidCallJs()");
            }
        });
    }
}

第二部分:js调用android端代码

业务逻辑：当前端js点击按钮后，android端提示toast

h5代码：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=gb2312">   
    </head>
    <body>
        <input type="button" value="点击调用java代码" οnclick="window.obj.showByJs('我被js调用了!')"/><br/>
    </body>
</html>

android端代码如下：

public class MainActivity extends AppCompatActivity {

    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.webView);
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true); //设置与js的交换权限
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //允许js的弹出框

        mWebView.loadUrl("file:///android_asset/JavaScript.html");

        //此处的obj就是h5中的obj
        mWebView.addJavascriptInterface(this, "obj");
    }

    @JavascriptInterface
    public void showByJs(String arg) {
        Toast.makeText(this, arg, Toast.LENGTH_SHORT).show();
    }
}

同时也可以这样使用addJavascriptInterface()方法：

mWebView.addJavascriptInterface(new Object(){

    @JavascriptInterface
    public void paizhao(){
        Toast.makeText(getApplicationContext(), "sefe", Toast.LENGTH_SHORT).show();
        Intent openCameraIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
        startActivityForResult(openCameraIntent,1);
    }
},"shangyukeji");

完毕！

总结：

1）如果想要android调用js的代码，就要使用loadUrl("javascript: js方法函数名")

2）如果想要js调用android代码，就要先使用：

addJavascriptInterface(this,"love")设置，此处的love非常重要是，在js中要使用。

然后对需要被js调用的方法添加注解 @JavascriptInterface

BunnyCoffer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
android和js结合-初见

重点：1）android怎么调用前端js代码？2）js怎么调用android端代码？第一部分：android调用前端js代码业务逻辑：当android点击按钮后，h5页面的内容从“你好”改为“欢迎你”。首先我们需要一个html文件，将其放到assets文件夹下&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Typ...
复制链接

扫一扫