2.1 创建项目

2.1.1 准备工作

略微过一遍一下 Kotlin
下载 AndroidStudio
准备一个 Android 手机，或者使用模拟器

2.1.2 创建 Android 项目

打开 AndroidStudio，选择 Start new Android Studio Project：

选择 Empty Activity，然后 Next：

配置一下项目名称等参数：

点 Finish，完成第一步。接下来项目需要初始化：

初始化有可能遇到网络问题，需要重新 sync 一下。也可以配置 aliyun 的镜像再同步，国内会更快：

代码如下：

maven { url 'https://maven.aliyun.com/repository/public/' }
maven { url 'https://maven.aliyun.com/repository/google/' }
maven { url 'https://maven.aliyun.com/repository/gradle-plugin/' }

2.1.3 项目结构

注意：左上角我选择的是 Android 视图，以后也将使用这个视图

2.2 基础开发介绍

2.2.1 Activity

Activity 类是 Android 应用的关键组件，对于前端来说，打开一个 Activity 可以认为是使用window.open或者是点击 <a> 标签打开一个新的页面，只不过它还包含 Android 特性的功能。

目前先了解以下几点：

生命周期：好比 Vue/React 的生命周期方法
ContentView：视图根节点

Activity 生命周期

Activity的ContentView

Activity的ContentView就是试图的根节点，要了解 ContentView，先了解一下 Android 的布局 XML 文件，打开 app/res/layout/activity_main.xml:

XML：使用 XML 描述 UI 结构，类似 DOM 使用 HTML 描述
预览开关：此处可打开和关闭预览
实时预览部分

Android 通常让我们通过书写 XML 来构建基本的 View 结构，尽管还有其他方法，但是现在我们先了解 XML。

DOM 不是也有动态生成吗，Android 也可以通过代码动态构建）

MainActivity

了解完后打开 MainActivity.kt：

代码如下，请看注释：

package com.example.tobebigfe

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

// 这里继承了AppCompatActivity，因此我们的类就是一个Activity了
class MainActivity : AppCompatActivity() {

    // 我们重写了父类的onCreate生命周期，做一些我们的事情
    override fun onCreate(savedInstanceState: Bundle?) {
        // 必须调用父类onCreate
        super.onCreate(savedInstanceState)

        /*
          重点：(感性理解即可)
              1. 前面说过的布局文件activity_main.xml
              2. 编译器会为我们生成R.layout.activity_main变量
              3. 这个变量代表activity_main这个布局
              4. setContentView表示给这个Activity设置ContentView
              5. Activity会使用这个布局，这样打开这个Activity就会构建这个布局的view
        */
        setContentView(R.layout.activity_main)
    }
}

2.2.2 Application

接下来了解一下 Android App 启动时发生了什么

AndroidManifest.xml

又一个 XML 文件，它描述了当前 App 的一些配置项。

一个粗略的启动步骤：

当一个 App 启动时会读取到AndroidManifest.xml的配置
生产一个 Application 实例（如果没有配置则使用 android.app.Application）
Application 启动后会先找到配置为启动的 Activity（见下文的 xml 注释）
创建这个 Activity，并调用 onCreate 方法
Activity 就会显示界面

AndroidManifest.xml 配置说明：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.tobebigfe"><!-- 默认包名，了解一下即可 -->

    <!-- 声明一个application -->
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        tools:ignore="GoogleAppIndexingWarning">

        <!-- 声明MainActivity   “.“ 就是使用默认包名 -->
        <activity android:name=".MainActivity">
            <intent-filter>
                <!-- 声明MainActivity用于启动app时入口Activity，第一时间启动本activity -->
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

2.3.3 扩展阅读

本文没讲的 Android 细节知识，需要时间自己看文档和实践

2.4 WebView加载网页

2.4.1 activity_main.xml 添加 WebView

打开app/res/layout/activity_main.xml，删除 TextView, 添加一个 WebView，如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!--
        这里添加一个铺满Activity的WebView
        并且添加了一个id，名为webView
        这里非常类似DOM的id属性，主要用于在代码中查找和使用
    -->
    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

2.4.2 MainActivity 中使用 WebView

ackage com.example.tobebigfe

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.webkit.WebViewClient
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // webView变量对应layout里的id，只有kotlin有这个功能
        // 打开js开关，让网页不禁用js代码
        webView.settings.javaScriptEnabled = true
        // 创建一个WebViewClient，否则有可能使用系统的浏览器在外部打开，而不是webview的效果
        webView.webViewClient = WebViewClient()
        // 加载网页
        webView.loadUrl("https://baidu.com")
    }
}

以上是最终代码，但这里讲解 2 个 AndroidStudio 提供的功能，以备后续高效编写代码

2.4.3 编辑器小技巧

自动提示

AndroidStudio 基于 IDEA 编辑器，代码提示非常非常充足和聪明，通常写 kotlin 会非常幸福

Shift+Enter 引入

假如我们没有用到自动提示，比如复制代码进编辑器里，这时我们把光标移动到这行代码，编辑器依然会提示你要引入内容

即使没有提示，也可以 Shift+Enter 尝试引入，通常会正确引入所需可以不用动光标，通过连续的 Shift+Enter 一步步引入尽可能多需要的

2.4.4 配置网络权限

在 AndroidManifest.xml 中添加网络权限，如下：

<...
package="com.example.tobebigfe">

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

<application ...

2.4.5 运行

打开 Android 手机调试模式

推荐使用百度搜索特定机型，比如：

华为手机打开 usb 调试模式
小米手机打开 usb 调试模式

完成后，插上 USB 线连接电脑和手机，连接好后，如下：

图中出现了我的设备，HUAWEI LIO-AN00，那么按图中的三角形运行

注意不是列表下面的 Pixel 2 API 28, 这个是模拟器如果这一步设备没有出现设备，需要百度解决一下

运行后的效果

显示了百度页面

到这就完成了 WebView 加载网页。

《成为大前端》系列 - 2. 基础开发和WebView加载网页（Android）