美文网首页
七、Android和H5的交互

七、Android和H5的交互

作者: 贵翼 | 来源:发表于2019-02-09 11:09 被阅读0次

    文件目录


    1.png

    一、Android与H5的交互

    JavaAndJavaScriptCall.html

    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <script type="text/javascript">
    
        function javaCallJs(){
             document.getElementById("content").innerHTML +=   
                 "<br\>java调用了js无参函数";
        }
        
        function javaCallJs(arg){
             document.getElementById("content").innerHTML =
                 ("欢迎:"+arg );
        }
        </script>
    
    </head>
    
    
    <body>
    
    
    <div align="right">这是H5页面</div>
    
    <p><img src="http://192.168.1.3:8080/test/tongliya.png"></p>
    
    <input type="button" value="点击调用Java代码" onclick="window.Android.showToast()"/>
    
    </body>
    
    </html>
    

    AndroidAndJsCallActivity.java

    public class AndroidAndJsCallActivity extends Activity implements View.OnClickListener {
    
        private EditText etNumber;
        private EditText etPassword;
        private Button btnLogin;
        private WebView webView;
    
        /**
         * Find the Views in the layout<br />
         * <br />
         * Auto-created on 2019-02-08 15:24:01 by Android Layout Finder
         * (http://www.buzzingandroid.com/tools/android-layout-finder)
         */
        private void findViews() {
            setContentView(R.layout.activity_android_and_js_call);
            etNumber = (EditText) findViewById(R.id.et_number);
            etPassword = (EditText) findViewById(R.id.et_password);
            btnLogin = (Button) findViewById(R.id.btn_login);
    
            btnLogin.setOnClickListener(this);
        }
    
        /**
         * Handle button click events<br />
         * <br />
         * Auto-created on 2019-02-08 15:24:01 by Android Layout Finder
         * (http://www.buzzingandroid.com/tools/android-layout-finder)
         */
        @Override
        public void onClick(View v) {
            if (v == btnLogin) {
                // Handle clicks for btnLogin
                login();
            }
        }
    
        private void login() {
            String account = etNumber.getText().toString().trim();
            String password = etPassword.getText().toString().trim();
    
            if (TextUtils.isEmpty(account) || TextUtils.isEmpty(password)) {
                Toast.makeText(this, "账号或密码不能为空", Toast.LENGTH_SHORT).show();
            } else {
                Toast.makeText(this, "登录", Toast.LENGTH_SHORT).show();
    
                login(account);//加载h5页面
            }
        }
    
        private void login(String account) {
            //java调用h5
            webView.loadUrl("javascript:javaCallJs(" + "'" + account + "'" + ")");
            setContentView(webView);
    
        }
    
        private void initWebview() {
            webView = new WebView(this);
            WebSettings settings = webView.getSettings();
            //设置支持js
            settings.setJavaScriptEnabled(true);
    
            //不调用系统浏览器
            webView.setWebViewClient(new WebViewClient());
    
            //webView.loadUrl("https://www.baidu.com/");
            //加载本地js
            webView.loadUrl("file:///android_asset/JavaAndJavaScriptCall.html");
    
            //设置支持js调用java
            webView.addJavascriptInterface(new JavaScriptInterface(), "Android");
    
        }
    
        class JavaScriptInterface {
            @JavascriptInterface
            public void showToast() {
                Toast.makeText(AndroidAndJsCallActivity.this, "我是Java代码", Toast.LENGTH_SHORT).show();
            }
    
        }
    
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
    
            findViews();
            initWebview();
        }
    }
    

    activity_android_and_js_call.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@android:color/holo_blue_light"
            android:gravity="center">
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="登录页面"
                android:textColor="@android:color/black"
                android:textSize="20sp" />
    
        </LinearLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="10dp">
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/bg_shap"
                android:orientation="vertical"
                android:padding="5dp">
    
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="账号:"
                    android:textColor="#000000" />
    
                <EditText
                    android:id="@+id/et_number"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="请输入账号..."
                    android:textColor="#000000" />
    
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="密码:"
                    android:textColor="#000000" />
    
                <EditText
                    android:id="@+id/et_password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="请输入密码..."
                    android:password="true"
                    android:textColor="#000000" />
    
                <Button
                    android:id="@+id/btn_login"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="登录"
                    android:textColor="#000000"
                    android:textSize="25sp" />
    
            </LinearLayout>
        </LinearLayout>
    
    </LinearLayout>
    

    在H5页面调用Android播放视频

    链接:https://pan.baidu.com/s/1sHQCTOSzKacMNRtNCJXXLA
    提取码:5c49
    html所需要的资源文件
    H5CallJavaVedioActivity .java

    public class H5CallJavaVedioActivity extends Activity {
    
        private WebView webview;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_h5_call_java_vedio);
    
            webview = (WebView) findViewById(R.id.webview);
    
            initWebview();
    
    
        }
    
        private void initWebview() {
            WebSettings settings = webview.getSettings();
            //设置支持js
            settings.setJavaScriptEnabled(true);
    
            //不调用浏览器
            webview.setWebViewClient(new WebViewClient());
    
            //webView.loadUrl("https://www.baidu.com/");
            //加载本地js
            webview.loadUrl("file:///android_asset/RealNetJSCallJavaActivity.htm");
    
            //设置支持js调用java
            webview.addJavascriptInterface(new JavaScriptInterface(), "android");
    
        }
    
        class JavaScriptInterface {
            @JavascriptInterface
            public void playVideo(String id, String url, String title) {
                //调起系统所有播放器
                Intent intent = new Intent();
                intent.setDataAndType(Uri.parse(url), "video/*");
                startActivity(intent);
    
            }
    
        }
    }
    

    activity_h5_call_java_vedio.xml

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <WebView
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    
    </RelativeLayout>
    
    

    相关文章

      网友评论

          本文标题:七、Android和H5的交互

          本文链接:https://www.haomeiwen.com/subject/mamasqtx.html