面向web开发的安卓入门

Posted 2021-10-27 Android程序员TD

本文会从web相关技术入手，介绍安卓开发的基本知识，进而对Hybrid开发有更深入的认识。需要有web开发基础和少许java基础。

---

概述

本文主要会参考官方文档,基本使用可见构建首个应用。

安卓操作系统基于linux内核，linux是一个多用户系统，每个安卓应用都可以是一个不同的用户，每个用户用用户id来表示，各自进程会各自的虚拟机上运行。以进行资源隔离和分配，因此每个应用只能访问各自所需的功能（重要功能需要授权）。

应用组件

应用组件是安卓应用的基本构建块，每个组件都是一个入口点，入口点是进入应用的入口，注意区别于java的main函数。

共有四种不同类型的组件

• Activities
• Services
• Broadcast receivers
• Content providers

每个组件可以看作是一个vue或react组件，每个组件都有对应用途和生命周期，注意就像js框架的组件可以只表示逻辑一样，比如vue的keep-alive，安卓也是一样。

而且任何应用的组件可以启动其他应用的组件，比如启用相机

Activities

activity用于用户交互，表示一个界面，一个具体的activity是Activity类的子类。
activity中包含不同的生命周期函数，会在对应时刻调用，比如onCreate()、onStart()、onResume()、onPause()、onStop() 和 onDestroy()。

Services

服务用于因各种原因使应用在后台保持运行状态，是一个在后台运行的组件，没有界面，比如在后台播放音乐，是Service类的子类。

Broadcast receivers

广播接收器用于在常规用户流之外传递事件，从而响应系统范围的广播。比如系统通知应用屏幕已关闭，是BroadcastReceiver的子类

Content providers

内容提供程序读写共享应用数据，这些数据可以存在文件系统、sqlite等，是ContentProvider的子类。

启用组件

以上四种组件中，前三种使用异步消息intent启动，intent可以理解为启动请求，这个请求可以是本应用的组件，也可以是其他应用的组件，Content providers会在成为 ContentResolver 的请求目标时启动。

类比electron

如果熟悉electron的话，这里介绍的安卓开发可以类比于electron，即使用一门服务端语言利用运行时提供的api进行系统访问并生成安装包，并可以通过webview内嵌web页面以与用户交互.其中

• 服务端语言，安卓使用Kotlin、Java 和 C++（后文以java指代所有），electron使用node.js中运行的js
• 界面，安卓有自己的界面体系，webview是一种扩展，electron需要用webview
• 应用系统，安卓开发用于所有使用安卓的设备，从手机到平板电脑和电视等，electron用于macOS、Windows 和 Linux等系统的桌面应用。

类比web开发

web开发和安卓开发是应用界面开发两种形式，完成的功能基本一致，因此这里会从各方面做一下对比、

页面和样式

在web开发中html负责页面描述、css负责样式 安卓中使用xml负责页面描述和样式，其中xml包括manifest和layout，前者是对整个项目的描述，后者是应用的各个组件，比如Activity，样式可以在各个xml元素上内联，也可以使用外部xml样式资源

这里说的manifest是androidManifest.xml文件，其中不仅要声明activity等组件，还有以下功能

• 声明需要的权限
• 声明所需的api级别
• 声明所需的硬件和软件功能
• 声明需要的api库，比如地图库

逻辑处理

web开发使用的js，安卓使用的是java，比如事件处理和数据处理。

路由

在web开发中如果是单页面可前端通过监测hashchange事件或history api实现前端路由，多页面可使用后端路由
在安卓中不同界面是一个单独的activity组件，路由功能通过activity之间的intent传递调用完成。

WebView

activity的ui布局是由各种ui类组合而成，比如Button类表示一个按钮，其实html中的各种dom元素也是一样，只不过浏览器将对应的元素封装好之后我们可以直接使用。
WebView类也是其中一个类，用于将网页作为activity的一部分显示，相当于缩水的浏览器，默认只显示网页，不包含浏览器其他部分。
这里可以适当重点关注，也是和web前端关系最密切的地方，文档看这里,以下涉及到的主要代码参考这里。

添加webview

有两种方式,如果被添加的页面需要执行js，需要通过设置添加相关权限，比如下面的启用js，和在manifest中添加网络权限

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

向activity布局中添加Webview

<WebView
      android:id="@+id/webview"
      android:layout_width="390dp"
      android:layout_height="416dp"/>

然后在对应activity的onCreate钩子函数中添加以下

WebView myWebView = (WebView) findViewById(R.id.webview);//查找对应元素
myWebView.loadUrl("file:///android_asset/index.html");//加载页面
WebSettings webSettings = myWebView.getSettings();//获取设置对象
webSettings.setjavascriptEnabled(true);//启用js

被加载的页面可以是网络页面，也可以是本地页面，上例中是通过file->new->folder->assets folder的方法添加了一个目录，然后在里面添加index.html文件完成的。

设置整个activity

和上面类似

WebView myWebView = new WebView(activityContext);
setContentView(myWebView);

安卓和web通信

通信包括双方的消息互相传递

js调用安卓

使用addJavascriptInterface()将一个接口绑定到内嵌web页面的一个全局变量中。 创建可供js调用方法的类

public class WebAppInterface {
    Context mContext;

    /** Instantiate the interface and set the context */
    WebAppInterface(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }

}

将该类实例化并绑定，此时就可以在js中访问全局变量Android，并使用上面定义的方法

 myWebView.addJavascriptInterface(new WebAppInterface(this), "Android");

web页面

    <input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

    function showAndroidToast(toast) {
            Android.showToast(toast);
    }

安卓调用js

使用evaluateJavascript()执行js全局作用域中的对应方法，并在回调中获取该方法的返回值 在activity中添加方法，下面代码会调用js中的callJs方法,并使用Toast弹出返回值

    public void  testJs(View view){
        WebView myWebView = (WebView) findViewById(R.id.webview);
        myWebView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String value) {
                //此处为 js 返回的结果
                Toast.makeText(MainActivity.this, value,Toast.LENGTH_SHORT).show();
            }
        });
    }

添加元素调用该方法

    <Button
        android:id="@+id/button2"
        android:onClick="testJs"
        android:text="调用js"
    />

web页面

  function  callJS(){
      return 'kkkkk'
    }

debug

在web页面调用console上的方法可以在安卓的ide的Logcat中显示，比如在页面中

  console.log('tttttets')

则

---

完结

本文转自 https://juejin.cn/post/6936823605086912526#heading-18，如有侵权，请联系删除。