Build UI with the Web

老猫10/22/22About 3 min

Tips

Auto.js Pro also includes built-in examples for building UI with web technologies. See Examples → Complex UI → Vue2.

This page explains how to embed a WebView inside an Auto.js Pro UI, load web content (remote or local), and communicate between JavaScript (Auto.js) and page JavaScript.

When to use WebView UI

WebView-based UI is a good fit when:

You already have a web frontend (Vue/React/etc.) and want to reuse it in Auto.js.
You need advanced layout/animation and want to leverage web tech.
You want rich text rendering (HTML/CSS) with interactive behaviors.

It is usually not a good fit when:

Your UI must be extremely lightweight (WebView has non-trivial memory overhead).
You need deep native widget behaviors (RecyclerView-like lists, native input/IME edge cases, etc.).

Minimal example: embed a WebView in UI

The WebView widget is an Android view. In Auto.js UI XML you can use a webview (or the full class name) depending on the runtime/widget mapping.

Example:

"ui";

$ui.layout(
  <vertical padding="16dp">
    <text text="WebView demo" textSize="18sp" />
    <webview id="wv" h="*" w="*" />
  </vertical>,
);

// Keep view operations on UI thread
ui.post(() => {
  ui.wv.loadUrl("https://example.com");
});

If your build/runtime does not recognize <webview />, use the Android class name:

"ui";

$ui.layout(
  <vertical padding="16dp">
    <android.webkit.WebView id="wv" h="*" w="*" />
  </vertical>,
);

Load local HTML

You have a few common choices:

Option A: Load `file://` from storage

"ui";

const htmlPath = "/sdcard/scripts/webview/index.html";
$ui.layout(<android.webkit.WebView id="wv" h="*" w="*" />);

ui.post(() => {
  ui.wv.loadUrl("file://" + htmlPath);
});

Notes:

On some Android versions / WebView configs, file:// access may be restricted.
For modern SPAs, relative asset loading (JS/CSS) may fail unless the base path is correct.

Option B: Load inline HTML (`loadDataWithBaseURL`)

This is useful for quick prototypes and demos.

"ui";

$ui.layout(<android.webkit.WebView id="wv" h="*" w="*" />);

const html = `<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Auto.js WebView</title>
    <style>body{font-family:sans-serif;padding:16px}</style>
  </head>
  <body>
    <h3>Hello WebView</h3>
    <button onclick="document.body.insertAdjacentHTML('beforeend','<p>clicked</p>')">Click</button>
  </body>
</html>`;

ui.post(() => {
  // baseUrl can be null, or a fake origin like "https://app.local/"
  ui.wv.loadDataWithBaseURL(
    "https://app.local/",
    html,
    "text/html",
    "utf-8",
    null,
  );
});

Enable JavaScript, storage, and debugging

WebView is powerful but locked down by default. Most real pages require JavaScript and DOM storage.

"ui";

$ui.layout(<android.webkit.WebView id="wv" h="*" w="*" />);

ui.post(() => {
  const settings = ui.wv.getSettings();
  settings.setJavaScriptEnabled(true);
  settings.setDomStorageEnabled(true);
  settings.setAllowFileAccess(true);
});

For debugging with Chrome DevTools:

importClass(android.webkit.WebView);
WebView.setWebContentsDebuggingEnabled(true);

Then open chrome://inspect on your desktop Chrome.

Listen to loading events (WebViewClient)

To intercept navigation and track page load progress, set a WebViewClient.

"ui";
importClass(android.webkit.WebViewClient);

$ui.layout(<android.webkit.WebView id="wv" h="*" w="*" />);

ui.post(() => {
  ui.wv.setWebViewClient(new JavaAdapter(WebViewClient, {
    shouldOverrideUrlLoading(view, request) {
      try {
        const url = request.getUrl().toString();
        console.log("navigating:", url);
      } catch (e) {}
      return false; // allow WebView to load
    },
    onPageStarted(view, url, favicon) {
      console.log("page started:", url);
    },
    onPageFinished(view, url) {
      console.log("page finished:", url);
    },
  }));

  ui.wv.loadUrl("https://example.com");
});

