如何在Android开发中调用Html和JS 代码实现混合应用开发

Posted 2021-09-09 LanLan_Guo

现在移动端也是主要办公的手段之一，因此很多企业都期望在移动端，桌面端，服务端，都保持一致性，ActiveReportsJS是一款前端的Web 开发工具，助力开发前后端分离应用。所以如果要在手机端开发混合应用，也可以将ActiveReportsJS 集成进去。

本篇教程，主要来分享如何在android app 开发中调用包含 ActiveReportJS 的html页面。

实现思路：

1. 创建 Android App 使用WebView控件来调用HTML 代码， WebView是一个基于webkit引擎、展现web页面的控件。
2. 在Android项目下创建asset文件将html页面及需要的js文件拷贝到当前目录。
3. 设置 Android权限，并设置可执行js代码

具体实现：

1. 下载Androird Studio ，新建空白的Android应用
2. 添加 MainActivity 并添加 WebView 控件

 <WebView
        android:id="@+id/webView1"
        android:layout_
        android:layout_ />

3. 添加 Asset文件夹，并将js及html页面放到该路径下,注意asset是归属于Main还是Debug还是release的，影响后面路径写法

4. 修改AndroidManifest.xml 文件，增加权限

<uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

5. MainActivity 调用WebView.loadURL()，并调用javascript对应的方法
   注意路径写法：

mWebview.loadUrl("file:///android_asset/activejs/index.html");

      mWebview = (WebView) findViewById(R.id.webView1);
        mWebSettings = mWebview.getSettings();
        mWebSettings.setJavaScriptEnabled(true);
        mWebSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        mWebSettings.setAllowContentAccess(true);
        mWebSettings.setAppCacheEnabled(true);
        mWebSettings.setDomStorageEnabled(true);
        mWebSettings.setUseWideViewPort(true);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
            mWebSettings.setAllowFileAccessFromFileURLs(true);
            mWebSettings.setAllowUniversalAccessFromFileURLs(true);
        }



         mWebview.loadUrl("file:///android_asset/activejs/index.html");
        mWebview.post(new Runnable() {
            @Override
            public void run() {  // 注意调用的JS方法名要对应上
                // 调用javascript的callJS()方法
                mWebview.evaluateJavascript("javascript:load()", new ValueCallback<String>(){

                    @Override
                    public void onReceiveValue(String value) {

                    }
                });

            }
        });

       mWebview.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
                AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this);
                b.setTitle("Alert");
                b.setMessage(message);
                b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.confirm();
                    }
                });
                b.setCancelable(false);
                b.create().show();
                return true;
            }

        });