Android与JavaScript交互初览

Android与JavaScript交互初览

背景

年后换了工作，第一个接手的项目需要Android层与WebView的JavaScript交互

必备小知识

• JavaScript代码区分大小写，多余的空格会被忽略
• JavaScript的变量申明关键字：var
• JavaScript数组的申明

    var cars = new Array();
    var cars = ["Audi","BMW","Volvo"];

• 外部js文件使用：

• Web浏览器在解析HTML文件时，自动执行其中的JavaScript脚本
• 网页被加载时，浏览器自动创建文档对象Document
• WebView注入Java对象，即通过WebView建立JavaScript和Android原生对象的绑定关系
• Android使用本地js文件的目录

    file:///android_assert/*.html
    file:///sdcard/*.html

主要类

• WebView：承载类
• JsIntergration:提供供Web前端的JavaSript调用

示例代码

• html代码

    js中调用本地方法
    
    
Click!!!!

• Android 代码

package com.example.jiaozi.androidjsdemo;

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;

import com.example.jiaozi.androidjsdemo.js.JSInteration;

public class MainActivity extends AppCompatActivity {

    private WebView mWebView;
    private Button mClickButton;

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

    private void initView() {

        mClickButton = (Button) findViewById(R.id.activity_main_btn);
        mClickButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mWebView.loadUrl("javascript:runFromJs()");
            }
        });

        mWebView = (WebView) findViewById(R.id.activity_main_webview);
        mWebView.setWebViewClient(new WebViewClient() {

        });
        mWebView.addJavascriptInterface(new JSInteration(), "myObject");
        mWebView.getSettings().setDefaultTextEncodingName("utf-8");
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.setBackgroundColor(Color.argb(0, 0, 0, 0));
        mWebView.loadUrl("file:///android_asset/jsTest.html");
    }

}

• Android布局