JS ↔ Auto.js communication

There are multiple ways to communicate. Choose based on your security needs.

Option A (recommended): custom URL scheme

The page navigates to a URL like autojs://bridge?type=...&msg=..., and you intercept it in shouldOverrideUrlLoading.

Auto.js side:

"ui";
importClass(android.webkit.WebViewClient);

$ui.layout(<android.webkit.WebView id="wv" h="*" w="*" />);

function decodeQuery(url) {
  const i = url.indexOf("?");
  if (i < 0) return {};
  const q = url.slice(i + 1);
  const obj = {};
  q.split("&").forEach(kv => {
    const [k, v] = kv.split("=");
    obj[decodeURIComponent(k)] = decodeURIComponent(v || "");
  });
  return obj;
}

ui.post(() => {
  const settings = ui.wv.getSettings();
  settings.setJavaScriptEnabled(true);

  ui.wv.setWebViewClient(new JavaAdapter(WebViewClient, {
    shouldOverrideUrlLoading(view, request) {
      const url = request.getUrl().toString();
      if (url.startsWith("autojs://bridge")) {
        const q = decodeQuery(url);
        console.log("bridge message:", q);
        return true;
      }
      return false;
    },
  }));

  ui.wv.loadDataWithBaseURL(
    "https://app.local/",
    `<!doctype html><html><body>
      <button onclick="location.href='autojs://bridge?type=ping&msg='+encodeURIComponent('hello')">Send</button>
    </body></html>`,
    "text/html",
    "utf-8",
    null,
  );
});

Why this is recommended:

No need to expose a Java object into the page.
Easy to validate origin and message format.

Option B: `addJavascriptInterface` (powerful, but be careful)

Android’s addJavascriptInterface exposes a Java object to page JS. This increases the attack surface. Do not use it with untrusted remote pages.

"ui";

$ui.layout(<android.webkit.WebView id="wv" h="*" w="*" />);

const Bridge = JavaAdapter(java.lang.Object, {
  postMessage(msg) {
    console.log("from page:", msg);
  }
});

ui.post(() => {
  const settings = ui.wv.getSettings();
  settings.setJavaScriptEnabled(true);
  ui.wv.addJavascriptInterface(Bridge, "AutoJs");

  ui.wv.loadDataWithBaseURL(
    "https://app.local/",
    `<!doctype html><html><body>
      <button onclick="AutoJs.postMessage('hello from web')">Send</button>
    </body></html>`,
    "text/html",
    "utf-8",
    null,
  );
});

Running Vue/React inside WebView

Common patterns:

Bundle SPA assets into a folder and load index.html via file:// (or a local HTTP server).
Use a local HTTP server started by Auto.js (best for SPAs with lots of assets). Ensure it only listens on localhost.

Practical tips:

Avoid remote CDN dependencies if you need offline capability.
For dev builds, enable sourcemaps and WebView debugging.
Handle reload/back navigation gracefully.

Security notes

Treat WebView content as untrusted unless it is fully local.
Do not expose powerful native/Auto.js APIs to remote pages.
If you must load remote pages, avoid addJavascriptInterface and use the URL scheme method with strict validation.

$ui API reference: ui/api.md
UI guidelines: ui/guidelines.md

lang: en-US
title: Build UI with the Web
description: Auto.js Pro v8 guide to building UIs with WebView and web technologies (HTML/CSS/JavaScript), including frameworks like Vue and React.
keywords:

Auto.js Pro
web UI
WebView
HTML UI
Vue UI
React UI
web development
v8 API
date: 2022-10-22
order: 5

Tips

Auto.js Pro also includes built-in examples for building UI with web technologies. See Examples → Complex UI → Vue2.