在 Android Studio 中使用 HTML、CSS 和 JavaScript 构建 Android 应用

Android 是基于 Linux 内核和其他开源软件的修改版本的移动操作系统，主要为智能手机和平板电脑等触摸屏移动设备设计。是的，您在本文的标题中没看错。在本文中，我们将在 Android Studio 中使用 HTML、CSS 和 JavaScript 构建一个 Android 应用程序。

我们要在这个应用程序中构建什么？

这是我们将在本文中构建的示例视频。我们将使用 HTML 和 Javascript 显示文本并使用 CSS 更改背景颜色。

分步实施

第 1 步：创建一个新项目

打开一个新项目。
我们将使用Java语言开发 Empty Activity。保持所有其他选项不变。
在您方便的时候命名应用程序。
将有两个名为 activity_main.xml 和 MainActivity 的默认文件。Java

如果您不知道如何在 Android Studio 中创建新项目，可以参考如何在 Android Studio 中创建/启动新项目？

步骤 2. 处理 XML 文件

导航到app > res > layout > activity_main.xml并将以下代码添加到该文件。下面是 activity_main.xml 文件的代码。

XML

HTML



    



    This Text is shown with help of HTML.

CSS

body
{
    background-color: pink;
}
h1
{
    color:white
}

Javascript

document.write("This text is shown from Javascript");

Java

package com.example.androidwebapp;
  
import androidx.appcompat.app.AppCompatActivity;
  
import android.os.Bundle;
import android.webkit.WebView;
  
public class MainActivity extends AppCompatActivity {
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        WebView webView=findViewById(R.id.webView);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("file:///android_asset/index.html");
    }
}

步骤 3. 处理 HTML 文件

导航到 app > new > 文件并将其命名为 index.html。在 index.html 文件中使用以下代码

HTML



    



    This Text is shown with help of HTML.

第 4 步：处理 CSS 文件

导航到 app > new > 文件并将其命名为 style.css。在 style.css 文件中使用以下代码

CSS

body
{
    background-color: pink;
}
h1
{
    color:white
}

步骤 5. 处理 Javascript 文件

导航到 app > new > 文件并将其命名为 index.js。在 index.js 文件中使用以下代码

Javascript

document.write("This text is shown from Javascript");

步骤 6. 处理Java文件

导航到 MainActivity。 Java文件并在其中使用以下代码。

Java

package com.example.androidwebapp;
  
import androidx.appcompat.app.AppCompatActivity;
  
import android.os.Bundle;
import android.webkit.WebView;
  
public class MainActivity extends AppCompatActivity {
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        WebView webView=findViewById(R.id.webView);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("file:///android_asset/index.html");
    }
}

这是我们应用程序的最终输出。

输出：