混合APP开发的套路(三): android和javascript初步交互

最新推荐文章于 2018-07-29 19:16:06 发布

学习笔记666

最新推荐文章于 2018-07-29 19:16:06 发布

阅读量550

点赞数 1

分类专栏： Android开发基础

本文链接：https://blog.csdn.net/github_26672553/article/details/68944631

版权

Android开发基础专栏收录该内容

30 篇文章 2 订阅

订阅专栏

我们测试方便，我们利用布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="测试文本"
        android:id="@+id/wvText"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="调用javscript"
        android:id="@+id/wvBtn"/>
    <WebView
        android:layout_width="match_parent"
        android:layout_height="227dp"
        android:layout_weight="0.27"
        android:id="@+id/webView"/>
</LinearLayout>

我们会吧本地index.html文件加载到WebView 控件中，然后点击Button 控件，执行一段javascsript脚本（一个js方法）.

index.html内容如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>this is title</title>
        <script>
            function show(){
                document.getElementById("txtMsg").value = "hello javascript";
            }
        </script>
    </head>
    <body>
        <input type="text" id="txtMsg">
    </body>
</html>

show() 方法实现了，把hello javascript 写入到input文本框。
我们要在安卓里来调用这个show() 方法。

Activity里：

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.setContentView(R.layout.webview); // 设置layout

        // 获取webView组件
        final WebView webView = (WebView)findViewById(R.id.webView);

        // 拿到webView的设置对象
        WebSettings settings = webView.getSettings();
        settings.setAppCacheEnabled(true); // 开启缓存
        settings.setJavaScriptEnabled(true); // 开启javascript支持

        // 加载文件到webView
        AssetManager assetManager = this.getAssets();
        try {
            InputStream inputStream = assetManager.open("index.html");
            byte[] buffer = new byte[inputStream.available()];
            inputStream.read(buffer);
            // 读取html内容
            String htmlContent = new String(buffer,"utf-8");
            inputStream.close();

            // 加载到webView中
            webView.loadData(htmlContent,"text/html","utf-8");
        } catch (IOException e) {
            e.printStackTrace();
        }

        // 找到界面上的按钮
        Button btn = (Button)findViewById(R.id.wvBtn);
        // 给按钮绑定事件
        btn.setOnClickListener(new View.OnClickListener(){

            @Override
            public void onClick(View view) {
                webView.loadUrl("javascript:show()");
            }
        });
    }

这里写图片描述

学习笔记666

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
混合APP开发的套路(三): android和javascript初步交互

我们测试方便，我们利用布局<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" a
复制链接

扫一扫

专栏目录