LazyCat404
LazyCat404

WebView 的简单使用(SPA打包apk)

更新：2021-11-10

混合开发逐渐流行起来，小前端也面临着挑战，这里就来简单说一下单页面应用如何一步步成为真正的移动App
PS：本文完全出于前端开发角度，Andriod 大佬多多指点~

方式1 - Hbuilderx

简单、无脑，无需配置即可快速打包
使用 Hbuilderx 打包最大的优点就是简单， 网上教程也很多，也可手动可视化设置启动页、App图标等，但是相对的，它的可控性不高，属于一键打包类，推荐新手或速成。

方式2 - Cordova

首先，这种方式很强大，打包出来的App的稳定性也略高，但是在使用方面确对很多新手有着较大难度，主要是其中需要大量配置，想要了解的小伙伴可以移步这里

方式3 - Andriod Studio (推荐)

这种方式不必多说，一定是混合开发中最常用、最好用的方式，下面就仔细说说一个纯前端是怎么利用 Andriod Studio 打包的。

创建项目

安装好 Andriod Studio 和 JDK 后，直接打开 Andriod Studio 创建一个空项目

值得注意的是，点击创建后，会进入一个模板选择页面，这里建议不要选择空模板，因为空的 Activity 无法直接启动，对于完全不懂Andriod 的小伙伴不友好

模板选择

之后就和大多数编辑器创建项目一样，输入名称、选择路径点击确认就创建好了。


项目创建

创建 SPA 资源文件

在 app > src > main 目录下新建 assets 文件夹
间构建好的前端项目，即 dist 直接放在该文件夹下即可

代码修改（重点）

Android 项目引入SPA 不得不说的就是 WebView，因此我们调整原生项目代码也是围绕WebView来说的。

最简单的，我们只需要调整 3个文件，可以实现在安卓项目中打开前端页面！

activity_main.xml
MainActivity.java
package com.example.myapplication;   // 创建项目时的包名

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        WebView webView = (WebView) findViewById(R.id.web_view);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setWebViewClient(new WebViewClient());
        WebSettings settings = webView.getSettings();
        settings.setDomStorageEnabled(true);//开启DOM
        webView.loadUrl("file:///android_asset/dist/index.html");  
    }
}

实际上，webView.loadUrl指向的也可以是一个在线的地址，比如：https://www.jianshu.com，如果使用线上地址，静态资源就不需要打包进去，可以减少安装包的体积，但是这样内容的加载会受网络影响。

AndroidManifest.xml

修改完以上三个文件，即可在模拟器中看到我们的SPA页面

网络配置 允许Http 请求

Android 9 开始默认不在支持 Http 请求（可改用 Https）

  1. 在 app > src > main > res 目录下新建 xml 文件夹

  2. 在 新建的xml文件夹下创建network_security_config.xml文件

页面多余内容删除

如果创建项目时没有选择空项目，那么在我们引入SPA后会有多余的布局

// AndroidManifest.xml  删除下边代码
android:theme="@style/Theme.MyApplication"

// 或

// values > themes.xml  修改