我整理的一些关于【CRI】的项目学习资料（附讲解～～）和大家一起分享、学习一下：

 https://d.51cto.com/xltfov

Android与JavaScript接口的页面跳转

在现代应用开发中，Android与网页之间的交互愈发频繁。尤其是在混合开发模式下，将JavaScript与Android应用结合起来，可以实现丰富的用户体验。本文将介绍如何通过JavaScript实现Android页面的跳转，并提供代码示例以及相应的类图和旅行图。

一、什么是JavaScript与Android接口？

在Android应用中，我们可以通过JavaScript与原生代码（Java或Kotlin）进行交互。这种交互通常是通过WebView来实现的。WebView是一个可以显示网页内容的视图组件，它允许我们在Android应用中加载和展示HTML、CSS和JavaScript。

二、实现页面跳转的基本步骤

  1. 创建Android WebView：首先，我们需要在Android项目中添加WebView组件。
  2. 加载HTML文件：将我们的HTML文件加载到WebView中，并确保我们可以通过JavaScript调用Android接口。
  3. 定义Android接口：在Android代码中，我们需要定义一个接口，用于处理来自JavaScript的调用。
  4. 页面跳转逻辑：通过JavaScript调用Android接口，实现页面跳转。

以下是一个简单的示例代码，以演示这个过程。

1. 创建WebView

在activity_main.xml中添加WebView组件：

<RelativeLayout xmlns:android="
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
2. 加载HTML文件

在MainActivity.java中初始化WebView并加载HTML文件：

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webview);
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true); // 启用JavaScript

        // 设置WebViewClient，使得点击链接不会跳转到浏览器
        webView.setWebViewClient(new WebViewClient());
        webView.addJavascriptInterface(new AndroidInterface(), "Android"); // 添加JS接口
        webView.loadUrl("file:///android_asset/index.html"); // 加载本地HTML文件
    }
    
    public class AndroidInterface {
        @JavascriptInterface
        public void navigateTo(String page) {
            // 实现页面跳转逻辑
            // 例如：使用Intent来启动新活动
            Intent intent = new Intent(MainActivity.this, NewActivity.class);
            startActivity(intent);
        }
    }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
3. 定义HTML文件

在assets文件夹中创建一个index.html文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Android与JavaScript交互</title>
</head>
<body>
    点击按钮跳转到新页面
    <button onclick="navigate()">跳转</button>
    
    <script>
        function navigate() {
            // 调用Android接口进行页面跳转
            Android.navigateTo('NewActivity');
        }
    </script>
</body>
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.

三、旅行图示意

下面是表示用户从主页面跳转到新页面的旅程图：

用户从主页面跳转到新页面 用户 系统
用户交互
用户交互 用户
用户点击跳转按钮
用户点击跳转按钮
系统响应
系统响应 系统
系统调用Android接口
系统调用Android接口 系统
系统跳转到新页面
系统跳转到新页面 用户从主页面跳转到新页面

四、类图示意

以下是表示Android程序结构的类图：

classDiagram
    class MainActivity {
        +WebView webView
        +void onCreate(Bundle savedInstanceState)
        +class AndroidInterface {
            +void navigateTo(String page)
        }
    }
    class NewActivity {
        +void onCreate(Bundle savedInstanceState)
    }

    MainActivity --> AndroidInterface
    MainActivity --> NewActivity

五、总结

通过以上示例，我们实现了一个简单的Android应用，用户可以通过点击按钮在JavaScript中调用Android接口，完成页面的跳转。这种交互可以极大地提升用户体验，使得Android应用不仅仅局限于原生界面，还可以结合丰富的网页内容。

在实际开发中，注意安全性问题，比如JavaScript接口的暴露应谨慎，避免潜在的安全隐患。希望本篇文章能帮助你更好地理解Android与JavaScript之间的交互方式，从而开拓更丰富的应用场景。

整理的一些关于【CRI】的项目学习资料（附讲解～～），需要自取：

 https://d.51cto.com/xltfov