安卓+html+css+js 填坑之路

安卓+html+css+js
其实就是使用webview 作为中间件 完成html 和安卓的附合
webview如何设置等 就不再赘述 分享我在当中遇到的一些问题

1.html 放的位置

andoridstudio没有给这个文件夹 放在src/main/assets 需要自己创建 assets文件夹

2.如何调用html 以及一些静态资源

        <link href="file:///android_asset/css/bootstrap.min.css" rel="stylesheet" media="screen"/>
        <link href="file:///android_asset/css/main.css" rel="stylesheet" media="screen"/>
        <script src="file:///android_asset/js/jquery.min.js"></script>
        <script src="file:///android_asset/js/bootstrap.min.js"></script>

         webview.loadUrl("file:///android_asset/html/main.html");

3.js 的最基本的 alert 为什么不出现弹窗

  1） activty.java中设置支持js

         webview.getSettings().setJavaScriptEnabled(true);

2）设置js可以打开窗口

 webview.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
        webview.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
                AlertDialog.Builder b2 = new AlertDialog.Builder(MainActivity.this)
                        .setTitle("提示").setMessage(message)
                        .setPositiveButton("ok", new AlertDialog.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                // TODO Auto-generated method stub
                                result.confirm();
                            }
                        });

                b2.setCancelable(false);
                b2.create();
                b2.show();
                return true;
            }
            @Override
            public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
                // TODO Auto-generated method stub
                return super.onJsConfirm(view, url, message, result);
            }
            @Override
            public boolean onJsPrompt(WebView view, String url, String message, String defaultValue,
                                      JsPromptResult result) {
                // TODO Auto-generated method stub
                return super.onJsPrompt(view, url, message, defaultValue, result);
            }
        });
    }

4.js如何从后台取数据

先看java部分 通过 addJavascriptInterface 将自定义的类，和自定义的名称形成映射

webview.addJavascriptInterface(new PayJavaScriptInterface(){}, "demo");

实现类 注意使用 @JavascriptInterface 注解

class PayJavaScriptInterface {
    PayJavaScriptInterface() {
    }
    @JavascriptInterface
    public String getUserinfo()  {
        return "getUserinfo";
    }


    @JavascriptInterface
    public boolean needLogin()  {
        return true;
    }
    }

js页面的调用

    <script>
      $(document).ready(function(){
        var tt=window.demo.getUserinfo();
        alert(tt);
       });
    </script>

5. 后端java如何将一个数组传给js

如果想要直接传，肯定是做不到了
java 和 js 之间的数据交换仅限于几种基本类型 比如int String 等等
但是如果我有数组怎么传呢
可以把数组转化成 json 字符串 然后传过去

   import org.json.JSONArray;
   import org.json.JSONException;


    @JavascriptInterface
    public String data()  {
        String []m=new String [30];
        for(int i=0;i<30;i++){
            m[i]="t"+i;
        }
        try{
            JSONArray jsonArray=new JSONArray(m);
               return  jsonArray.toString();
        } catch (JSONException e) {
            e.printStackTrace();
            }
         return null;
      }

然后再用 js 把 json 字符串转成 json 数组

  <script>
     $(document).ready(function(){
        let tt=window.demo.data();
        let data = JSON.parse(tt);
        for(let i=0;i<10;i++){
            alert(data[i]);
        }
    </script>