更新：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
<?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">
<WebView
android:id="@+id/web_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp">
</WebView>
</androidx.constraintlayout.widget.ConstraintLayout>
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
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.myapplication">
<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/Theme.MyApplication"
android:networkSecurityConfig="@xml/network_security_config"> <!-- 指向网络配置文件（该文件需要自建），以支持Http请求 -->
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
<!--添加网络访问权限-->
<uses-permission android:name="android.permission.INTERNET" />
</manifest>
修改完以上三个文件，即可在模拟器中看到我们的SPA页面
网络配置 允许Http 请求
Android 9 开始默认不在支持 Http 请求（可改用 Https）
在 app > src > main > res 目录下新建 xml 文件夹
在 新建的xml文件夹下创建network_security_config.xml文件
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<base-config cleartextTrafficPermitted="true">
<trust-anchors>
<certificates src="system" />
</trust-anchors>
</base-config>
</network-security-config>
页面多余内容删除
如果创建项目时没有选择空项目，那么在我们引入SPA后会有多余的布局
// AndroidManifest.xml 删除下边代码
android:theme="@style/Theme.MyApplication"
// 或
// values > themes.xml 修改 <style> 的parent属性
<style name="Theme.MyApplication" parent="Theme.AppCompat.Light.NoActionBar">
项目编译失败（安卓大佬请移步）
对于前端来说，构建一个新的安卓项目还是有些头疼的。比如说一个写好的项目，换个环境重新编译的时候，经常会遇到失败的的情况。
- Android Studio 版本不同
不同的版本可能会影响项目编译失败，这主要区分于大版本，比如；4.x 的项目，用3.x 编译很可能会失败。
- 缺少SDK
这个是比较常见的错误，通常来说一个项目的gradle会自动下载，但是SDK 不会。可以参考下图，下载需要的SDK
打包生成 .apk 安装文件
可调试安装包
每次 Build 项目后都会在 app > build > outputs > apk > debug下生成可调试的安装包app-debug.apk签名打包
通过上一面点击了下一步，发现需要选则一个签名
-
新建签名
签名
