面向web开发的安卓入门

·  阅读 1723

本文会从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')
复制代码


完结

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改