How to use HTML and JS code to achieve hybrid application development in Android development

Now the mobile terminal is also one of the main means of office, so many enterprises are expected to maintain consistency in the mobile terminal, desktop end, server end, ActiveReportsJS is a front-end Web development tool, facilitate the development of front-end separation of applications. So if you want to develop a hybrid application on the mobile side, you can also integrate ActiveReportsJS into it.

In this tutorial, we will share how to call an HTML page containing ActiveReportJS in Android app development.

Implementation idea:

1. Creating an Android App calls the HTML code using a WebView control, which is a WebKit-based control that presents Web pages.
2. Create an asset file under the Android project and copy the HTML page and the required JS files to the current directory.
3. Set Android permissions and set executable JS code

Specific implementation:

1. Download Androird Studio and create a new blank Android application
2. Add MainActivity and add the WebView control

 <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

3. Add the Asset folder and place the JS and HTML pages in this path. Note whether the Asset belongs to Main, Debug or release, and the following path will be written

4. Modify the AndroidManifest.xml file to increase permissions

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

5. MainActivity calls WebView.loadUrl () and calls the corresponding JavaScript method. Note the path:

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() {// Note that the JS method name of the call is corresponding to // CallJS () method of JavaScript 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; }});