android混合开发，webview的java与js互操作

android原生应用，用webview加载应用中的网页，并且java代码与js代码可以互相操作。

这是混合开发的基石，最基本也最重要的东西，实验代码在这里。

概括说说——

java调js：调用webView.load("javascript:someFunction()");

这样可以调用webView里页面上的全局方法。这不是什么新鲜东西，你在网页中也可以这么做，试试在浏览器地址栏输入javascript:alert("427studio");也可以在浏览器地址栏里调用全局方法。

js调java：调用webView.addJavascriptInterface(somePOJO, "varName");

让一个java对象成为webview里面网页的window对象的varName属性，就好像执行了window.varName = somePOJO一样，因为window是全局上下文，js即可以用访问全局变量的方式访问这个java对象了，然后调用这个对象的函数即可，如果somePOJO这个对象有个public void doIt()方法，则可以这样调用它：someButton.onclick=function(){varName.doIt();}

具体的代码：看这里和这里，都非常基本，简要列出如下：

1.activity，调js方法那里手痒痒抽了个方法，图简单直接拼"javascript:jsDoIt(‘" + xx + "‘);"也没啥。

对了，loadUrl时，加载安卓程序assets包里的资源，以file:///android_asset/开头，如file:///android_asset/index.html表示要加载assets包里的index.html文件。

package com.example.testhybrid;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.Fragment;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;

public class MainActivity extends Activity {

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

? ? ? ? if (savedInstanceState == null) {
? ? ? ? ? ? getFragmentManager().beginTransaction()
? ? ? ? ? ? ? ? ? ? .add(R.id.container, new PlaceholderFragment())
? ? ? ? ? ? ? ? ? ? .commit();
? ? ? ? }
? ? }
}

class PlaceholderFragment extends Fragment {

?? ?WebView webView;
?? ?
? ? public PlaceholderFragment() {
? ? }

? ? @SuppressLint("SetJavaScriptEnabled") @Override
? ? public View onCreateView(LayoutInflater inflater, ViewGroup container,
? ? ? ? ? ? Bundle savedInstanceState) {
? ? ? ? View rootView = inflater.inflate(R.layout.fragment_main, container, false);
? ? ? ??
? ? ? ? webView = (WebView)rootView.findViewById(R.id.webView1);

? ? ? ? webView.getSettings().setJavaScriptEnabled(true);
? ? ? ??
? ? ? ? Handler handler = new Handler(){
? ? ? ? ?? ?@Override
? ? ? ? ?? ?public void handleMessage(Message msg) {
? ? ? ? ?? ??? ?String str = msg.getData().getString("str");
? ? ? ? ?? ??? ?doJs("jsDoIt", str.replaceAll("\\d", ""));
? ? ? ? ?? ?}
? ? ? ? };
? ? ? ??webView.addJavascriptInterface(new MyJavascriptInterface(webView, handler), "javaObject");
? ? ? ??
? ? ? ? webView.loadUrl("file:///android_asset/webviews/index.html");
? ? ? ??
? ? ? ? return rootView;
? ? }
? ??
? ??//调用js方法，第一个参数是js方法名，后面的参数是js方法的参数列表
? ? void doJs(String function, Object... params){
? ? ?? ?StringBuilder result = new StringBuilder();
? ? ?? ?result.append("javascript:").append(function).append("(");
? ? ?? ?for(int i = 0; i < params.length; i++){
? ? ?? ??? ?result.append("‘").append(params[i].toString()).append("‘");
? ? ?? ??? ?if(i < params.length - 1){
? ? ?? ??? ??? ?result.append(",");
? ? ?? ??? ?}
? ? ?? ?}
? ? ?? ?result.append(")");
? ? ?? ?String jsStr = result.toString();
? ? ?? ?webView.loadUrl(jsStr);
? ? }
}

//要用来被js调用的java对象
class MyJavascriptInterface{
?? ?
?? ?MyJavascriptInterface(WebView wv, Handler h){
?? ??? ?this.theWebView = wv;
?? ??? ?this.handler = h;
?? ?}
?? ?
?? ?WebView theWebView;
?? ?Handler handler;
?? ?
?? ?//要用来被js调用的java方法
?? ?@JavascriptInterface
?? ?public void javaDoIt(final String str){
?? ??? ?Message msg = new Message();
?? ??? ?Bundle bundle = new Bundle();
?? ??? ?bundle.putString("str", str);
?? ??? ?msg.setData(bundle);
?? ??? ?handler.sendMessage(msg);
?? ?}

}

网页结构不赘，javascript代码：

//html按钮点击触发
function theBtnOnClicked(){
????//调用java方法
?? ?javaObject.javaDoIt("427studio");
}

//要用来被java程序调用的js方法
function jsDoIt(str){
?? ?document.getElementById(‘theBtn‘).innerText += str;
}