将网页封装安卓APP的几种方法

将网站封装成APP安卓应用我接触到的目前有三种方法，构建方法和难度也是逐步提升，不过，世上无难事，只怕有心人，干就完了，奥里给！

法一：利用`一个木函`封装

讲真，这个方法是我目前接触到最快，最省力，而且最高效的做法，速度起飞，快的一批~~

1.1 手机应用商店搜索`一个木函`应用。

1.2 找到下载并安装。

1.3 打开，依次全部应用>>网页转应用。

1.4 填写好相关信息。

1.5 打包构建安装即可。

1.6 诺，可以正常使用啦！

法二：利用HBuilderX构建

相对于法一来说，这个要稍微进阶一点，我们要借用HBuilderX把文件进行打包构建。既然然说到这里了，不得不插一嘴谈谈uni-app，据说这个特别厉害，官方文档是这么解释的：

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）、快应用等多个平台。

老牛逼了！改天着手研究研究！好了，让我们来开始转换。

2.1 新建一个`5+App`项目

如果你想了解什么是5+App项目，可以直接去阅读官方文档。

我们填写好项目名字和路径，项目会自动生成相关文件，文件各个内容如下所示。

这里的unpackage文件夹中，放的是一些不用打包编译的文件，manifest则是配置项了。删除css\img\js\index.html ，把自己的项目文件复制过来，配置好相关权限，然后选择云打包，当然，本地打包也不是不可以，看你自己使用习惯了。

然后我么点击发行——原生APP-云打包。

2.2 证书生成打包

打包需要证书，这里我们生成自己的证书，注意，在生成之前，我们需要安装JRE环境，可以去官网下载：https://www.oracle.com/technetwork/java/javase/downloads/index.htm

下载好后，配置好环境变量，在一个自己记得住的路径下打开powershell，输入以下命令，生成证书：

1	keytool -genkey -alias chuyuxuan -keyalg RSA -keysize 2048 -validity 36500 -keystore chuyuxuan.keystore

chuyuxuan是证书别名，可修改为自己想设置的字符，建议使用英文字母和数字
chuyuxuan.keystore是证书文件名称，可修改为自己想设置的文件名称，也可以指定完整文件路径
36500是证书的有效期，表示100年有效期，单位天，建议时间设置长一点，避免证书过期

回车后会提示：

Enter keystore password:  //输入证书文件密码，输入完成回车  
Re-enter new password:   //再次输入证书文件密码，输入完成回车  
What is your first and last name?  
  [Unknown]:  //输入名字和姓氏，输入完成回车  
What is the name of your organizational unit?  
  [Unknown]:  //输入组织单位名称，输入完成回车  
What is the name of your organization?  
  [Unknown]:  //输入组织名称，输入完成回车  
What is the name of your City or Locality?  
  [Unknown]:  //输入城市或区域名称，输入完成回车  
What is the name of your State or Province?  
  [Unknown]:  //输入省/市/自治区名称，输入完成回车  
What is the two-letter country code for this unit?  
  [Unknown]:  //输入国家/地区代号（两个字母），中国为CN，输入完成回车  
Is CN=XX, OU=XX, O=XX, L=XX, ST=XX, C=XX correct?  
  [no]:  //确认上面输入的内容是否正确，输入y，回车  

Enter key password for <testalias>  
        (RETURN if same as keystore password):  //确认证书密码与证书文件密码一样（HBuilder|HBuilderX要求这两个密码一致），直接回车就可以

以上命令运行完成后就会在你选择的路径生成证书。

2.3 查看证书信息

可以使用以下命令查看：

1 2	复制代码keytool -list -v -keystore chuyuxuan.keystore Enter keystore password: //输入密码，回车

会输出以下格式信息：

密钥库类型: PKCS12
密钥库提供方: SUN
您的密钥库包含 1 个条目
别名: chuyuxuan
创建日期: 2021年8月26日
条目类型: PrivateKeyEntry
证书链长度: 1
证书[1]:
所有者: CN=chu, OU=yuxuan, O=chuyuxuan, L=HN, ST=HN, C=CN
发布者: CN=chu, OU=yuxuan, O=chuyuxuan, L=HN, ST=HN, C=CN
序列号: 542e4e8
生效时间: Thu Aug 26 14:30:51 CST 2021, 失效时间: Sat Aug 02 14:30:51 CST 2121
证书指纹:
         SHA1: 43:52:72:5F:B3:4B:24:4C:F8:0B:8A:7F:58:F1:D8:29:7E:12:84:6B
         SHA256: 9B:00:FE:63:B6:47:AC:74:B0:0F:74:B7:A5:52:1D:C8:D0:23:E0:87:B5:85:8E:D1:85:D1:D8:2D:BF:C6:34:41
