安卓+html 填坑之路

安卓+html
其实就是使用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>

6.侧滑翻页功能 js的touch事件一系列问题

我做的是个背单词app，想实现一个侧滑翻页功能，而且页面上还有一些按钮

1）.touch事件触发之后 按钮的触发功能就不再显示

原因：
单击时的触发顺序：touchstart -> touchmove -> touchend->click;
滑动时的触发顺序：touchstart -> touchmove -> touchmove -> … ->touchmove ->->touchend;

 $("body").on("touchstart", function(e) {
     　　e.preventDefault()；//组织浏览器默认事件；
    　　  });

e.preventDefault()；会屏蔽click事件 所以将其注释

2）.touchmove事件多次触发，使用的时候只需要触发一次就行

解决方法 ：增加开关变量

  $(document).ready(function(){
        var touched;//开关变量
         $("body").on("touchstart", function(e) {
            touched=0;			//打开开关
             e.stopPropagation()；
    　　   });

    　　 $("body").on("touchmove", function(e) {
                if(touched==0){
                    blank();		//执行函数
                    touched=1; }       //关闭开关
    　   });
       });