面向web开发的安卓入门

- 日理万妓 2022-09-14 13:25 268阅读 0赞

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

--------------------

## 概述 ##

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

安卓操作系统基于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前端关系最密切的地方，文档看[这里][Link 3],以下涉及到的主要代码参考[这里][Link 4]。

### 添加webview ###

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

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

#### 向activity布局中添加Webview ####

然后在对应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页面

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();
                }
            });
        }

添加元素调用该方法

web页面

function  callJS(){
          return 'kkkkk'
        }

#### debug ####

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

console.log('tttttets')

则 ![337b246bf9b2d41fe174207bfa2b2ebe.png][]

--------------------

完结

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

[Link 1]: https://link.juejin.cn/?target=https%3A%2F%2Fdeveloper.android.google.cn%2Fdocs
[Link 2]: https://link.juejin.cn/?target=https%3A%2F%2Fdeveloper.android.google.cn%2Ftraining%2Fbasics%2Ffirstapp
[electron]: https://link.juejin.cn/?target=https%3A%2F%2Fwww.electronjs.org%2F
[Link 3]: https://link.juejin.cn/?target=https%3A%2F%2Fdeveloper.android.google.cn%2Fguide%2Fwebapps
[Link 4]: https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2FdinoZhao%2Fdinopack%2Ftree%2Fmaster%2Fothers%2Fandroid
[337b246bf9b2d41fe174207bfa2b2ebe.png]: /images/20220828/7b17a12fcfef4e489cf300cb608d00bf.png
[https_juejin.cn_post_6936823605086912526_heading-18]: https://juejin.cn/post/6936823605086912526#heading-18