签名算法名称: SHA256withRSA
主体公共密钥算法: 2048 位 RSA 密钥
版本: 3
扩展:
#1: ObjectId: 2.5.29.14 Criticality=false
SubjectKeyIdentifier [
KeyIdentifier [
0000: 4F 03 F5 28 33 A2 A8 8C   65 9D A9 68 24 11 C7 2A  O..(3...e..h$..*
0010: 26 EF E7 92                                        &...
]
]
*******************************************
*******************************************

其中证书指纹信息（Certificate fingerprints）：

MD5
证书的MD5指纹信息（安全码MD5）
SHA1
证书的SHA1指纹信息（安全码SHA1）
SHA256
证书的SHA256指纹信息（安全码SHA245）

我们记住好这些，就可以利用他们来打包了，接下来填入相关信息，进行打包。

2.4 云打包

如图，填写好相关信息，打包即可。

注意通讯录权限

打包好之后，下载，安装即可。

2.5 正常使用~~

法三：利用Android studio构建

Android Studio 可是官方指定的安卓应用开发软件。你可以点击这里进行下载。后续的操作，你得在这个环境下去实现。

不知道你有没有发现，无论是通过一个木函封装还是通过HBuilderX，都有缺点，状态栏，标题栏无法自定义，它是固定住了的，无法手动修改了，所以，通过Android studio ，我们可以刻画出我们任何想要的界面，甚至加入一些丰富的功能。

3.1创建一个项目先

创建项目如下图所示：

我们要创建一个空的活动页（Activity），这样IDE会帮我们搭建好基础框架，免得我们自己动手去配置了。

在配置项目相关信息的时候，需要注意的是项目名称，项目语言，以及项目的SDK，注意，下载SDK需要一定的网络环境，否则会报错。SDK是确保你的应用能够运行在安卓系统上的工具包，你需要选择好符合你系统的SDK，一般安卓都是向下兼容的，我们选5.0以上的都行。

3.2 熟悉一下结构先

当你完成初始化之后，我们先来认识各个界面和功能吧，这样对我们之后更改有大用处。如图所示：

1️⃣处是视图切换，2️⃣处是控件集合，3️⃣处是目录树，也就是整个文件的结构，4️⃣所编辑的文件。

和大多数IDE一样，各个功能都差不多，基本上手就能看懂了，这里，就不在一一详细的去解释了。

3.3 添加WebView到主界面

由于我们只是利用webView做中间件，即相当于内嵌了一个浏览器，所以我们没有必要再添加其他组件了，直接在主界面上使用即可。

在设计模式下（Design）我们在组件面板（Palette）中找到小部件（Widgets）,把其中的WebView拖拽到界面中，如图所示：

之后，我们需要设定该组件的高度和宽度，这里，我们然它全屏就好了，匹配父组件即可。直接在最右边的布局（layout）中修改即可，当然，你也可以在代码（Code）模式下，输入以下代码：

<?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/mWebview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

效果如下图所示了：

3.4 配置 web View

我们界面已经绘制完毕，接下来，就开始配置逻辑了。首先，我们要让Webview显示我们需要显示的东西。

webView显示我们内容有两种方式，一种是将本地文件打包，另一种是直接访问链接。WebView在Android 4.3之后是基于chrome内核的，这里我们只介绍利用链接的方式加载界面，读取本地文件的方式也大同小异，故不在详解，具体使用方法大家可以参考官方文档

我们在MianActivity.java文件中加入如以下代码：

package com.example.chuyuxantest;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Window;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends AppCompatActivity {
    // 定义类属性
    private WebView mWebView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //去掉标题栏
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        // 实例化组件
        mWebView = (WebView) findViewById(R.id.mWebview);
        // 开启javascript 渲染
        mWebView.getSettings().setJavaScriptEnabled(true);
        // 处理各种浏览器事件
        mWebView.setWebViewClient(new WebViewClient());
        // 载入内容,这个根据你自己的链接来
        mWebView.loadUrl("https://blog.chuyuxuan.top/");
    }
    
    //为了提升用户体验，我们加一个返回提示
     public boolean onKeyDown(int keyCode, KeyEvent event) {
        //判断用户是否点击了“返回键”
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            //与上次点击返回键时刻作差
            if ((System.currentTimeMillis() - mExitTime) > 2000) {
                //大于2000ms则认为是误操作，使用Toast进行提示
                Toast.makeText(this, "请您确保当前的操作正确性，再按一次将退出程序", Toast.LENGTH_SHORT).show();
                //并记录下本次点击“返回键”的时刻，以便下次进行判断
                mExitTime = System.currentTimeMillis();
            } else {
                //小于2000ms则认为是用户确实希望退出程序-调用System.exit()方法进行退出
                System.exit(0);
            }
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }  
    
    
    
    当然，我们也可也把返回变成浏览器里面返回上一页。
    代码如下：
    
     @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode ==  KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
            mWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
  
    

}

我们不要忘记申请网络权限哈！找到app目录下的manifests，配置AndroidManifest.xml。
代码如下所示：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.chuyuxantest">
 	<!-- 申请 网络权限-->
    <uses-permission android:name="android.permission.INTERNET"/>
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:usesCleartextTraffic="true"
        android:theme="@style/Theme.ChuyuxanTest">
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>